十分钟玩转 jQuery 实例大全-安度博客

一、简介

界说

　　jQuery首创人是美国John Resig，是优秀的javascript框架；

　　jQuery是一个轻量级、快速精练的javascript库。源码戳这

jQuery工具

　　jQuery发生的工具时jQuery独占的，只能自己调用

书写规则

　　支持链式操作；

　　在变量前加&＃39;$&＃39;符号（var $variable = jQuery 工具）；

　　注：此划定并不是强制要求。

二、寻找元素

选择器

基本选择器、层级选择器、属性选择器  与CSS类似，这里不再细说，详细猛戳这里。

基本筛选器

$(&＃39;li:first&＃39;) //第一个元素$(&＃39;li:last&＃39;) //最后一个元素$(&＃39;tr:even&＃39;) //索引为偶数的元素，从 0 开始$(&＃39;tr:odd&＃39;) //索引为奇数的元素，从 0 开始 $(&＃39;tr:eq(1)&＃39;) //给定索引值的元素$(&＃39;tr:gt(0)&＃39;) //大于给定索引值的元素$(&＃39;tr:lt(2)&＃39;) //小于给定索引值的元素$(&＃39;:focus&＃39;) //当前获取焦点的元素$(&＃39;:animated&＃39;) //正在执行动画效果的元素

内容选择器

$(&＃39;div:contains(&＃39;nick&＃39;)&＃39;) //包罗nick文本的元素$(&＃39;td:empty&＃39;) //不包罗子元素或者文本的空元素$(&＃39;div:has(p)&＃39;) //含有选择器所匹配的元素$(&＃39;td:parent&＃39;) //含有子元素或者文本的元素

表单选择器

$(&＃39;:input&＃39;) //匹配所有 input textarea select 和 button 元素$(&＃39;:text&＃39;) //所有的单行文本框$(&＃39;:password&＃39;) //所有密码框$(&＃39;:radio&＃39;) //所有单选按钮$(&＃39;:checkbox&＃39;) //所有复选框$(&＃39;:submit&＃39;) //所有提交按钮$(&＃39;:reset&＃39;) //所有重置按钮$(&＃39;:button&＃39;) //所有button按钮$(&＃39;:file&＃39;) //所有文件域 $(&＃39;input:checked&＃39;) //所有选中的元素$(&＃39;select option:selected&＃39;) //select中所有选中的option元素

筛选器

过滤

$(&＃39;p&＃39;).eq(0) //当前操作中第N个jQuery工具类似索引$(&＃39;li&＃39;).first() //第一个元素$(&＃39;li&＃39;).last() //最后一个元素$(this).hasClass(&＃39;test&＃39;) //元素是否含有某个特定的类返回布尔值$(&＃39;li&＃39;).has(&＃39;ul&＃39;) //包罗特定子女的元素

查找

$(&＃39;div&＃39;).children() //div中的每个子元素第一层$(&＃39;div&＃39;).find(&＃39;span&＃39;) //div中的包罗的所有span元素子子孙孙$(&＃39;p&＃39;).next() 　　　//紧邻p元素后的一个同辈元素$(&＃39;p&＃39;).nextAll() //p元素之后所有的同辈元素$(&＃39;#test&＃39;).nextUntil(&＃39;#test2&＃39;) //id为&＃39;#test&＃39;元素之后到id为&＃39;#test2&＃39;之间所有的同辈元素掐头去尾$(&＃39;p&＃39;).prev() //紧邻p元素前的一个同辈元素$(&＃39;p&＃39;).prevAll() //p元素之前所有的同辈元素$(&＃39;#test&＃39;).prevUntil(&＃39;#test2&＃39;) //id为&＃39;#test&＃39;元素之前到id为&＃39;#test2&＃39;之间所有的同辈元素掐头去尾$(&＃39;p&＃39;).parent() //每个p元素的父元素$(&＃39;p&＃39;).parents() //每个p元素的所有祖先元素bodyhtml$(&＃39;#test&＃39;).parentsUntil(&＃39;#test2&＃39;) //id为&＃39;#test&＃39;元素到id为&＃39;#test2&＃39;之间所有的父级元素掐头去尾$(&＃39;div&＃39;).siblings() //所有的同辈元素不包罗自己

 三、属性操作

基本属性操作

$(&＃39;img&＃39;).attr(&＃39;src&＃39;); 　　　　　　 //返回文档中所有图像的src属性值$(&＃39;img&＃39;).attr(&＃39;src&＃39;&＃39;test.jpg&＃39;); //设置所有图像的src属性$(&＃39;img&＃39;).removeAttr(&＃39;src&＃39;); 　　　//将文档中图像的src属性删除$(&＃39;input[type=&＃39;checkbox&＃39;]&＃39;).prop(&＃39;checked&＃39; true); //选中复选框$(&＃39;input[type=&＃39;checkbox&＃39;]&＃39;).prop(&＃39;checked&＃39; false);$(&＃39;img&＃39;).removeProp(&＃39;src&＃39;); 　　 //删除img的src属性

CSS类

$(&＃39;p&＃39;).addClass(&＃39;selected&＃39;); 　　//为p元素加上 &＃39;selected&＃39; 类$(&＃39;p&＃39;).removeClass(&＃39;selected&＃39;); //从p元素中删除 &＃39;selected&＃39; 类$(&＃39;p&＃39;).toggleClass(&＃39;selected&＃39;); //如果存在就删除否则就添加

HTML代码/文本/值

$(&＃39;p&＃39;).html(); 　　　　　　　　　　 //返回p元素的html内容$(&＃39;p&＃39;).html(&＃39;Hello <b>nick</b>!&＃39;); //设置p元素的html内容$(&＃39;p&＃39;).text(); 　　　　　　　　　　 //返回p元素的文本内容$(&＃39;p&＃39;).text(&＃39;nick&＃39;); 　　　　　　　//设置p元素的文本内容$(&＃39;input&＃39;).val(); 　　　　　　　　 //获取文本框中的值$(&＃39;input&＃39;).val(&＃39;nick&＃39;); 　　　　 //设置文本框中的内容

 四、CSS操作

样式 

$(&＃39;p&＃39;).css(&＃39;color&＃39;); //会见检察p元素的color属性$(&＃39;p&＃39;).css(&＃39;color&＃39;&＃39;red&＃39;); //设置p元素的color属性为red$(&＃39;p&＃39;).css({ &＃39;color&＃39;: &＃39;red&＃39; &＃39;background&＃39;: &＃39;yellow&＃39; }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）

 位置

$(&＃39;p&＃39;).offset() //元素在当前视口的相对偏移object {top: 122 left: 260}$(&＃39;p&＃39;).offset().top$(&＃39;p&＃39;).offset().left$(&＃39;p&＃39;).position() //元素相对父元素的偏移对可见元素有效，object {top: 117 left: 250}$(window).scrollTop() //获取滚轮滑的高度$(window).scrollLeft() //获取滚轮滑的宽度$(window).scrollTop(&＃39;100&＃39;) //设置滚轮滑的高度为100

尺寸

$(&＃39;p&＃39;).height(); //获取p元素的高度$(&＃39;p&＃39;).width(); //获取p元素的宽度$(&＃39;p:first&＃39;).innerHeight() //获取第一个匹配元素内部区域高度(包罗补白、不包罗边框)$(&＃39;p:first&＃39;).innerWidth() //获取第一个匹配元素内部区域宽度(包罗补白、不包罗边框)$(&＃39;p:first&＃39;).outerHeight() //匹配元素外部高度(默认包罗补白和边框)$(&＃39;p:first&＃39;).outerWidth() //匹配元素外部宽度(默认包罗补白和边框)$(&＃39;p:first&＃39;).outerHeight(true) //为true时包罗边距

 五、文档处置惩罚

 内部插入

$(&＃39;p&＃39;).append(&＃39;<b>nick</b>&＃39;); //每个p元素内后面追加内容$(&＃39;p&＃39;).appendTo(&＃39;div&＃39;); 　　　 //p元素追加到div内后$(&＃39;p&＃39;).prepend(&＃39;<b>Hello</b>&＃39;); //每个p元素内前面追加内容$(&＃39;p&＃39;).prependTo(&＃39;div&＃39;); 　 //p元素追加到div内前

 外部插入

$(&＃39;p&＃39;).after(&＃39;<b>nick</b>&＃39;); //每个p元素同级之后插入内容$(&＃39;p&＃39;).before(&＃39;<b>nick</b>&＃39;); //在每个p元素同级之前插入内容$(&＃39;p&＃39;).insertAfter(&＃39;#test&＃39;); //所有p元素插入到id为test元素的后面$(&＃39;p&＃39;).insertBefore(&＃39;#test&＃39;); //所有p元素插入到id为test元素的前面

替换

$(&＃39;p&＃39;).replaceWith(&＃39;<b>Paragraph. </b>&＃39;); //将所有匹配的元素替换成指定的HTML或DOM元素$(&＃39;<b>Paragraph. </b>&＃39;).replaceAll(&＃39;p&＃39;); //用匹配的元素替换掉所有 selector匹配到的元素

删除

$(&＃39;p&＃39;).empty(); //删除匹配的元素荟萃中所有的子节点，不包罗自己$(&＃39;p&＃39;).remove(); //删除所有匹配的元素包罗自己$(&＃39;p&＃39;).detach(); //删除所有匹配的元素(和remove()差异的是:所有绑定的事件、附加的数据会保留下来)

复制

$(&＃39;p&＃39;).clone() 　　//克隆元素并选中克隆的副本$(&＃39;p&＃39;).clone(true) //布尔值指事件处置惩罚函数是否会被复制

六、事件

页面载入

　　当页面载入乐成后再运行的函数事件

$(document).ready(function(){ do something...});//简写$(function($) { do something...});

页面处置惩罚

//bind 为每个匹配元素绑定事件处置惩罚函数，绑定多个用{}。$(&＃39;p&＃39;).bind(&＃39;click&＃39; function(){ alert( $(this).text() );});$(menuF).bind({ &＃39;mouseover&＃39;:function () { $(menuS).parent().removeClass(&＃39;hide&＃39;); }&＃39;mouseout&＃39;:function () { $(menuS).parent().addClass(&＃39;hide&＃39;);}}); $(&＃39;p&＃39;).one( &＃39;click&＃39; fun...) //one 绑定一个一次性的事件处置惩罚函数$(&＃39;p&＃39;).unbind( &＃39;click&＃39; ) //解绑一个事件

页面委派

// 与bind 差异的是其时间发生时才去暂时绑定。$(&＃39;p&＃39;).delegate(&＃39;click&＃39;function(){ do something...});$(&＃39;p&＃39;).undelegate(); 　　　//p元素删除由 delegate() 要领添加的所有事件$(&＃39;p&＃39;).undelegate(&＃39;click&＃39;) //从p元素删除由 delegate() 要领添加的所有click事件

事件

$(&＃39;p&＃39;).click(); 　　//单击事件$(&＃39;p&＃39;).dblclick(); //双击事件$(&＃39;input[type=text]&＃39;).focus() //元素获得焦点时触发 focus 事件$(&＃39;input[type=text]&＃39;).blur() //元素失去焦点时触发 blur事件$(&＃39;button&＃39;).mousedown()//当按下鼠标时触发事件$(&＃39;button&＃39;).mouseup() //元素上放松鼠标按钮时触发事件$(&＃39;p&＃39;).mousemove() //当鼠标指针在指定的元素中移动时触发事件$(&＃39;p&＃39;).mouseover() //当鼠标指针位于元素上方时触发事件$(&＃39;p&＃39;).mouseout() 　//当鼠标指针从元素上移开时触发事件$(window).keydown() //当键盘或按钮被按下时触发事件$(window).keypress() //当键盘或按钮被按下时触发事件每输入一个字符都触发一次$(&＃39;input&＃39;).keyup() //当按钮被松开时触发事件$(window).scroll() //当用户转动时触发事件$(window).resize() //当调整nk" target="_blank">浏览器窗口的巨细时触发事件$(&＃39;input[type=&＃39;text&＃39;]&＃39;).change() //当元素的值发生改变时触发事件$(&＃39;input&＃39;).select() //当input 元素中的文本被选择时触发事件$(&＃39;form&＃39;).submit() //当提交表单时触发事件$(window).unload() //用户脱离页面时

(event object) 工具

所有的事件函数都可以传入event参数利便处置惩罚事件

$(&＃39;p&＃39;).click(function(event){ alert(event.type); //&＃39;click&＃39; }); (evnet object)属性要领：event.pageX 　 //事件发生时，鼠标距离网页左上角的水平距离event.pageY 　 //事件发生时，鼠标距离网页左上角的垂直距离event.type 　　//事件的类型event.which 　 //按下了哪一个键event.data 　　//在事件工具上绑定数据，然后传入事件处置惩罚函数event.target 　//事件针对的网页元素event.preventDefault() 　//阻止事件的默认行为(好比点击链接，会自动打开新页面)event.stopPropagation() //停止事件向上层元素冒泡

 七、效果

 基本

$(&＃39;p&＃39;).show() 　　　　//显示隐藏的匹配元素$(&＃39;p&＃39;).show(&＃39;slow&＃39;); //参数体现速度(&＃39;slow&＃39;&＃39;normal&＃39;&＃39;fast&＃39;)也可为900毫秒$(&＃39;p&＃39;).hide() 　　　　//隐藏显示的元素$(&＃39;p&＃39;).toggle(); 　　 //切换 显示/隐藏

滑动

$(&＃39;p&＃39;).slideDown(&＃39;900&＃39;); //用900毫秒时间将段落滑下$(&＃39;p&＃39;).slideUp(&＃39;900&＃39;); 　//用900毫秒时间将段落滑上$(&＃39;p&＃39;).slideToggle(&＃39;900&＃39;); //用900毫秒时间将段落滑上，滑下

淡入淡出

$(&＃39;p&＃39;).fadeIn(&＃39;900&＃39;); 　　 //用900毫秒时间将段落淡入$(&＃39;p&＃39;).fadeOut(&＃39;900&＃39;); 　　 //用900毫秒时间将段落淡出$(&＃39;p&＃39;).fadeToggle(&＃39;900&＃39;); 　//用900毫秒时间将段落淡入淡出$(&＃39;p&＃39;).fadeTo(&＃39;slow&＃39; 0.6); //用900毫秒时间将段落的透明度调整到0.6

 八、工具会见

$.trim() 　　//去除字符串两头的空格$.each() 　　//遍历一个数组或工具，for循环$.inArray() //返回一个值在数组中的索引位置，不存在返回-1 $.grep() 　 //返回数组中切合某种尺度的元素$.extend() //将多个工具，合并到第一个工具$.makeArray() //将工具转化为数组$.type() //判断工具的种别（函数工具、日期工具、数组工具、正则工具等等$.isArray() //判断某个参数是否为数组$.isEmptyobject() //判断某个工具是否为空(不含有任何属性)$.isFunction() //判断某个参数是否为函数$.isPlainobject() //判断某个参数是否为用&＃39;{}&＃39;或&＃39;new object&＃39;建设的工具$.support() //判断nk" target="_blank">浏览器是否支持某个特性

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title></head><body> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> li = [112233]; $.each(lifunction (kv) { console.log(this); console.log(kv); if (k == 1){ return false; } }) </script> <script> function myEach(objfunc) { for (var i=0;i<obj.length;i++){ var current = obj[i]; var ret = func(icurrent); if (ret == false){ break; } } } var li = [102030]; myEach(lifunction (kv) { console.log(kv); return false; }) </script></body></html>

九、插件拓展机制 

//方式一jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); } uncheck: function() { return this.each(function() { this.checked = false; }); }});$(&＃39;input[type=checkbox]&＃39;).check();$(&＃39;input[type=radio]&＃39;).uncheck();

//方式二jQuery.extend({ min: function(a b) { return a < b ? a : b; } //三元运算 max: function(a b) { return a > b ? a : b; }});jQuery.min(23); //2jQuery.max(45); //5

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title></head><body> <div class=&＃39;title&＃39;>111</div> <div class=&＃39;title&＃39;>222</div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> jQuery.fn.extend({ show1: function () { var val = this.text(); val = val + &＃39;sb&＃39;; return val; } show2: function () { } }); var ret = $(&＃39;.title&＃39;).show1(); console.log(ret); jQuery.extend({ s1: function (arg) { var val = $(arg).text(); return val + &＃39;sb&＃39;; } s2: function () { } }); var ret2 = $.s1(&＃39;.title&＃39;); console.log(ret2); </script></body></html>

 十、实例

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 23px; background-color: #2F4F4F; color: white; position: fixed; right: 18px; bottom: 18px; } .divT:hover{ cursor: pointer; } .hide { display: none; } </style></head><body> <div class=&＃39;divH&＃39;></div> <div class=&＃39;divT hide&＃39; onclick=&＃39;ReturnTop();&＃39;><strong>返回顶部</strong></div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> window.onscroll = function () { var current = $(window).scrollTop(); if (current > 180){ $(&＃39;.divT&＃39;).removeClass(&＃39;hide&＃39;); }else { $(&＃39;.divT&＃39;).addClass(&＃39;hide&＃39;); } }; function ReturnTop() { $(window).scrollTop(0); } </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> .menu{ height: 600px; width: 30%; background-color: #2F4F4F; float: left; } .title{ line-height: 50px; color: #ddd; } .title:hover{ cursor: pointer; color: lightcyan; font-size: 18px; } .hide{ display: none; } </style></head><body> <div class=&＃39;outer&＃39;> <div class=&＃39;menu&＃39;> <div class=&＃39;item&＃39;> <div class=&＃39;title&＃39; onclick=&＃39;Show(this);&＃39;>菜单一</div> <div class=&＃39;con&＃39;> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class=&＃39;item&＃39;> <div class=&＃39;title&＃39; onclick=&＃39;Show(this);&＃39;>菜单二</div> <div class=&＃39;con hide&＃39;> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class=&＃39;item&＃39;> <div class=&＃39;title&＃39; onclick=&＃39;Show(this);&＃39;>菜单三</div> <div class=&＃39;con hide&＃39;> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> </div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> function Show(self) { $(self).next().removeClass(&＃39;hide&＃39;).parent().siblings().children(&＃39;.con&＃39;).addClass(&＃39;hide&＃39;); } </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } .tab_outer{ margin: 0px auto; width: 60%; } .menu{ background-color: #cccccc; border: 1px solid #ccc; line-height: 40px; } .menu li{ display: inline-block; color: white; } .menu li:hover { cursor: pointer; } .menu a{ padding: 11px; } .content{ border: 1px solid #ccc; height: 300px; font-size: 30px; } .hide{ display: none; } .current{ background-color: #0099dd; color: black; } </style></head><body> <div class=&＃39;tab_outer&＃39;> <ul class=&＃39;menu&＃39;> <li xxx=&＃39;c1&＃39; class=&＃39;current&＃39; onclick=&＃39;Tab(this);&＃39;>菜单一</li> <li xxx=&＃39;c2&＃39; onclick=&＃39;Tab(this);&＃39;>菜单二</li> <li xxx=&＃39;c3&＃39; onclick=&＃39;Tab(this);&＃39;>菜单三</li> </ul> <div class=&＃39;content&＃39;> <div id=&＃39;c1&＃39;>内容一</div> <div id=&＃39;c2&＃39; class=&＃39;hide&＃39;>内容二</div> <div id=&＃39;c3&＃39; class=&＃39;hide&＃39;>内容三</div> </div> </div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> function Tab(self) { $(self).addClass(&＃39;current&＃39;).siblings().removeClass(&＃39;current&＃39;); var x = &＃39;#&＃39; + $(self).attr(&＃39;xxx&＃39;); $(x).removeClass(&＃39;hide&＃39;).siblings().addClass(&＃39;hide&＃39;); } </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> body{ margin: 0; background-color: #dddddd; } .w{ margin: 0 auto; width: 980px; } .pg-header{ background-color: black; color: white; height: 48px; } .pg-body .menu{ position: absolute; left: 200px; width: 180px; background-color: white; float: left; } li { list-style-type: none; } .pg-body .menu .active{ background-color: #425a66; color: white; } .pg-body .fixed{ position: fixed; top: 10px; } .pg-body .content{ position: absolute; left: 385px; right: 200px; background-color: white; float: left; } .pg-body .content .item{ height: 900px; } </style></head><body> <div class=&＃39;pg-header&＃39;> <div class=&＃39;w&＃39;></div> </div> <div class=&＃39;pg-body&＃39;> <div id=&＃39;menu&＃39; class=&＃39;menu&＃39;> <ul> <li menu=&＃39;funcOne&＃39;>第一章</li> <li menu=&＃39;funcTwo&＃39;>第二章</li> <li menu=&＃39;funcStree&＃39;>第三章</li> </ul> </div> <div id=&＃39;content&＃39; class=&＃39;content&＃39;> <div class=&＃39;item&＃39; con=&＃39;funcOne&＃39;>床前明月管</div> <div class=&＃39;item&＃39; con=&＃39;funcTwo&＃39;>疑是地上霜</div> <div class=&＃39;item&＃39; con=&＃39;funcStree&＃39; style=&＃39;height: 100px&＃39;>我是郭德纲</div> </div> </div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> window.onscroll = function () { var onTop = $(window).scrollTop(); if (onTop >= 48){ $(&＃39;#menu&＃39;).addClass(&＃39;fixed&＃39;); }else { $(&＃39;#menu&＃39;).removeClass(&＃39;fixed&＃39;); } var flag = false; $(&＃39;.item&＃39;).each(function () { var topH = $(this).offset().top; var HH = $(this).height() + topH; var wH = $(window).height(); if ((wH + onTop) == HH){ $(&＃39;ul .active&＃39;).removeClass(&＃39;active&＃39;); $(&＃39;li:last&＃39;).addClass(&＃39;active&＃39;); flag = true; return } if (flag){ return } var menuCon = $(this).attr(&＃39;con&＃39;); if ((topH < onTop) && (onTop < HH)){ $(&＃39;ul [menu=&＃39;&＃39; + menuCon +&＃39;&＃39;]&＃39;).addClass(&＃39;active&＃39;); }else { $(&＃39;ul [menu=&＃39;&＃39; + menuCon +&＃39;&＃39;]&＃39;).removeClass(&＃39;active&＃39;); } }) } </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title></head><body> <button id=&＃39;in&＃39;>fadein</button> <button id=&＃39;out&＃39;>fadeout</button> <button id=&＃39;toggle&＃39;>fadetoggle</button> <button id=&＃39;fadeto&＃39;>fadeto</button> <div id=&＃39;id1&＃39; style=&＃39;display:none; width: 80px;height: 80px;background-color: blueviolet&＃39;></div> <div id=&＃39;id2&＃39; style=&＃39;display:none; width: 80px;height: 80px;background-color: orangered &＃39;></div> <div id=&＃39;id3&＃39; style=&＃39;display:none; width: 80px;height: 80px;background-color: darkgreen &＃39;></div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> $(document).ready(function(){ $(&＃39;#in&＃39;).click(function(){ $(&＃39;#id1&＃39;).fadeIn(1000); $(&＃39;#id2&＃39;).fadeIn(1000); $(&＃39;#id3&＃39;).fadeIn(1000); }); $(&＃39;#out&＃39;).click(function(){ $(&＃39;#id1&＃39;).fadeOut(1000); $(&＃39;#id2&＃39;).fadeOut(1000); $(&＃39;#id3&＃39;).fadeOut(1000); }); $(&＃39;#toggle&＃39;).click(function(){ $(&＃39;#id1&＃39;).fadeToggle(1000); $(&＃39;#id2&＃39;).fadeToggle(1000); $(&＃39;#id3&＃39;).fadeToggle(1000); }); $(&＃39;#fadeto&＃39;).click(function(){ $(&＃39;#id1&＃39;).fadeTo(10000.4); $(&＃39;#id2&＃39;).fadeTo(10000.5); $(&＃39;#id3&＃39;).fadeTo(10000); }); }); </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> #flipshow#content#fliphide#toggle{ padding: 5px; text-align: center; background-color: blueviolet; border:solid 1px red; } #content{ padding: 50px; display: none; } </style></head><body> <div id=&＃39;flipshow&＃39;>泛起</div> <div id=&＃39;fliphide&＃39;>隐藏</div> <div id=&＃39;toggle&＃39;>toggle</div> <div id=&＃39;content&＃39;>helloworld</div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> $(document).ready(function(){ $(&＃39;#flipshow&＃39;).click(function(){ $(&＃39;#content&＃39;).slideDown(1000); }); $(&＃39;#fliphide&＃39;).click(function(){ $(&＃39;#content&＃39;).slideUp(1000); }); $(&＃39;#toggle&＃39;).click(function(){ $(&＃39;#content&＃39;).slideToggle(1000); }) }); </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title></head><body> <!--1 隐藏与显示--> <!--2 淡入淡出--> <!--3 滑动--> <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数要领或者所能做的一件事--> <p>hello</p> <button id=&＃39;hide&＃39;>隐藏</button> <button id=&＃39;show&＃39;>显示</button> <button id=&＃39;toggle&＃39;>隐藏/显示</button> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> $(document).ready(function(){ $(&＃39;#hide&＃39;).click(function(){ $(&＃39;p&＃39;).hide(1000); }); $(&＃39;#show&＃39;).click(function(){ $(&＃39;p&＃39;).show(1000); }); //用于切换被选元素的 hide() 与 show() 要领。 $(&＃39;#toggle&＃39;).click(function(){ $(&＃39;p&＃39;).toggle(2000); }); }); </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title></head><body><div class=&＃39;outer&＃39;> <div class=&＃39;section&＃39;> <div class=&＃39;icons&＃39; style=&＃39;display: inline-block&＃39;> <a onclick=&＃39;Add(this);&＃39;><button>+</button></a> </div> <div class=&＃39;inputs&＃39; style=&＃39;display: inline-block&＃39;> <input type=&＃39;checkbox&＃39;> <input type=&＃39;text&＃39; value=&＃39;IP&＃39;> </div> </div> </div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> function Add(self) { $(self).parentsUntil(&＃39;outer&＃39;).clone().find(&＃39;a&＃39;).html(&＃39;<button>-</button>&＃39;).attr(&＃39;onclick&＃39;&＃39;Remove(this);&＃39;).end().eq(1).appendTo(&＃39;.outer&＃39;); } function Remove(self) { $(self).parentsUntil(&＃39;outer&＃39;).eq(1).remove(); } </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta http-equiv=&＃39;Content-Type&＃39; content=&＃39;text/html; charset=UTF-8&＃39;> <meta name=&＃39;viewport&＃39; content=&＃39;width=device-width&＃39;> <meta http-equiv=&＃39;X-UA-Compatible&＃39; content=&＃39;IE=8&＃39;> <title>购物商城</title> <style> *{ margin: 0; padding: 0; } .outer{ position:relative; width:350px; height:350px; border:1px solid black; } .outer .small-box{ position: relative; z-index: 1; } .outer .small-box .mark{ position: absolute; display: block; width: 350px; height: 350px; background-color: #fff; filter: alpha(opacity=0); opacity: 0; z-index: 10; } .outer .small-box .float-box{ display: none; width: 175px; height: 175px; position: absolute; background: #DAEEFC; filter: alpha(opacity=40); opacity: 0.4; } .outer .big-box{ position: absolute; top: 0; left: 351px; width: 350px; height: 350px; overflow: hidden; border: 1px solid transparent; z-index: 1; } .outer .big-box img{ position: absolute; z-index: 5 } </style></head><body> <div class=&＃39;outer&＃39;> <div class=&＃39;small-box&＃39;> <div class=&＃39;mark&＃39;></div> <div class=&＃39;float-box&＃39; ></div> <img width=&＃39;350&＃39; height=&＃39;350&＃39; src=http:\&＃39;../../css/1.jpg/&＃39;> </div> <div class=&＃39;big-box&＃39;> <img width=&＃39;900px&＃39; height=&＃39;900px&＃39; src=http:\&＃39;../../css/1.jpg/&＃39; > </div> </div><script src=&＃39;../../jquery-1.12.4.js&＃39;></script><script> $(function(){ $(&＃39;.mark&＃39;).mounk" target="_blank">seover(function () { $(&＃39;.float-box&＃39;).css(&＃39;display&＃39;&＃39;block&＃39;); $(&＃39;.big-box&＃39;).css(&＃39;display&＃39;&＃39;block&＃39;); }); $(&＃39;.mark&＃39;).mounk" target="_blank">seout(function () { $(&＃39;.float-box&＃39;).css(&＃39;display&＃39;&＃39;none&＃39;); $(&＃39;.big-box&＃39;).css(&＃39;display&＃39;&＃39;none&＃39;); }); $(&＃39;.mark&＃39;).mousemove(function (e) { var _event = e || window.event; //兼容多个浏览器的event参数模式 var float_box_width = $(&＃39;.float-box&＃39;)[0].offsetWidth; var float_box_height = $(&＃39;.float-box&＃39;)[0].offsetHeight;//175175 var float_box_width_half = float_box_width / 2; var float_box_height_half = float_box_height/ 2;//87.587.5 var small_box_width = $(&＃39;.outer&＃39;)[0].offsetWidth; var small_box_height = $(&＃39;.outer&＃39;)[0].offsetHeight;//360360 var mouse_left = _event.clientX - float_box_width_half; var mouse_top = _event.clientY - float_box_height_half; if (mouse_left < 0) { mouse_left = 0; } else if (mouse_left > small_box_width - float_box_width) { mouse_left = small_box_width - float_box_width; } if (mouse_top < 0) { mouse_top = 0; } else if (mouse_top > small_box_height - float_box_height) { mouse_top = small_box_height - float_box_height; } $(&＃39;.float-box&＃39;).css(&＃39;left&＃39;mouse_left + &＃39;px&＃39;); $(&＃39;.float-box&＃39;).css(&＃39;top&＃39;mouse_top + &＃39;px&＃39;); var percentX = ($(&＃39;.big-box img&＃39;)[0].offsetWidth - $(&＃39;.big-box&＃39;)[0].offsetWidth) / (small_box_width - float_box_width); var percentY = ($(&＃39;.big-box img&＃39;)[0].offsetHeight - $(&＃39;.big-box&＃39;)[0].offsetHeight) / (small_box_height - float_box_height); console.log($(&＃39;.big-box img&＃39;)[0].offsetWidth$(&＃39;.big-box&＃39;)[0].offsetWidthsmall_box_widthfloat_box_width) console.log(percentXpercentY) $(&＃39;.big-box img&＃39;).css(&＃39;left&＃39;-percentX * mouse_left + &＃39;px&＃39;); $(&＃39;.big-box img&＃39;).css(&＃39;top&＃39;-percentY * mouse_top + &＃39;px&＃39;) }) })</script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> *{ margin: 0; padding: 0; } .hide{ display:none; } .header-nav { height: 39px; background: #c9033b; } .header-nav .bg{ background: #c9033b; } .header-nav .nav-allgoods .menuEvent { display: block; height: 39px; line-height: 39px; text-decoration: none; color: #fff; text-align: center; font-weight: bold; font-family: 微软雅黑; color: #fff; width: 100px; } .header-nav .nav-allgoods .menuEvent .catName { height: 39px; line-height: 39px; font-size: 15px; } .header-nav .nav-allmenu a { display: inline-block; height: 39px; vertical-align: top; padding: 0 15px; text-decoration: none; color: #fff; float: left; } .header-menu a{ color:#656565; } .header-menu .menu-catagory{ position: absolute; background-color: #fff; border-left:1px solid #fff; height: 316px; width: 230px; z-index: 4; float: left; } .header-menu .menu-catagory .catagory { border-left:4px solid #fff; height: 104px; border-bottom: solid 1px #eaeaea; } .header-menu .menu-catagory .catagory:hover { height: 102px; border-left:4px solid #c9033b; border-bottom: solid 1px #bcbcbc; border-top: solid 1px #bcbcbc; } .header-menu .menu-content .item{ margin-left:230px; position:absolute; background-color:white; height:314px; width:500px; z-index:4; float:left; border: solid 1px #bcbcbc; border-left:0; box-shadow: 1px 1px 5px #999; } </style></head><body> <div class=&＃39;pg-header&＃39;> <div class=&＃39;header-nav&＃39;> <div class=&＃39;container narrow bg&＃39;> <div class=&＃39;nav-allgoods left&＃39;> <a id=&＃39;all_menu_catagory&＃39; href=&＃39;#&＃39; class=&＃39;menuEvent&＃39;> <b class=&＃39;catName&＃39;>全部商品分类</b>> <span class=&＃39;arrow&＃39; style=&＃39;display: inline-block;vertical-align: top;&＃39;></span> </a> </div> </div> </div> <div class=&＃39;header-menu&＃39;> <div class=&＃39;container narrow hide&＃39;> <div id=&＃39;nav_all_menu&＃39; class=&＃39;menu-catagory&＃39;> <div class=&＃39;catagory&＃39; float-content=&＃39;one&＃39;> <div class=&＃39;title&＃39;>家电</div> <div class=&＃39;body&＃39;> <a href=&＃39;#&＃39;>空调</a> </div> </div> <div class=&＃39;catagory&＃39; float-content=&＃39;two&＃39;> <div class=&＃39;title&＃39;>床上用品</div> <div class=&＃39;body&＃39;> <a href=&＃39;http://www.baidu.com&＃39;>床单</a> </div> </div> <div class=&＃39;catagory&＃39; float-content=&＃39;three&＃39;> <div class=&＃39;title&＃39;>水果</div> <div class=&＃39;body&＃39;> <a href=&＃39;#&＃39;>橘子</a> </div> </div> </div> <div id=&＃39;nav_all_content&＃39; class=&＃39;menu-content&＃39;> <div class=&＃39;item hide&＃39; float-id=&＃39;one&＃39;> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>厨房用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39; target=&＃39;_blank&＃39; title=&＃39;勺子&＃39;>勺子</a> </span> </dd> </dl> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>厨房用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39; target=&＃39;_blank&＃39; title=&＃39;菜刀&＃39;>菜刀</a> </span> </dd> </dl> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>厨房用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39;>菜板</a> </span> </dd> </dl> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>厨房用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39; target=&＃39;_blank&＃39; title=&＃39;碗&＃39;>碗</a> </span> </dd> </dl> </div> <div class=&＃39;item hide&＃39; float-id=&＃39;two&＃39;> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>床上用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39; target=&＃39;_blank&＃39; title=&＃39;&＃39;>枕头</a> </span> </dd> </dl> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>床上用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39; target=&＃39;_blank&＃39; title=&＃39;角阀&＃39;>夏凉被</a> </span> </dd> </dl> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>床上用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39; target=&＃39;_blank&＃39; title=&＃39;角阀&＃39;>嘿嘿嘿</a> </span> </dd> </dl> </div> <div class=&＃39;item hide&＃39; float-id=&＃39;three&＃39;> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>厨房用品</a></dt> <dd> <span>| <a href=&＃39;#&＃39; target=&＃39;_blank&＃39; title=&＃39;角阀&＃39;>微波炉</a> </span> </dd> </dl> <dl> <dt><a href=&＃39;#&＃39; class=&＃39;red&＃39;>厨房用品</a></dt> <dd> <span>| <a href=&＃39;http://www.meilele.com/category-jiaofa&＃39; target=&＃39;_blank&＃39; title=&＃39;角阀&＃39;>金菜刀</a> </span> </dd> </dl> </div> </div> </div> </div></div><script src=&＃39;../../jquery-1.12.4.js&＃39;></script><script> $(function () { Change(&＃39;#all_menu_catagory&＃39;&＃39;#nav_all_menu&＃39;&＃39;#nav_all_content&＃39;) }); function Change(menuFmenuSmenuT) { $(menuF).bind({ &＃39;mouseover&＃39;:function () { $(menuS).parent().removeClass(&＃39;hide&＃39;); }&＃39;mouseout&＃39;:function () { $(menuS).parent().addClass(&＃39;hide&＃39;); } }); $(menuS).children().bind({ &＃39;mouseover&＃39;:function () { $(menuS).parent().removeClass(&＃39;hide&＃39;); var $item = $(menuT).find(&＃39;[float-id=&＃39;&＃39; +　$(this).attr(&＃39;float-content&＃39;) + &＃39;&＃39;]&＃39;); $item.removeClass(&＃39;hide&＃39;).siblings().addClass(&＃39;hide&＃39;); } &＃39;mouseout&＃39;:function () { $(menuS).parent().addClass(&＃39;hide&＃39;); $(menuT).parent().addClass(&＃39;hide&＃39;); } }); $(menuT).children().bind({ &＃39;mouseover&＃39;:function () { $(menuS).parent().removeClass(&＃39;hide&＃39;); $(this).removeClass(&＃39;hide&＃39;); } &＃39;mouseout&＃39;:function () { $(menuS).parent().addClass(&＃39;hide&＃39;); $(this).addClass(&＃39;hide&＃39;); } }) }</script></body></html>

<!DOCTYPE html><html><head lang=&＃39;en&＃39;> <meta charset=&＃39;UTF-8&＃39;> <title></title></head><body> <div style=&＃39;border: 1px solid #ddd;width: 600px;position: absolute;&＃39;> <div id=&＃39;title&＃39; style=&＃39;background-color: black;height: 40px;color: white;&＃39;> <strong>标题</strong> </div> <div style=&＃39;height: 300px;&＃39;> 内容 </div> </div><script type=&＃39;text/javascript&＃39; src=&＃39;../../jquery-1.12.4.js&＃39;></script><script> $(function () { $(&＃39;#title&＃39;).mouseover(function () { $(this).css(&＃39;cursor&＃39;&＃39;move&＃39;); }).mousedown(function (e) { var _event = e || widows.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind(&＃39;mousemove&＃39;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 - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css(&＃39;left&＃39;x+&＃39;px&＃39;); $(this).parent().css(&＃39;top&＃39;y+&＃39;px&＃39;); }) }).mouseup(function () { $(this).unbind(&＃39;mousemove&＃39;); }); })</script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> .shade{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(000.6) ; z-index: 20; } .modal{ position: fixed; left: 50%; top: 50%; height: 300px; width: 400px; margin-top: -150px; margin-left: -200px; z-index: 30; border: 1px solid #ddd; background-color: white; } .hide{ display: none; } .modal form { position: fixed; left: 50%; top: 50%; height: 200px; width: 229px; border: 1px; margin-left: -115px; margin-top: -100px; } .modal form p { float: right; margin-top: 12px; } .modal form span { float: right; display: inline-block; height: 18px; width: 170px; background-color: #FFEBEB; text-align: center; border: 1px solid #ffbdbe; color: #e4393c; font-size: 14px; visibility: hidden; } .modal form [type=&＃39;button&＃39;] { position: absolute; bottom: -30px; left: 115px; } .modal form [value=&＃39;提交&＃39;]{ left: 50px; } </style></head><body> <div style=&＃39;width: 300px; margin: 0 auto&＃39;> <input type=&＃39;button&＃39; value=&＃39;添加主机&＃39; onclick=&＃39;return Add();&＃39; /> <table style=&＃39;border: 2px solid #F5F5F5; width: 300px;&＃39;> <thead> <tr> <th >主机名</th> <th >IP</th> <th >端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td target=&＃39;host&＃39;>c1.com</td> <td target=&＃39;ip&＃39;>1.1.1.1</td> <td target=&＃39;port&＃39;>8888</td> <td onclick=&＃39;Edit(this);&＃39;>Edit</td> </tr> <tr> <td target=&＃39;host&＃39;>c2.com</td> <td target=&＃39;ip&＃39;>1.1.1.1</td> <td target=&＃39;port&＃39;>8888</td> <td onclick=&＃39;Edit(this);&＃39;>Edit</td> </tr> <tr> <td target=&＃39;host&＃39;>c3.com</td> <td target=&＃39;ip&＃39;>1.1.1.1</td> <td target=&＃39;port&＃39;>8888</td> <td onclick=&＃39;Edit(this);&＃39;>Edit</td> </tr> <tr> <td target=&＃39;host&＃39;>.com</td> <td target=&＃39;ip&＃39;>1.1.1.1</td> <td target=&＃39;port&＃39;>8888</td> <td onclick=&＃39;Edit(this);&＃39;>Edit</td> </tr> </tbody> </table> </div> <div class=&＃39;shade hide&＃39;></div> <div class=&＃39;modal hide&＃39;> <form action=&＃39;&＃39; method=&＃39;get&＃39;> <p>主机名:<input type=&＃39;text&＃39; id=&＃39;host&＃39; name=&＃39;host&＃39;><br><span></span></p> <p>IP地址:<input type=&＃39;text&＃39; id=&＃39;ip&＃39; name=&＃39;ip&＃39;><br><span></span></p> <p>端口号:<input type=&＃39;text&＃39; id=&＃39;port&＃39; name=&＃39;port&＃39;><br><span></span><br></p> <input type=&＃39;button&＃39; value=&＃39;提交&＃39; onclick=&＃39;return SubmitForm();&＃39;> <input type=&＃39;button&＃39; value=&＃39;取消&＃39; onclick=&＃39;HideModal();&＃39;> </form> </div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> $(function () { $(&＃39;tr:even&＃39;).css(&＃39;background-color&＃39;&＃39;#f5f5f5&＃39;); }); function Edit(ths) { $(&＃39;.shade.modal&＃39;).removeClass(&＃39;hide&＃39;); prevList = $(ths).prevAll(); prevList.each(function () { var text = $(this).text(); var target = $(this).attr(&＃39;target&＃39;); $(&＃39;#&＃39;+target).val(text); }); } function HideModal() { $(&＃39;.shade.modal&＃39;).addClass(&＃39;hide&＃39;); $(&＃39;.modal&＃39;).find(&＃39;input[type=&＃39;text&＃39;]&＃39;).val(&＃39;&＃39;); Addd = false; } function SubmitForm() { var flag = Detection(); try { if (Addd && flag){ $(&＃39;tbody&＃39;).append($(&＃39;tr&＃39;).last().clone()); $(&＃39;.modal&＃39;).find(&＃39;input[type=&＃39;text&＃39;]&＃39;).each(function () { var value = $(this).val(); var name = $(this).attr(&＃39;name&＃39;); ($(&＃39;tr&＃39;).last().children()).each(function () { if ($(this).attr(&＃39;target&＃39;) == name){ $(this).text(value); return } } )}); Addd = false; HideModal(); return false; } }catch (e){} if (flag){ $(&＃39;.modal&＃39;).find(&＃39;input[type=&＃39;text&＃39;]&＃39;).each(function () { var value = $(this).val(); var name = $(this).attr(&＃39;name&＃39;); $(prevList).each(function () { if ($(this).attr(&＃39;target&＃39;) == name){ $(this).text(value); return } } )}); $(&＃39;.modal.shade&＃39;).addClass(&＃39;hide&＃39;); HideModal(); } return flag; } function Detection() { var flag = true; $(&＃39;.modal&＃39;).find(&＃39;input[type=&＃39;text&＃39;]&＃39;).each(function () { var value = $(this).val(); if (value.length == 0){ $(this).next().next().css(&＃39;visibility&＃39;&＃39;visible&＃39;).text(&＃39;亲，不能为空&＃39;); flag = false; return false; }else { $(this).next().next().css(&＃39;visibility&＃39;&＃39;hidden&＃39;).text(&＃39;&＃39;); } if ($(this).attr(&＃39;name&＃39;) == &＃39;host&＃39;){ var r = /(.com)$/; if (r.test(value) == false){ $(this).next().next().css(&＃39;visibility&＃39;&＃39;visible&＃39;).text(&＃39;主机名必须以.com末了&＃39;); flag = false; return false; } }else if ($(this).attr(&＃39;name&＃39;) == &＃39;ip&＃39;){ var r2 = /^(([0-2]?[0-9][0-9]?).){3}([0-2]?[0-9][0-9]?)$/; if (r2.test(value) == false){ $(this).next().next().css(&＃39;visibility&＃39;&＃39;visible&＃39;).text(&＃39;ip 地址名堂有误&＃39;); flag = false; return false; } }else if ($(this).attr(&＃39;name&＃39;) == &＃39;port&＃39;){ var r3 = /^([0-9]{15})$/; if ((r3.test(value) == false) || (value > 65535)){ $(this).next().next().css(&＃39;visibility&＃39;&＃39;visible&＃39;).text(&＃39;端口必须为0-65535&＃39;); flag = false; return false; } }else { $(this).next().next().css(&＃39;visibility&＃39;&＃39;hidden&＃39;).text(&＃39;&＃39;); } }); return flag; } function Add() { Addd = true; $(&＃39;.shade.modal&＃39;).removeClass(&＃39;hide&＃39;); } </script></body></html>

<!DOCTYPE html><html lang=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .out{ width: 730px; height: 454px; margin: 50px auto; position: relative; } .out .img li{ position: absolute; left: 0; top: 0; } .out .num{ position: absolute; left:0; bottom: 20px; text-align: center; font-size: 0; width: 100%; } .out .btn{ position: absolute; top:50%; margin-top: -30px; width: 30px; height: 60px; background-color: aliceblue; color: black; text-align: center; line-height: 60px; font-size: 40px; display: none; } .out .num li{ width: 20px; height: 20px; background-color: black; color: #fff; text-align: center; line-height: 20px; border-radius: 60%; display: inline; font-size: 18px; margin: 0 10px; cursor: pointer; } .out .num li.active{ background-color: red; } .out .left{ left: 0; } .out .right{ right: 0; } .out:hover .btn{ display: block; color: white; font-weight: 900; background-color: black; opacity: 0.8; cursor: pointer; } .out img { height: 100%; width: 100%; } </style></head><body> <div class=&＃39;out&＃39;> <ul class=&＃39;img&＃39;> <li><a href=&＃39;#&＃39;><img src=http://www.it165.net/pro/html/201607/&＃39;images/1.jpg&＃39; alt=&＃39;&＃39;></a></li> <li><a href=&＃39;#&＃39;><img src=http://www.it165.net/pro/html/201607/&＃39;images/2.jpg&＃39; alt=&＃39;&＃39;></a></li> <li><a href=&＃39;#&＃39;><img src=http://www.it165.net/pro/html/201607/&＃39;images/3.jpg&＃39; alt=&＃39;&＃39;></a></li> <li><a href=&＃39;#&＃39;><img src=http://www.it165.net/pro/html/201607/&＃39;images/4.jpg&＃39; alt=&＃39;&＃39;></a></li> <li><a href=&＃39;#&＃39;><img src=http://www.it165.net/pro/html/201607/&＃39;images/5.jpg&＃39; alt=&＃39;&＃39;></a></li> </ul> <ul class=&＃39;num&＃39;> <!--<li class=&＃39;active&＃39;>1</li>--> <!--<li>2</li>--> <!--<li>3</li>--> <!--<li>4</li>--> <!--<li>5</li>--> </ul> <div class=&＃39;left btn&＃39;><</div> <div class=&＃39;right btn&＃39;>></div> </div> <script src=&＃39;../../jquery-1.12.4.js&＃39;></script> <script> $(function(){ var size=$(&＃39;.img li&＃39;).size(); for (var i= 1;i<=size;i++){ var li=&＃39;<li>&＃39;+i+&＃39;</li>&＃39;; $(&＃39;.num&＃39;).append(li); } $(&＃39;.num li&＃39;).eq(0).addClass(&＃39;active&＃39;); $(&＃39;.num li&＃39;).mouseover(function(){ $(this).addClass(&＃39;active&＃39;).siblings().removeClass(&＃39;active&＃39;); var index=$(this).index(); i=index; $(&＃39;.img li&＃39;).eq(index).fadeIn(1000).siblings().fadeOut(1000); }); i=0; var t=setInterval(move1500); function move(){ i++; if(i==size){ i=0; } $(&＃39;.num li&＃39;).eq(i).addClass(&＃39;active&＃39;).siblings().removeClass(&＃39;active&＃39;); $(&＃39;.img li&＃39;).eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } function moveL(){ i--; if(i==-1){ i=size-1; } $(&＃39;.num li&＃39;).eq(i).addClass(&＃39;active&＃39;).siblings().removeClass(&＃39;