jQuery

一、选择器与筛选器

 1 3.1.1 基本选择器      
 2 
 3 1
 4 $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")
 5 3.1.2 层级选择器      
 6 
 7 1
 8 $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")
 9 3.1.3 基本筛选器      
10 
11 1
12 $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")
13 3.1.4 属性选择器    
14 
15 1
16 $('[id="div1"]')   $('["alex="sb"][id]')
17 3.1.5 表单选择器     
18 
19 1
20 $("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

基本选择器

1 $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

过滤选择器

1 $("div").children(".test")     $("div").find(".test")  
2                                
3  $(".test").next()    $(".test").nextAll()    $(".test").nextUntil() 
4                            
5  $("div").prev()  $("div").prevAll()  $("div").prevUntil()   
6                         
7  $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 
8 
9  $("div").siblings()

查找选择器

二、操作元素(属性，css，文档处理)

1、属性操作

 1 --------------------------属性
 2 $("").attr();
 3 $("").removeAttr();
 4 $("").prop();
 5 $("").removeProp();
 6 --------------------------CSS类
 7 $("").addClass(class|fn)
 8 $("").removeClass([class|fn])
 9 --------------------------HTML代码/文本/值
10 $("").html([val|fn])
11 $("").text([val|fn])
12 $("").val([val|fn|arr])
13 ---------------------------
14 $("").css("color","red")

 1 <input id="chk1" type="checkbox" />是否可见
 2 <input id="chk2" type="checkbox" checked="checked" />是否可见
 3 
 4 
 5 
 6 <script>
 7 
 8 //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
 9 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
10 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
11 //需要使用prop方法去操作才能获得正确的结果。
12 
13 
14 //    $("#chk1").attr("checked")
15 //    undefined
16 //    $("#chk1").prop("checked")
17 //    false
18 
19 //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
20 //    $("#chk1").attr("checked")
21 //    undefined
22 //    $("#chk1").prop("checked")
23 //    true
24 
25     console.log($("#chk1").prop("checked"));//false
26     console.log($("#chk2").prop("checked"));//true
27     console.log($("#chk1").attr("checked"));//undefined
28     console.log($("#chk2").attr("checked"));//checked
29 </script>

注意：

2、文档处理

 1 //创建一个标签对象
 2     $("<p>")
 3 
 4 
 5 //内部插入
 6 
 7     $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
 8     $("").appendTo(content)       ----->$("p").appendTo("div");
 9     $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
10     $("").prependTo(content)      ----->$("p").prependTo("#foo");
11 
12 //外部插入
13 
14     $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
15     $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
16     $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
17     $("").insertBefore(content)   ----->$("p").insertBefore("#foo");
18 
19 //替换
20     $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
21 
22 //删除
23 
24     $("").empty()
25     $("").remove([expr])
26 
27 //复制
28 
29     $("").clone([Even[,deepEven]])

* clone操作：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9             <div class="outer">
10                 <div class="item">
11                         <input type="button" value="+" onclick="add(this);">
12                         <input type="text">
13                 </div>
14             </div>
15 
16 <script src="jquery-1.11.3.min.js"></script>
17     <script>
18             //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?
19             function add(self){
20                 // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
21                  var $clone_obj=$(self).parent().clone();
22                  $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
23                  $(self).parent().parent().append($clone_obj);
24             }
25            function removed(self){
26 
27                $(self).parent().remove()
28 
29            }
30 
31     </script>
32 </body>
33 </html>

clone应用复制样式条

3、css操作

 1 CSS
 2         $("").css(name|pro|[,val|fn])
 3     位置
 4         $("").offset([coordinates]) #偏移量，是个对象，有两属性（top、left：相当视口的偏移顶部、左侧多少，数值）$("").offset().top;
 5         $("").position()  #相对于已经定位的父亲标签的偏移量，两属性（top、left）
 6         $("").scrollTop([val])
 7         $("").scrollLeft([val])
 8     尺寸
 9         $("").height([val|fn])  #获取标签（内容）高度，不计padding、border
10         $("").width([val|fn])  #获取标签（内容）宽度
11         $("").innerHeight()  #获取高度，包括padding
12         $("").innerWidth()  #获取宽度，包括padding
13         $("").outerHeight([soptions]) #获取高度 包括padding、border
14         $("").outerWidth([options])   #获取宽度 包括padding、border
15 
16 特别的：
17         $("").outerWidth(true)  #获取宽度，包括padding、border、margin
18         $("").outerWidth(“300px”)  #设置宽度

4、事件

 1 页面载入
 2     ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
 3     $(document).ready(function(){}) -----------> $(function(){})
 4 
 5 事件处理
 6     $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
 7 
 8     //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
 9     //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
10     //  click事件；
11 
12     [selector]参数的好处:
13         好处在于.on方法为动态添加的元素也能绑上指定事件；如：
14 
15         //$('ul li').on('click', function(){console.log('click');})的绑定方式和
16         //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
17         //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的
18 
19         //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
20         //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
21     
22     [data]参数的调用:
23              function myHandler(event) {
24                 alert(event.data.foo);
25                 }
26              $("li").on("click", {foo: "bar"}, myHandler)

5、动画效果

#显示 隐藏
$("").hide(1000)  #隐藏，参数1000：1秒内完成隐藏
$("").show(1000)  #显示，参数1000：1秒内完成显示
$("").toggle(1000)  #隐藏与显示切换，参数1000：1秒内完成隐藏或显示

#滑动显示 或 隐藏
$("").slidedown(1000)  #滑动的效果显示
$("").slideup(1000)    #滑动的效果隐藏
$("").toggle(1000)    #滑动的效果显示或隐藏

#淡入淡出
$("").fadeIn(1000)    #淡入
$("").fadeOut(1000)   #淡出
$("").fadeTo(1000，0.4)    #透明度，可自己设置 0.4：透明度40%
$("").fadeToggle(1000)  #淡入淡出切换

注意：上述操作带有回调函数：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-2.1.4.min.js"></script>
 7 
 8 </head>
 9 <body>
10   <button>hide</button>
11   <p>helloworld helloworld helloworld</p>
12 
13 
14 
15  <script>
16    $("button").click(function(){
17        $("p").hide(1000,function(){
18            alert($(this).html())
19        })
20 
21    })
22     </script>
23 </body>
24 </html>

动画回调函数

三、实例汇集

1、左侧菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>left_menu</title>
 6 
 7     <style>
 8           .menu{
 9               height: 500px;
10               width: 30%;
11               background-color: gainsboro;
12               float: left;
13           }
14           .content{
15               height: 500px;
16               width: 70%;
17               background-color: rebeccapurple;
18               float: left;
19           }
20          .title{
21              line-height: 50px;
22              background-color: #425a66;
23              color: forestgreen;}
24 
25 
26          .hide{
27              display: none;
28          }
29 
30 
31     </style>
32 </head>
33 <body>
34 
35 <div class="outer">
36     <div class="menu">
37         <div class="item">
38             <div class="title">菜单一</div>
39             <div class="con">
40                 <div>111</div>
41                 <div>111</div>
42                 <div>111</div>
43             </div>
44         </div>
45         <div class="item">
46             <div class="title">菜单二</div>
47             <div class="con hide">
48                 <div>111</div>
49                 <div>111</div>
50                 <div>111</div>
51             </div>
52         </div>
53         <div class="item">
54             <div class="title">菜单三</div>
55             <div class="con hide">
56                 <div>111</div>
57                 <div>111</div>
58                 <div>111</div>
59             </div>
60         </div>
61 
62     </div>
63     <div class="content"></div>
64 
65 </div>
66 <script src="jquery-3.2.1.js"></script>
67 <script>
68            $(".item .title").click(function () {
69                 $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
70 
71 //                $(this).next().removeClass("hide");
72 //                $(this).parent().siblings().children(".con").addClass("hide");
73            })
74 </script>
75 
76 
77 </body>
78 </html>

左侧菜单

2、tab切换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>tab</title>
 6     <script>
 7            function tab(self){
 8                var index=$(self).attr("xxx");
 9                $("#"+index).removeClass("hide").siblings().addClass("hide");
10                $(self).addClass("current").siblings().removeClass("current");
11 
12            }
13     </script>
14     <style>
15         *{
16             margin: 0px;
17             padding: 0px;
18         }
19         .tab_outer{
20             margin: 0px auto;
21             width: 60%;
22         }
23         .menu{
24             background-color: #cccccc;
25             /*border: 1px solid red;*/
26             line-height: 40px;
27         }
28         .menu li{
29             display: inline-block;
30         }
31         .menu a{
32             border-right: 1px solid red;
33             padding: 11px;
34         }
35         .content{
36             background-color: tan;
37             border: 1px solid green;
38             height: 300px;
39         }
40         .hide{
41             display: none;
42         }
43 
44         .current{
45             background-color: darkgray;
46             color: yellow;
47             border-top: solid 2px rebeccapurple;
48         }
49     </style>
50 </head>
51 <body>
52       <div class="tab_outer">
53           <ul class="menu">
54               <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
55               <li xxx="c2" onclick="tab(this);">菜单二</li>
56               <li xxx="c3" onclick="tab(this);">菜单三</li>
57           </ul>
58           <div class="content">
59               <div id="c1">内容一</div>
60               <div id="c2" class="hide">内容二</div>
61               <div id="c3" class="hide">内容三</div>
62           </div>
63 
64       </div>
65 </body>
66 </html>

tab切换

3、全选反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.11.3.min.js"></script>
 7     <script>
 8 
 9              function selectall(){
10 
11                  $("table :checkbox").prop("checked",true)
12              }
13              function cancel(){
14 
15                  $("table :checkbox").prop("checked",false)
16              }
17 
18              function reverse(){
19 
20 
21                  //                 var idlist=$("table :checkbox")
22 //                 for(var i=0;i<idlist.length;i++){
23 //                     var element=idlist[i];
24 //
25 //                     var ischecked=$(element).prop("checked")
26 //                     if (ischecked){
27 //                         $(element).prop("checked",false)
28 //                     }
29 //                     else {
30 //                         $(element).prop("checked",true)
31 //                     }
32 //
33 //                 }
34 //    jquery循环的两种方式
35                  //方式一
36 //                 li=[10,20,30,40]
37 //                 dic={name:"yuan",sex:"male"}
38 //                 $.each(li,function(i,x){
39 //                     console.log(i,x)
40 //                 })
41 
42                  //方式二
43 //                    $("tr").each(function(){
44 //                        console.log($(this).html())
45 //                    })
46 
47 
48 
49                  $("table :checkbox").each(function(){
50 
51                      $(this).prop("checked",!$(this).prop("checked"));
52 
53 //                     if ($(this).prop("checked")){
54 //                         $(this).prop("checked",false)
55 //                     }
56 //                     else {
57 //                         $(this).prop("checked",true)
58 //                     }
59 
60                      // 思考:如果用attr方法可以实现吗?
61 
62 
63                  });
64              }
65 
66     </script>
67 </head>
68 <body>
69 
70      <button onclick="selectall();">全选</button>
71      <button onclick="cancel();">取消</button>
72      <button onclick="reverse();">反选</button>
73 
74      <table border="1">
75          <tr>
76              <td><input type="checkbox"></td>
77              <td>111</td>
78          </tr>
79          <tr>
80              <td><input type="checkbox"></td>
81              <td>222</td>
82          </tr>
83          <tr>
84              <td><input type="checkbox"></td>
85              <td>333</td>
86          </tr>
87          <tr>
88              <td><input type="checkbox"></td>
89              <td>444</td>
90          </tr>
91      </table>
92 
93 
94 
95 </body>
96 </html>

全反选

4、模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .back{
 8             background-color: rebeccapurple;
 9             height: 2000px;
10         }
11 
12         .shade{
13             position: fixed;
14             top: 0;
15             bottom: 0;
16             left:0;
17             right: 0;
18             background-color: coral;
19             opacity: 0.4;
20         }
21 
22         .hide{
23             display: none;
24         }
25 
26         .models{
27             position: fixed;
28             top: 50%;
29             left: 50%;
30             margin-left: -100px;
31             margin-top: -100px;
32             height: 200px;
33             width: 200px;
34             background-color: gold;
35 
36         }
37     </style>
38 </head>
39 <body>
40 <div class="back">
41     <input id="ID1" type="button" value="click" onclick="action1(this)">
42 </div>
43 
44 <div class="shade hide"></div>
45 <div class="models hide">
46     <input id="ID2" type="button" value="cancel" onclick="action2(this)">
47 </div>
48 
49 
50 <script src="jquery-1.11.3.min.js"></script>
51 <script>
52 
53     function action1(self){
54         $(self).parent().siblings().removeClass("hide");
55 
56     }
57     function action2(self){
58         //$(self).parent().parent().children(".models,.shade").addClass("hide")
59 
60         $(self).parent().addClass("hide").prev().addClass("hide")
61 
62     }
63 </script>
64 </body>
65 </html>

模态对话框

5、监听窗口滚轮事件返回顶部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/jquery-2.2.3.js"></script>
 7     <script>
 8 
 9 
10           window.onscroll=function(){
11 
12               var current=$(window).scrollTop();
13               console.log(current)
14               if (current>100){
15 
16                   $(".returnTop").removeClass("hide")
17               }
18               else {
19               $(".returnTop").addClass("hide")
20           }
21           }
22 
23 
24            function returnTop(){
25 //               $(".div1").scrollTop(0);
26 
27                $(window).scrollTop(0)
28            }
29 
30 
31 
32 
33     </script>
34     <style>
35         body{
36             margin: 0px;
37         }
38         .returnTop{
39             height: 60px;
40             width: 100px;
41             background-color: darkgray;
42             position: fixed;
43             right: 0;
44             bottom: 0;
45             color: greenyellow;
46             line-height: 60px;
47             text-align: center;
48         }
49         .div1{
50             background-color: orchid;
51             font-size: 5px;
52             overflow: auto;
53             width: 500px;
54         }
55         .div2{
56             background-color: darkcyan;
57         }
58         .div3{
59             background-color: aqua;
60         }
61         .div{
62             height: 300px;
63         }
64         .hide{
65             display: none;
66         }
67     </style>
68 </head>
69 <body>
70      <div class="div1 div">
71          <p>hello</p>
72          <p>hello</p>
73          <p>hello</p>
74          <p>hello</p>
75          <p>hello</p>
76          <p>hello</p>
77          <p>hello</p>
78          <p>hello</p>
79          <p>hello</p>
80          <p>hello</p>
81          <p>hello</p>
82          <p>hello</p>
83          <p>hello</p>
84          <p>hello</p>
85          <p>hello</p>
86          <p>hello</p>
87          <p>hello</p>
88          <p>hello</p>
89 
90      </div>
91      <div class="div2 div"></div>
92      <div class="div3 div"></div>
93      <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
94 </body>
95 </html>

返回顶部

6、滚动菜单

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7 
  8         body{
  9             margin: 0px;
 10         }
 11         img {
 12             border: 0;
 13         }
 14         ul{
 15             padding: 0;
 16             margin: 0;
 17             list-style: none;
 18         }
 19         .clearfix:after {
 20             content: ".";
 21             display: block;
 22             height: 0;
 23             clear: both;
 24             visibility: hidden;
 25         }
 26 
 27         .wrap{
 28             width: 980px;
 29             margin: 0 auto;
 30         }
 31 
 32         .pg-header{
 33             background-color: #303a40;
 34             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 35             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 36             box-shadow: 0 2px 5px rgba(0,0,0,.2);
 37         }
 38         .pg-header .logo{
 39             float: left;
 40             padding:5px 10px 5px 0px;
 41         }
 42         .pg-header .logo img{
 43             vertical-align: middle;
 44             width: 110px;
 45             height: 40px;
 46 
 47         }
 48         .pg-header .nav{
 49             line-height: 50px;
 50         }
 51         .pg-header .nav ul li{
 52             float: left;
 53         }
 54         .pg-header .nav ul li a{
 55             display: block;
 56             color: #ccc;
 57             padding: 0 20px;
 58             text-decoration: none;
 59             font-size: 14px;
 60         }
 61         .pg-header .nav ul li a:hover{
 62             color: #fff;
 63             background-color: #425a66;
 64         }
 65         .pg-body{
 66 
 67         }
 68         .pg-body .catalog{
 69             position: absolute;
 70             top:60px;
 71             width: 200px;
 72             background-color: #fafafa;
 73             bottom: 0px;
 74         }
 75         .pg-body .catalog.fixed{
 76             position: fixed;
 77             top:10px;
 78         }
 79 
 80         .pg-body .catalog .catalog-item.active{
 81             color: #fff;
 82             background-color: #425a66;
 83         }
 84 
 85         .pg-body .content{
 86             position: absolute;
 87             top:60px;
 88             width: 700px;
 89             margin-left: 210px;
 90             background-color: #fafafa;
 91             overflow: auto;
 92         }
 93         .pg-body .content .section{
 94             height: 500px;
 95         }
 96     </style>
 97 </head>
 98 <body>
 99 
100     <div class="pg-header">
101         <div class="wrap clearfix">
102             <div class="logo">
103                 <a href="#">
104                     <img src="images/3.jpg">
105                 </a>
106             </div>
107             <div class="nav">
108                 <ul>
109                     <li>
110                         <a  href="#">首页</a>
111                     </li>
112                     <li>
113                         <a  href="#">功能一</a>
114                     </li>
115                     <li>
116                         <a  href="#">功能二</a>
117                     </li>
118                 </ul>
119             </div>
120 
121         </div>
122     </div>
123     <div class="pg-body">
124         <div class="wrap">
125             <div class="catalog">
126                 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
127                 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
128                 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
129             </div>
130             <div class="content">
131 
132                 <div menu="function1" class="section">
133                     <h1>第一章</h1>
134                 </div>
135                 <div menu="function2" class="section">
136                     <h1>第二章</h1>
137                 </div>
138                 <div menu="function3" class="section">
139                     <h1>第三章</h1>
140                 </div>
141             </div>
142         </div>
143     </div>
144 
145     <script type="text/javascript" src="js/jquery-2.2.3.js"></script>
146     <script type="text/javascript">
147 
148 
149      window.onscroll=function(){
150          var ws=$(window).scrollTop()
151          if (ws>50){
152              $(".catalog").addClass("fixed")
153          }
154          else {
155              $(".catalog").removeClass("fixed")
156          }
157          $(".content").children("").each(function(){
158 
159           var offtop=$(this).offset().top;
160 //             console.log(offtop)
161              var total=$(this).height()+offtop;
162 
163              if (ws>offtop && ws<total){
164 
165                  if($(window).height()+$(window).scrollTop()==$(document).height()){
166                      var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")
167                      console.log(index)
168                  target='div[auto-to="'+index+'"]';
169                  $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
170 
171                  }
172                  else{
173                       var index=$(this).attr("menu");
174                  target='div[auto-to="'+index+'"]';
175                  $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
176                  }
177 
178 
179              }
180 
181          })
182 
183      }
184 
185     </script>
186 
187 
188 </body>
189 </html>

滚动菜单

7、面板拖动

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
 9         <div id="title" style="background-color: black;height: 40px;color: white;">
10             标题
11         </div>
12         <div style="height: 300px;">
13             内容
14         </div>
15     </div>
16 <script type="text/javascript" src="jquery-2.2.3.js"></script>
17 <script>
18     $(function(){
19         // 页面加载完成之后自动执行
20         $('#title').mouseover(function(){
21             $(this).css('cursor','move');
22         }).mousedown(function(e){
23             //console.log($(this).offset());
24             var _event = e || window.event;
25             // 原始鼠标横纵坐标位置
26             var ord_x = _event.clientX;
27             var ord_y = _event.clientY;
28 
29             var parent_left = $(this).parent().offset().left;
30             var parent_top = $(this).parent().offset().top;
31 
32             $(this).bind('mousemove', function(e){
33                 var _new_event = e || window.event;
34                 var new_x = _new_event.clientX;
35                 var new_y = _new_event.clientY;
36 
37                 var x = parent_left + (new_x - ord_x);
38                 var y = parent_top + (new_y - ord_y);
39 
40                 $(this).parent().css('left',x+'px');
41                 $(this).parent().css('top',y+'px');
42 
43             })
44         }).mouseup(function(){
45             $(this).unbind('mousemove');
46         });
47     })
48 </script>
49 </body>
50 </html>

面板拖动

8、放大镜

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>bigger</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding:0;
 10         }
 11         .outer{
 12             height: 350px;
 13             width: 350px;
 14             border: dashed 5px cornflowerblue;
 15         }
 16         .outer .small_box{
 17             position: relative;
 18         }
 19         .outer .small_box .float{
 20             height: 175px;
 21             width: 175px;
 22             background-color: darkgray;
 23             opacity: 0.4;
 24             fill-opacity: 0.4;
 25             position: absolute;
 26             display: none;
 27 
 28         }
 29 
 30         .outer .big_box{
 31             height: 400px;
 32             width: 400px;
 33             overflow: hidden;
 34             position:absolute;
 35             left: 360px;
 36             top: 0px;
 37             z-index: 1;
 38             border: 5px solid rebeccapurple;
 39             display: none;
 40 
 41 
 42         }
 43         .outer .big_box img{
 44             position: absolute;
 45             z-index: 5;
 46         }
 47 
 48 
 49     </style>
 50 </head>
 51 <body>
 52 
 53         <div class="outer">
 54             <div class="small_box">
 55                 <div class="float"></div>
 56                 <img src="small.jpg">
 57 
 58             </div>
 59             <div class="big_box">
 60                 <img src="big.jpg">
 61             </div>
 62 
 63         </div>
 64 
 65 
 66 <script src="jquery-2.1.4.min.js"></script>
 67 <script>
 68 
 69     $(function(){
 70 
 71           $(".small_box").mouseover(function(){
 72 
 73               $(".float").css("display","block");
 74               $(".big_box").css("display","block")
 75 
 76           });
 77           $(".small_box").mouseout(function(){
 78 
 79               $(".float").css("display","none");
 80               $(".big_box").css("display","none")
 81 
 82           });
 83 
 84           $(".small_box").mousemove(function(e){
 85 
 86               var _event=e || window.event;
 87 
 88               var float_width=$(".float").width();
 89               var float_height=$(".float").height();
 90 
 91               console.log(float_height,float_width);
 92 
 93               var float_height_half=float_height/2;
 94               var float_width_half=float_width/2;
 95               console.log(float_height_half,float_width_half);
 96 
 97 
 98                var small_box_width=$(".small_box").height();
 99                var small_box_height=$(".small_box").width();
100 
101 
102 
103 //  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
104               var mouse_left=_event.clientX-float_width_half;
105               var mouse_top=_event.clientY-float_height_half;
106 
107               if(mouse_left<0){
108                   mouse_left=0
109               }else if (mouse_left>small_box_width-float_width){
110                   mouse_left=small_box_width-float_width
111               }
112 
113 
114               if(mouse_top<0){
115                   mouse_top=0
116               }else if (mouse_top>small_box_height-float_height){
117                   mouse_top=small_box_height-float_height
118               }
119 
120                $(".float").css("left",mouse_left+"px");
121                $(".float").css("top",mouse_top+"px")
122 
123                var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
124                var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
125 
126               console.log(percentX,percentY)
127 
128                $(".big_box img").css("left", -percentX*mouse_left+"px")
129                $(".big_box img").css("top", -percentY*mouse_top+"px")
130           })
131     })
132 
133 
134 </script>
135 </body>
136 </html>

放大镜

9、动画效果

　显示隐藏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-2.1.4.min.js"></script>
 7     <script>
 8 
 9 $(document).ready(function() {
10     $("#hide").click(function () {
11         $("p").hide(1000);
12     });
13     $("#show").click(function () {
14         $("p").show(1000);
15     });
16 
17 //用于切换被选元素的 hide() 与 show() 方法。
18     $("#toggle").click(function () {
19         $("p").toggle();
20     });
21 })
22 
23     </script>
24     <link type="text/css" rel="stylesheet" href="style.css">
25 </head>
26 <body>
27 
28 
29     <p>hello</p>
30     <button id="hide">隐藏</button>
31     <button id="show">显示</button>
32     <button id="toggle">切换</button>
33 
34 </body>
35 </html>

显示隐藏

　滑动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-2.1.4.min.js"></script>
 7     <script>
 8     $(document).ready(function(){
 9      $("#slideDown").click(function(){
10          $("#content").slideDown(1000);
11      });
12       $("#slideUp").click(function(){
13          $("#content").slideUp(1000);
14      });
15       $("#slideToggle").click(function(){
16          $("#content").slideToggle(1000);
17      })
18   });
19     </script>
20     <style>
21 
22         #content{
23             text-align: center;
24             background-color: lightblue;
25             border:solid 1px red;
26             display: none;
27             padding: 50px;
28         }
29     </style>
30 </head>
31 <body>
32 
33     <div id="slideDown">出现</div>
34     <div id="slideUp">隐藏</div>
35     <div id="slideToggle">toggle</div>
36 
37     <div id="content">helloworld</div>
38 
39 </body>
40 </html>

滑动

　淡入淡出

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-2.1.4.min.js"></script>
 7     <script>
 8     $(document).ready(function(){
 9    $("#in").click(function(){
10        $("#id1").fadeIn(1000);
11 
12 
13    });
14     $("#out").click(function(){
15        $("#id1").fadeOut(1000);
16 
17    });
18     $("#toggle").click(function(){
19        $("#id1").fadeToggle(1000);
20 
21 
22    });
23     $("#fadeto").click(function(){
24        $("#id1").fadeTo(1000,0.4);
25 
26    });
27 });
28 
29 
30 
31     </script>
32 
33 </head>
34 <body>
35       <button id="in">fadein</button>
36       <button id="out">fadeout</button>
37       <button id="toggle">fadetoggle</button>
38       <button id="fadeto">fadeto</button>
39 
40       <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
41 
42 </body>
43 </html>

淡入淡出

10、轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
        }

        .outer{
            margin: 50px auto;
            height: 280px;
            width: 520px;
            position: relative;
        }

        .img li{
            position: absolute;
            top: 0;
            left: 0;
        }

        .num{
            position: absolute;
            bottom: 15px;
            text-align: center;
            width: 100%;

        }

        .num li{
            display: inline-block;
            height: 20px;
            width: 20px;
            background-color: forestgreen;
            color: #ffffff;
            text-align: center;
            line-height: 20px;
            border-radius: 50% ;
            margin: 0 5px;
            /*opacity: 0.9;*/
        }

        .btn{
            position: absolute;
            height: 50px;
            width: 25px;
            background-color: darkgray;
            color: #ffffff;
            text-align: center;
            line-height: 50px;
            top: 50%;
            margin-top: -25px;
            display: none;
        }
        .left_btn{
            left: 0;
        }
        .right_btn{
            right: 0;
        }

        .outer:hover .btn{
            display: block;
        }

        .current{
            background-color: red!important;
        }




    </style>

</head>
<body>

<div class="outer">
    <ul class="img">
        <li><a><img src="image_01/111.jpg"></a></li>
        <li><a><img src="image_01/123.jpg"></a></li>
        <li><a><img src="image_01/456.jpg"></a></li>
        <li><a><img src="image_01/789.jpg"></a></li>
    </ul>

    <ul class="num">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <div class="left_btn btn"> < </div>
    <div class="right_btn btn"> > </div>


</div>


<script src="jquery-3.2.1.js"></script>

<script>

    $(".num li").mouseover(function () {
        $(this).addClass("current").siblings().removeClass("current");
        var index=$(this).index()
        i=index;
        $(".img li").eq(index).fadeIn(1200).siblings().fadeOut(1200);


    })

    var Time=setInterval(move,1200);
var i=0;
    function move() {
        if(i==3){
            i=-1;
        }
        i++;
        $(".num li").eq(i).addClass("current").siblings().removeClass("current");
        // var index=$(this).index()
        $(".img li").eq(i).stop().fadeIn(1200).siblings().stop().fadeOut(1200);
    }

    function moveL() {
        if(i==0){
            i=4;
        }
        i--;
        $(".num li").eq(i).addClass("current").siblings().removeClass("current");
        var index=$(this).index()
        $(".img li").eq(i).stop().fadeIn(1200).siblings().stop().fadeOut(1200);
    }

    $(".outer").hover(function () {
        clearInterval(Time)
    },function () {
        Time=setInterval(move,1200);
    })
    
    $(".right_btn").click(function () {
        move();
    })

    $(".left_btn").click(function () {
        moveL()
    })

</script>

</body>
</html>

轮播图

11、瀑布流

1）自定义templatetags：

from django import template
from django.utils.safestring import mark_safe
from django.template.base import resolve_variable, Node, TemplateSyntaxError

register = template.Library()

@register.filter
def detail1(value,arg):

    """
    查看余数是否等于remainder arg="1,2"
    :param counter:
    :param allcount:
    :param remainder:
    :return:
    """
    allcount, remainder = arg.split(',')
    allcount = int(allcount)
    remainder = int(remainder)
    if value%allcount == remainder:
        return True
    return False

templatetags

2）前端html：

{% load xx %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 980px;
            margin: 0 auto;
        }
        .container .column{
            float: left;
            width: 245px;
        }
        .container .item img{
            width: 245px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,1" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,2" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,3" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,0" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

</body>
</html>

View Code

posted on 2018-06-22 17:59 Eric_nan 阅读(173) 评论(0) 收藏举报