JQuery
JQuery:
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
基本选择器：
$('.class') 根据给定的css类名匹配元素。 相当于document.getElementsByClassName("class")
$('#id') 根据id获取
$('elenment') 根据标签名称获取div、p、span
$('elenment,.class,#id,div') 将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
组合择器：
$("form input") 在给定的祖先元素下匹配所有的后代元素 -获取form中的所有input标签
$("parent > child") 在给定的父元素下匹配所有的子元素
$("prev + next") 匹配所有紧接在 prev 元素后的 next 元素
- prev :任何有效选择器 - next 紧接着第一个选择器的有效选择器
$("prev ~ siblings") 同一层级下，匹配prev元素[ 之后 ]的所有siblings元素
基本筛选器：
在写原生JavaScript的时候，是通过 document.getElementsByClassName(class) 的方法来获取相同class的集合，如果想获去其中的元素直接通过[index]就可以直接获取；
jQuery获取class的时候是通过$('class')，但是如果我们也是像JavaScript那样 [index] 通过下标来获取的话，就会将jQuery 的元素转换成JavaScript的元素了，而相应的更改就要使用原生JavaScript的操作了，为了更方便获取元素，jQuery为我们提供了筛选器；
:first -匹配所匹配到的第一个元素 :last -匹配所匹配到的最后一个元素 :even -匹配index(从0开始)为偶数的元素，相当于获取第N(N为奇数:1、3、5、7...)个元素。 :odd -匹配index(从0开始)为偶奇数的元素，相当于获取第N(N为偶数：2、4、6...)个元素。 :eq(index) -匹配一个给定索引值的元素 index：从零开始计数 :gt(index) -匹配所有大于给定索引值的元素 :lt(index) -匹配所有小于给定索引值的元素 :header -匹配如 h1, h2, h3之类的标题元素 $(":header").css("background", "#EEE"); :animated -匹配所有正在执行动画效果的元素 :contains(text) -匹配包含给定文本的元素 匹配所有包含'alex'的div元素：$("div:contains('alex')") 注意：如果div :contains【div后有空格】就是匹配div下第一层级的text的元素 :empty -匹配所有不包含子元素或者文本的空元素(有空格或者回车都不可以) :parent -匹配含有子元素或者文本的元素 :has -匹配含有选择器所匹配的元素的元素 $("div:has(p)").addClass("test"); 给所有包含 p 元素的 div 元素添加一个 text 类 :hidden -匹配所有不可见元素，或者type为hidden的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery</title> <script src="jquery-3.2.1.js"></script> <script> window.onload =function () { var li = $('div,.myClass:first,#myID'); li.css('color','red'); //将除了class = myclass 的第二个标签字体渲染为红色 // 如果是用原生JavaScript，还需要进行for循环遍历 for(var i =0;i<li.length;i++){ // li[i]的操作会将jQuery对象转换成JavaScript对象 li[i].style.color = 'blue' } } </script> </head> <body> <div>DIV <p class="myClass">class kkk</p> </div> <table> </table> <p class="myClass">class first</p> <p class="myClass">class second</p> <span id="myID">ID</span> </body> </html>
属性：
[attribute] -匹配包含给定属性的元素 [attribute=value] -匹配所有匹配属性等于value的元素 [attribute!=value] -不等于 [attribute^=value] -以value开头 [attribute$=value] -以value结尾 [attribute*=value] -包含value [attrSel1][attrSel2][attrSelN] -复合属性选择器，需要同时满足多个条件时使用。
表单：
<form> <input type="text" /> -文本 <input type="checkbox" /> -复选框 <input type="radio" /> -单选按钮 <input type="image" /> -图片 <input type="file" /> -上传文件 <input type="submit" /> -提交按钮 <input type="reset" /> -重置按钮 <input type="password" /> -密码输入框 <input type="button" /> -按钮 <select> -选择 <option></option> </select> <textarea></textarea> -多行文本 <button></button> -按钮 </form> 注：以下匹配只适用于表单 :input 匹配所有form下的input的元素 :text 匹配所有type = text的元素 input:checked input中所有选择checked的元素
过滤筛选：
eq(index/-index) -类似python中list的切片，匹配所获取的jQuery列表中的元素index:从前往后(0起始)，-index：从后向前(-1起始) first() -匹配获取jQuery列表中的第一个元素并返回 last() -匹配获取jQuery列表中的最后一个元素并返回 hasClass(class) -判断是否拥有该class，返回true/false filter(expr|obj|ele|fn) -筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 HTML: <p>Hello</p> <p>Hello Again</p> <p class="selected">And Again</p> jQuery： 获取第一个P标签和class = "selected"的P标签 $("p").filter(':first,.select'); 有点类似于sqlalchemy中的filter is(expr|obj|ele|fn) -根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true，否则返回false map(callback) -将一组元素转换成其他数组（不论是否是元素数组） has(expr|ele) -匹配所有包含的元素。 not(expr|ele|fn) -从匹配元素的集合中删除与指定表达式匹配的元素。 $("p").not("#select") 删除所有带有id = "select"的标签并返回删除后的结果 slice(start,[end]) -选取一个匹配的子集
查找：
查找： children([expr]) -取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合；只考虑子元素而不考虑所有后代元素。 $('div').children('.selected') find(e|o|e) -搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法；匹配所有。 siblings([expr]) -搜索所有兄弟元素。 closest(e|o|e) -closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。 -常用于事件委托 next([expr]) -取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 -<p>1</p> <p>2</p> <div>3</div> <p>4</p> <p>5</p> $("p").next() 会得到 2、3、5 、6 查找所有P标签，获取P每个P紧邻P标签后的元素。 nextAll([expr]) -查找当前元素之后所有的同辈元素。 nextUntil([e|e][,f]) -查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。类似于切片操作，终止位置为匹配到的元素(不包含匹配到的元素)。 offsetParent() -向上查找父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。 parent([expr]) -查找父元素，取得一个包含着所有匹配元素的唯一父元素的元素集合。 parents([expr]) -取得一个包含着所有匹配元素的祖先元素的元素集合。可以通过一个可选的表达式进行筛选。 parentsUntil([e|e][,f]) -与nextUntil类似，查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。(方向为向上查找) prev([expr]) -取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。与next一样，方向相反、 prevall([expr]) -查找当前元素之前所有的同辈元素 prevUntil([e|e][,f]) -查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止(不包含匹配到的元素)。
jQuery版实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<script>
window.onload =function () {
console.log($('p').parents());
$('.item').addClass('hidden');
$('.title').click(
function () {
// $(this).siblings().removeClass('hidden');
// $(this).parent().siblings().children('.item').addClass('hidden');
// 链式操作
$(this).next().removeClass("hidden").parent().siblings().children(".item").addClass("hidden");
}
)
}
</script>
</head>
<style>
.menu{
background-color: darkseagreen;
float: left;
width:20%;
height: 500px;
text-align: left;
}
.head{
background-color: yellow;
}
.title{
color: white;
background-color: aquamarine;
text-align: center;
}
.hidden{
display: none;
}
</style>
<body>
</body>
<div class="menu">
<div class="head">
<div class="title">第一排</div>
<div class="item">
<div>111</div>
<div>222</div>
</div>
</div>
<div class="head">
<div class="title">第二排</div>
<div class="item">
<div>33</div>
<div>444</div>
</div>
</div>
<div class="head">
<div class="title">第三排</div>
<div class="item">
<div>555</div>
<div>666</div>
</div>
</div>
</div>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script>
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
<li xxx="c2" onclick="tab(this);">菜单二</li>
<li xxx="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
</html>
属性：
属性 attr(name|pro|key,val|fn) 设置或返回被选元素的属性值。（一个参数：取值；两个参数：赋值） removeAttr(name) 删除属性 prop(n|p|k,v|f) 获取在匹配的元素集中的第一个元素的属性值。 removeProp(name) 用来删除由.prop()方法设置的属性集 attr：操作自定义属性 attr操作固有属性的时候，如果之前没有定义，则返回undefined，而prop则不同 prop：操作固有属性
CSS 类 addClass(class|fn) 添加class removeClass([class|fn]) 删除class toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。 HTML代码/文本/值 html([val|fn]) 等于innerHTML text([val|fn]) 等同于innerText val([val|fn|arr]) 获得匹配元素的当前值，针对的是固有属性value
jQuery中的循环：erch
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
erch和switch做复选框全选、反选操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery_Dir/jquery-3.2.1.js"></script>>
<style>
</style>
<script>
window.onload = function () {
$(':button').click(function () {
console.log($(this));
switch ($(this).text()) {
case '全选':
console.log('全选');
$(':checkbox').prop('checked',true);
break;
case '取消':
console.log('取消');
$(':checkbox').prop('checked',false);
break;
case '反选':
console.log('反选');
$.each($(':checkbox'),function () {
$(this).prop('checked',!$(this).prop('checked'));
})
break;
}
})
}
</script>
</head>
<body>
<table border="3px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>2111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2222</td>
<td>33333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>555555</td>
<td>64444</td>
</tr>
</table>
<div>
<button>全选</button>
<button>取消</button>
<button>反选</button>
</div>
</body>
</html>
动画效果：
基本 show([s,[e],[fn]]) -显示隐藏的匹配元素。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。 hide([s,[e],[fn]]) -隐藏显示的元素 toggle([s],[e],[fn]) -显示/隐藏 滑动 slideDown([s],[e],[fn]) -向上滑动隐藏 slideUp([s,[e],[fn]]) -向下滑动显示 slideToggle([s],[e],[fn]) -滑动显示/隐藏 淡入淡出 fadeIn([s],[e],[fn]) -淡入 fadeOut([s],[e],[fn]) -淡出 fadeTo([[s],o,[e],[fn]]) -变透明 fadeToggle([s,[e],[fn]]) -淡入/淡出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>效果</title> <script src="jQuery_Dir/jquery-3.2.1.js"></script> <style> #module{ height: 100px; background-color: #2459a2; color: white; text-align: center; line-height: 100px; vertical-align: middle; font-size: 40px; } .backgroudM{ height: 100px; background-color: darkseagreen; } </style> <script> window.onload = function () { $(':button').click(function () { console.log($(this).text()); switch ($(this).text()) { case '显示': console.log('显示'); $("#module").show(); break; case '隐藏': console.log('隐藏'); $("#module").hide(); break; case '显示/隐藏': console.log('显示/隐藏'); $("#module").toggle(); break; case '向上': console.log('向上'); $("#module").slideUp(); break; case '向下': console.log('向下'); $("#module").slideDown(); break; case '向上/向下': console.log('向上/向下'); $("#module").slideToggle(); break; case '淡入': console.log('淡入'); $("#module").fadeIn(); break; case '淡出': console.log('淡出'); $("#module").fadeOut(); break; case '淡入/淡出': console.log('淡入/淡出'); $("#module").fadeToggle(); break; case '透明': $("#module").fadeTo(200,0.5); break; case '不透明': $("#module").fadeTo(200,1,function () { 在效果执行结束后，可以绑定函数，会在action执行完毕之后，回调该函数。 alert('已恢复'); }); break; } }) } </script> </head> <body> <div class="backgroudM"><div id="module">Meters/Bonwe</div></div> <div> <button>显示</button> <button>隐藏</button> <button>显示/隐藏</button> <button>向上</button> <button>向下</button> <button>向上/向下</button> <button>淡入</button> <button>淡出</button> <button>淡入/淡出</button> <button>透明</button> <button>不透明</button> </div> </body> </html>
文档处理：
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); 在P标签中插入新元素 $("").appendTo(content) ----->$("p").appendTo("div"); 将P标签插入div内部 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); 在P标签的开始处添加<b>Hello</b> $("").prependTo(content) ----->$("p").prependTo("#foo"); 把P标签添加到id为foo的标签中区 //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天剑</title>
<style>
</style>
<script src="jQuery_Dir/jquery-3.2.1.js"></script>
<script>
window.onload = function(){
// 需要注意的是在使用带有自动翻译的浏览器时候(谷歌浏览器)，需要关闭翻译后再使用
$('[value ="+"]').click(function () {
var clone_obj = $(this).parent().clone();
clone_obj.children(':button').val('-').click(
function () {
$(this).parent().remove()
}
);
$(this).parent().after(clone_obj)
// $(this).parent().after($item_obj);
})
}
</script>
</head>
<body>
<div class="boxx">
<div class="item">
<input type="button" value="+"/>
<input type="text"></div>
</div>
</body>
</html>
Css样式：
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates]) 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。（当前网页的左上角，就是元素的坐标）
$("p").offset({ top: 10, left: 30 }); -赋值
$("").position() 获取匹配元素相对父元素(带有定位的position)的偏移
$("").scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
$("").scrollLeft([val]) 获取匹配元素相对滚动条左边的偏移。
尺寸
$("").height([val|fn]) 取得匹配元素当前计算的高度值（px）。
$("").width([val|fn]) 取得匹配元素当前计算的宽度(px)。
$("").innerHeight() 取得当前匹配元素文本height+padding的的高度
$("").innerWidth() 取得当前匹配元素文本height+padding的的宽度
$("").outerHeight([soptions]) 取得当前匹配元素文本height+padding+border的高度 ，默认为false，当为true时：height+padding.top+padding+bottom+border+margin
$("").outerWidth([options]) 取得当前匹配元素文本height+padding+border的高度 ，默认为false，当为true时：width+padding.left+padding+right+border+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果</title>
<script src="jQuery_Dir/jquery-3.2.1.js"></script>
<style>
*{
margin: 0px;
}
#module{
height: 100px;
background-color: #2459a2;
color: white;
text-align: center;
line-height: 100px;
vertical-align: middle;
font-size: 40px;
position: relative;
}
.backgroudM{
height: 100px;
background-color: darkseagreen;
}
#offset_obj{
height: 100px;
background-color: lightsteelblue;
}
#back_Top{
background-color:'red';
font-size: 10px;
position: fixed;
right: 10px;
bottom: 10px;
display: none;
}
</style>
<script>
window.onload = function () {
$(':button').click(function () {
console.log($(this).text());
switch ($(this).text()) {
case '返回顶部':
$(window).scrollTop(0)
}
})
}
$(window).scroll(function () {
if ($(window).scrollTop()<100){
$('#back_Top').hide()
}
else{
$('#back_Top').show()
}
})
</script>
</head>
<body>
<div class="backgroudM"><div id="module">Meters/Bonwe</div></div>
<div class="backgroudM"></div>
<div class="backgroudM"></div>
<div class="backgroudM"></div>
<div class="backgroudM"></div>
<div class="backgroudM"></div>
<div class="backgroudM"></div>
<div class="backgroudM"></div>
<div>
<button id="back_Top">返回顶部</button>
</div>
</body>
</html>
事件绑定：
页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){}) -----------> $(function(){}) 事件处理 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如： // $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定 // click事件； [selector]参数的好处: 好处在于.on方法为动态添加的元素也能绑上指定事件；如： 1、$('ul li').bind('click', function(){console.log('click');}) 2、$('ul li').on('click', function(){console.log('click');}) jQuery两种绑定方式的区别： 1：给绑定的元素添加事件，缺点：后添加的匹配元素不会绑定事件。 2：给匹配的元素添加事件，但是也可以委托给所匹配元素内的标签绑定事件，且后添加的元素也添加绑定事件 li：$('ul').append('<li>js new li<li>')；如果ul是[1]绑定则不会添加事件,[2]这个新生成的li被绑上了click事件但是需要小小的修改一下： $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定. [data]参数的调用: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler) off(eve,[sel],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。 one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。也可以将匹配到的元素内容作为数据传递到fn中 例： 当所有段落被第一次点击的时候，显示所有其文本。 $("p").one("click", function(){ alert( $(this).text() ); }); 事件切换： hover([over,]out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数
轮播图实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(window).ready(function () {
console.log($('li:first').height(),$('li:first').width());
var index=0;
//轮播
function move_to() {
index++;
if(index>=$('.item').length){
index=0;
}
console.log(index)
$('.item').eq(index).fadeIn(200).siblings().fadeOut(400);
$('.menuL').eq(index).addClass('bg_red').siblings().removeClass('bg_red');
}
//开启轮播
var ID = setInterval(move_to,2000)
//鼠标悬停到图画上的时候停止轮播
$('.image').hover(function () {
clearInterval(ID)
ID=null;
},
function () {
ID = setInterval(move_to,2000)
}
)
//当鼠标浮动到menu上的时候更改图片
$('.menuL').mouseover(function () {
index = $(this).index()
$(this).addClass('bg_red').siblings().removeClass('bg_red')
$('.item').eq(index).fadeIn(200).siblings().fadeOut(200)
})
//左右button回调
$('.button_move').click(function () {
switch($(this).text()){
case ">":
console.log('向右');
index++;
if(index>=$('.item').length){
index=0
}
$('.item').eq(index).fadeIn(200).siblings().fadeOut(200);
$('.menuL').eq(index).addClass('bg_red').siblings().removeClass('bg_red');
clearInterval(ID)
ID = setInterval(move_to,2000)
break;
case "<":
console.log('向左');
index--;
if(index<0){
index=$('.item').length-1
}
$('.item').eq(index).fadeIn(200).siblings().fadeOut(200);
$('.menuL').eq(index).addClass('bg_red').siblings().removeClass('bg_red');
clearInterval(ID)
ID = setInterval(move_to,2000)
break;
}
})
})
</script>
</head>
<body>
<div class="slideshow">
<ul class="image">
<li class="item" style="display: block"><a href="#"><img src="../image_data/1.jpg" alt=""/></a></li>
<li class="item"><a href="#"><img src="../image_data/2.jpg" alt=""/></a></li>
<li class="item"><a href="#"><img src="../image_data/3.jpg" alt=""/></a></li>
<li class="item"><a href="#"><img src="../image_data/4.jpg" alt=""/></a></li>
</ul>
<div class="left_button button_move"><</div>
<div class="right_button button_move">></div>
<div>
</div>
<ul class="menu_list">
<li class="menuL bg_red">1</li>
<li class="menuL">2</li>
<li class="menuL">3</li>
<li class="menuL">4</li>
</ul>
</div>
</body>
<style>
*{
margin: 0px;
}
.slideshow{
position: relative;
height: 710px;
width: 1400px;
border: red 3px solid;
}
img{
height: 710px;
width: 1400px;
}
ul{
list-style: none;
}
.image .item{
position: absolute;
top:0;
left:0;
display: none;
}
.menuL{
display: inline-block;
border-radius:1em 1em 1em 1em;
background-color: mediumturquoise;
color: white;
opacity:0.7;
text-align: center;
line-height: 20px;
height: 20px;
width: 20px;
}
.menu_list{
position: absolute;
bottom: 20px;
}
.button_move{
height:70px;
width: 50px;
background-color: darkgrey;
opacity: 0.5;
position: absolute;
top: 50%;
margin-top: -35px;
text-align: center;
line-height: 70px;
font-size: 40px;
color: white;
}
.left_button{
left: 0;
}
.right_button{
right: 0;
}
.bg_red{
background-color: darkorange;
}
</style>
</html>
淘宝图片放大镜：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding:0;
}
.outer{
position: relative;
border:solid blue 3px;
}
.outer .small_Box{
border: 2px rebeccapurple dashed;
height: 400px;
width: 400px;
}
.outer .small_Box .float{
position: absolute;
height:200px;
width: 200px;
background-color: azure;
opacity:0.4;
display: none;
}
.outer .big_Box{
overflow: hidden;
display: none;
position: absolute;
top: 0px;
left: 404px;
width: 400px;
height: 400px;
border:chartreuse 2px solid;
}
</style>
<script src="jquery-3.2.1.js"></script>
<script>
$("window").ready(function () {
//当鼠标悬浮到此区域的时候
$(".outer .small_Box").mouseover(function (event) {
$('.outer .float').show()
$('.outer .big_Box').show()
// //悬浮框的高和宽
// f_height_half = $(".outer .small_Box .float").height()/2;
// f_width_half = $(".outer .small_Box .float").width()/2;
// //获取鼠标的位置，设置悬浮框的位置
// mouse_Pos = event || window.event;
// $(".outer .small_Box .float").css("top",mouse_Pos.clientX+"px")
// $(".outer .small_Box .float").css("left",mouse_Pos.clientY+"px")
})
//当鼠标在此区域滑动的时候
$(".outer .small_Box").mousemove(function (event) {
f_height_half = $(".outer .small_Box .float").height()/2;
f_width_half = $(".outer .small_Box .float").width()/2;
//获取鼠标的位置，设置悬浮框的位置
mouse_Pos = event || window.event;
$(".outer .small_Box .float").css("top",mouse_Pos.clientY-f_height_half)
$(".outer .small_Box .float").css("left",mouse_Pos.clientX-f_width_half)
//float层不能超出范围
var f_top =$('.outer .float').offset().top
var f_left=$('.outer .float').offset().left
f_height =$('.outer .float').height()
f_width =$('.outer .float').width()
console.log(f_top,f_left);
if(f_top<0){
$('.outer .float').css("top",0)
}
if(f_left<0){
$('.outer .float').css("left",0)
}
if(f_left>200){
$('.outer .float').css("left",200)
}
if(f_top>200){
$('.outer .float').css("top",200)
}
//big-box移动，按比例跟随small-box移动而移动
f_Pos = $(".outer .float").offset()
$(".outer .big_Box .bigImg").offset({ top: f_Pos.top*-2+12, left: 414+f_Pos.left*-2 });//多加的是border的宽度和第一张图片的宽度
})
//单鼠标离开的时候
$(".outer .small_Box").mouseleave(function (event) {
$('.outer .float').hide()
$('.outer .big_Box').hide()
})
})
</script>
</head>
<body>
<div class="outer">
<div class="small_Box">
<div class="float"></div>
<img src="small.jpg" alt="#">
</div>
<div class="big_Box">
<img class="bigImg" src="big.jpg" alt="#">
</div>
</div>
</body>
</html>
