jquery实例

实例1：轮播图

　　思路：

　　1.利用数字的索引来找到图片的索引进行手动切换

　　2.利用定时器，设置一个新的值i,来进行轮播，鼠标放在上面后图片停止播放

　　3.图片自动播放时，点击数字切换，让设置的i等于索引，从索引开始进行播放

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin:0;
  9             padding:0;
 10         }
 11         ul{
 12             list-style:none;
 13         }
 14         .outer{
 15             position:relative;
 16             width:500px;
 17             height:350px;
 18             border:dashed cadetblue 5px;
 19             margin:0 auto;
 20         }
 21         .outer .img li{
 22             position:absolute;
 23 
 24         }
 25         .number{
 26             position:absolute;
 27             left:0;
 28             bottom:10px;
 29             font-size:0px;
 30             text-align:center;
 31             width:100%;
 32         }
 33         .number li{
 34             width:20px;
 35             height:20px;
 36             line-height:20px;
 37             text-align:center;
 38             background-color:gray;
 39             border-radius:60%;
 40             display:inline-block;
 41             font-size:16px;
 42             margin:5px;
 43             cursor:pointer;
 44         }
 45 
 46         .button{
 47             height:60px;
 48             width:30px;
 49             background-color:gray;
 50             position:absolute;
 51             text-align:center;
 52             top:50%;
 53             margin-top:-30px;
 54             opacity:0.6;
 55             font-size:40px;
 56             font-weight:bold;
 57             display:none;
 58         }
 59         .but-right{
 60             right:0px;
 61         }
 62         .outer:hover .button{
 63             display:block;
 64         }
 65         .outer .number li .current{
 66             background-color:red;
 67         }
 68 
 69     </style>
 70 </head>
 71 <body>
 72     <div class="outer">
 73         <ul class="img">
 74             <li><img src="img/1.png"></li>
 75             <li><img src="img/2.jpg"></li>
 76             <li><img src="img/3.jpg"></li>
 77             <li><img src="img/4.jpg"></li>
 78             <li><img src="img/5.jpg"></li>
 79             <li><img src="img/6.jpg"></li>
 80         </ul>
 81         <ul class="number">
 82             <li>1</li>
 83             <li>2</li>
 84             <li>3</li>
 85             <li>4</li>
 86             <li>5</li>
 87             <li>6</li>
 88         </ul>
 89         <div class="but-left button"><</div>
 90         <div class="but-right button">></div>
 91     </div>
 92     <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 93     <script>
 94         $(function(){
 95             //数字轮播
 96             $(".number li").first().addClass('current');
 97             $(".number li").mouseover(function(){
 98                 $(this).addClass("current").siblings().removeClass("current");
 99                 
100                 var index = $(this).index();
101                 i=index;
102                 //$(".img li").eq(index).show(1000).siblings(1000).hide(1000);通过隐藏显示
103                 $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);//通过淡入淡出
104             });
105 
106             //自动轮播
107             i=0;
108             var time = setInterval(move,1500);
109             function move(){
110                 i++;
111                 if(i==5){
112                     i=0;
113                 }
114                  $(".number li").eq(i).addClass('current').siblings().removeClass("current");
115                  $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
116             }
117             
118             $('.outer').hover(
119             function(){
120                 
121                 clearInterval(time);
122             },
123             function(){
124                 
125                 var time = setInterval(move,1500);
126             });
127             //左右切换
128             $(".but-right").click(function(){
129                 move();
130             });
131             $(".but-left").click(function(){
132                 //方法1
133                 if(i==0){
134                     i=5;
135                 }
136                 i=i-2;
137                 move();
138                 /*方法二
139                 function move(){
140                 i--;
141                 if(i==0){
142                     i=5;
143                 }
144                  $(".number li").eq(i).addClass('current').siblings().removeClass("current");
145                  $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
146             }                         
147                 */
148             });
149         });
150 
151     </script>
152 </body>
153 </html>

轮播图

实例二：可移动面板

　　思路:

　　1.获取鼠标移动前的横纵坐标值

　　2.获取面板移动前离左和上的距离

　　3.获取鼠标移动后的新横纵坐标值

　　4.面板的左上距离+鼠标的新旧坐标值之差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div style="border:1px solid #ddd;600px;position:absolute;">
        <div id="title" style="background-color:black;height:40px;color:white;">
            标题</div>
        <div style="height:300px;">
            内容</div>
    </div>

    <script>
        $(function(){
           
            $("#title").mouseover(function(){
                $(this).css("cursor","move");
            }).mousedown(function(e){
         
                var _event=e||window.event;
               
                var old_x = _event.clientX;
                var old_y = _event.clientY;

               
                var parent_left = $(this).parent().offset().left;
                var parent_top = $(this).parent().offset().top;

            
                $(this).bind("mousemove",function(e){
                    var _new_event = e||window.event;
                   
                    var new_x = _new_event.clientX;
                    var new_y = _new_event.clientY;

 
                     var x = parent_left + (new_x - old_x);
                     var y = parent_top + (new_y - old_y);

                     $(this).parent().css('left',x+"px")
                     $(this).parent().css('top',y+"px")
                });
            }).mouseup(function(){
                $(this).unbind("mousemove");
            });
        });
    </script>
</body>
</html>

移动面板

实例三：模态对话框

　　思路：

　　1.添加文本内容时利用自定义属性来讲内容填充到文本框中。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .shade{
  8             position:fixed;
  9             left:0;
 10             top:0;
 11             right:0;
 12             bottom:0;
 13             background:rgba(0,0,0,.6);
 14             z-index:2;
 15         }
 16         .model{
 17             position:fixed;
 18             left:50%;
 19             top:50%;
 20             width:400px;
 21             height:300px;
 22             margin-top:-150px;
 23             margin-left:-200px;
 24             z-index:3;
 25             border:1px solid #ddd;
 26             background-color:white;
 27         }
 28         .hide{
 29             display:none;
 30         }
 31 
 32     </style>
 33 </head>
 34 <body>
 35 <div>
 36         <input type="button" value="添加" class="Add">
 37         <table border="1px;">
 38             <thead>
 39                 <tr>
 40                     <th>主机名</th>
 41                     <th >IP</th>
 42                     <th >端口</th>
 43                     <th>操作</th>
 44                 </tr>
 45             </thead>
 46             <tbody>
 47                 <tr>
 48                     <td target="host">c1.com</td>
 49                     <td target="ip">1.1.1.1</td>
 50                     <td target="port">8888</td>
 51                     <td class="Edit">edit</td>
 52                 </tr>
 53                 <tr>
 54                     <td target="host">c2.com</td>
 55                     <td target="ip">1.1.1.1</td>
 56                     <td target="port">8888</td>
 57                     <td class="Edit">edit</td>
 58                 </tr>
 59                 <tr>
 60                     <td target="host">c3.com</td>
 61                     <td target="ip">1.1.1.1</td>
 62                     <td target="port">8888</td>
 63                     <td class="Edit" >edit</td>
 64                 </tr>
 65 
 66             </tbody>
 67         </table>
 68     </div>
 69     <div class="model hide">
 70         <form>
 71             <p><input type="text"  id="host" name="host"></p>
 72             <p><input type="text" id="ip" name="ip"></p>
 73             <p><input type="text" id="port" name="port"></p>
 74             <input type="submit" value="提交" onclick="return SubmitForm();">
 75             <input type="button" value="取消" id="HideModel">
 76         </form>
 77     </div>
 78     <div class="shade hide"></div>
 79     <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 80     <script>
 81         $(function(){
 82             $(".Edit").click(function(){
 83                 $(".shade,.model").removeClass('hide');
 84 
 85                 var prevList = $(this).prevAll();
 86                 prevList.each(function(){
 87                     var text = $(this).text();
 88                     var target = $(this).attr("target");
 89                     $("#"+target).val(text);
 90                 });
 91             });
 92             $("#HideModel").click(function(){
 93                 $(".shade,.model").addClass('hide');
 94             });
 95             $(".Add").click(function(){
 96                $(".shade,.model").removeClass('hide');
 97             })
 98         });
 99         function SubmitForm(){
100             var flag=true;
101             $('.model').find('input[type="text"]').each(function(){
102                 var value = $(this).val();
103                 if(value.trim().length==0){
104                     flag=false;
105                     alert("表单不能为空");
106                     return false;
107                 }
108             });
109             return flag;
110         }
111 
112     </script>
113 </body>
114 </html>

对话框

实例4：添加复选框和删除

　　思路：

　　1.利用clone()方法复制

　　2.将复制的值+改为-，并将-的方法修改为删除

　　3.在利用appen()添加

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .inputs{
 8             display:inline-block;
 9         }
10         .icons{
11             display:inline-block;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="outer">
17         <div class="section">
18             <div class="icons">
19                 <a onclick="add(this);"><button>+</button></a>
20             </div>
21             <div class="inputs">
22                 <input type="checkbox">
23                 <input type="text" value="IP">
24             </div>
25         </div>
26     </div>
27     <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
28     <script>
29         function add(self){
30 
31             var item = $(self).parent().parent().clone()
32 
33             item.find("a").children().text("-");
34             item.find("a").attr("onclick","removeS(this);");
35 
36             $(".outer").append(item)
37         }
38         function removeS(self){
39             $(self).parent().parent().remove();
40         }
41     </script>
42 </body>
43 </html>

clone

案例5：放大镜

　　思路：准备一大一小两张图片

　　1.找到面板移动的距离

　　2.设定面板移动的距离，不能超出图片范围

　　3.图片放大的按照小图片来进行计算比例，移动方向和面板相反

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>放大镜</title>
  6     <style>
  7         *{
  8             margin:0;
  9             padding:0;
 10         }
 11         .outer{
 12             width:450px;
 13             height:450px;
 14             border:2px dashed gray;
 15         }
 16         .outer .small_box{
 17             position:relative;
 18         }
 19         .outer .small_box .float{
 20             width:225px;
 21             height:225px;
 22             background-color:gray;
 23             opacity:0.4;
 24             position:absolute;
 25             display:none;
 26         }
 27 
 28         .big_box{
 29             width:450px;
 30             height:450px;
 31             overflow:hidden;
 32             position:absolute;
 33             left:455px;
 34             top:0;
 35             display:none;
 36             z-index:1;
 37         }
 38         .big_box img{
 39             position:absolute;
 40             z-index:3;
 41         }
 42         .hide{
 43             display:none;
 44         }
 45     </style>
 46 </head>
 47 <body>
 48     <div class="outer">
 49         <div class="small_box">
 50             <div class="float"></div>
 51             <img src="1.png">
 52         </div>
 53         <div class="big_box">
 54             <img src="2.png">
 55         </div>
 56     </div>
 57      <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 58     <script>
 59         $(function(){
 60             $(".small_box").mouseover(function(){
 61                 $(".float").css("display","block");
 62                 $(".big_box").css("display","block");
 63             }).mousemove(function(e){
 64                 var _event = e || window.event;
 65                 //获取小盒子的长和宽,用来限制面板的移动距离
 66                 var small_width = $('.small_box').width();
 67                 var small_height = $('.small_box').height();
 68 
 69                 //获取面板的长和宽
 70                 var float_width = $('.float').width();
 71                 var float_height = $('.float').height();
 72                   //获取面板的长和宽的一半
 73                   //鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
 74                 var float_width_half = $('.float').width()/2;
 75                 var float_height_half = $('.float').height()/2;
 76 
 77                 //获取面板的能够移动的距离,这个值才是面板能够移动的距离
 78                 var mouse_left = _event.clientX-float_width_half;
 79                 var mouse_top = _event.clientY-float_height_half;
 80 
 81                 if(mouse_left<0){
 82                     mouse_left=0;
 83                 }else if(mouse_left>(small_width-float_width)){
 84                     mouse_left=small_width-float_width;
 85                 }
 86                 if(mouse_top<0){
 87                     mouse_top=0;
 88                 }else if(mouse_top>(small_height-float_height)){
 89                     mouse_top=small_height-float_height;
 90                 }
 91 
 92                 $('.float').css('left',mouse_left+"px");
 93                 $('.float').css('top',mouse_top+"px");
 94 
 95                 //设定大图片移动的比例
 96                 //找到大图片，然后进行位置设定，移动方向和面板移动相反
 97                 $(".big_box img").css("left",-2*mouse_left+"px");
 98                 $(".big_box img").css("top",-2*mouse_top+"px");
 99 
100             }).mouseout(function(){
101                 $(".float").css("display","none");
102                 $(".big_box").css("display","none");
103             });
104 
105         });
106 
107 
108     </script>
109 </body>
110 </html>

View Code