实例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>
案例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>