一、动画
5.自定义动画
animate(): 用于实现自定义动画
调用方式：$(selector).animate({parmas},speed,callback)
parmas:定义动画的css属性，以key：value的方式传值
speed：动画持续的时间 （毫秒)
callback：动画执行完毕之后需要执行的操作
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ width: 100px; height: 100px; background-color: cyan; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="box"></div> <button>执行动画</button> <script> $("button").click(function(){ //1.设置单个的css属性 /*$("#box").animate({width:'500px'},2000,function(){ alert("hello"); })*/ //2.设置多个css属性 $("#box").animate({ width:'500px', height:'1000px', opacity:'0.5' },2000,function(){ alert("hello"); }) }) </script> </body> </html>
6.案例：萤火虫
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ padding: 0px; margin: 0px; } body{ background-image: url(img/bg.jpg); } #container{ width: 100%; height: 1000px; } img{ width: 40px; height: 40px; /*相对于父标签*/ position: absolute; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="container"></div> <script> $(function(){ //需求：每隔2秒，则在当前窗口中出现一个萤火虫的image，实现动画效果 //开启间歇性定时器 setInterval(function(){ //创建节点 var $fireworm = $("<img src='img/萤火虫.jpg'/>"); //将节点添加给div节点【在元素的内部插入节点】 $("#container").append($fireworm); //先获取当前窗口的大小 var dWidth = $("#container").width(); var dHeight = $("#container").height(); //获取随机数【让萤火虫出现的位置是随机的,但是必须要限定在当前窗口中】 var fLeft = Math.floor(Math.random() * dWidth) + "px"; var fTop = Math.floor(Math.random() * dHeight) + "px"; //设置img出现的位置 $fireworm.css({ left:fLeft, top:fTop }) //萤火虫实现动画效果 function firewormFly(){ var mLeft = Math.floor(Math.random() * dWidth) + "px"; var mTop = Math.floor(Math.random() * dHeight) + "px"; $fireworm.animate({ left:mLeft, top:mTop },4000,function(){ //当一次动画执行完毕之后，继续执行动画 firewormFly(); }); } firewormFly(); },2000); }) </script> </body> </html>
二、事件
1.页面加载响应事件
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <script> //1. $(document).ready(function(){ }) //2.当$()不带参数的时候默认为document对象 $().ready(function(){ }) //3. $(function(){ }) /*$( *【面试题：document).ready和window.onload事件之间的区别】 * 1.在一个页面中可以无限次的使用$(document).ready，调用的顺序是从上往下依次执行，但是 * window.onload只能被执行一次，如果出现多次，则后面出现的会覆盖掉前面出现的 * 2.当一个文档完全下载到浏览器的时候【包括所有关联的文件，比如图片，视频，音频等】 * 才会执行window.onload,而$(document).ready只有当整个页面加载到浏览器就会执行， * 并不关心关联的文件是否加载完成 * 3.window.onload事件更加靠谱,$(document).ready效率较高 */ //注意：当需要将整个页面以及关联的文件加载到浏览器的时候，此时使用$(window).load(callback) //弥补$(document).ready的缺点 $(window).load(function(){ }) </script> </body> </html>
2.事件绑定
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <button id="btn">添加</button> <div> <p>aaaaaa</p> <p>bbbbbb</p> <p>ccccc</p> <p>dddddd</p> <p>eeeeee</p> </div> <script> $(function(){ //click() bind() delegate() on() //1.bind() /* * bind(type,data,fn) * type:事件类型，click，dblclick,mouseout等 * data；可选参数，作为event.data属性值传递，一般不用 * fn：事件绑定的函数 */ //需求：点击每个p标签，获取p标签上的文本内容 /*$("div p").bind("click",function(){ alert($(this).text()); }) */ //需求：点击按钮的时候，给div添加一个p标签 $("#btn").bind("click",function(){ //创建一个p标签对象 var $p = $("<p>ffffff</p>"); $("div").append($p); }) /* * bind存在的问题： * 1.使用隐式迭代，如果匹配到的元素在很多的情况下，对于大量的元素而言，绑定事件的时候，会影响性能 * 2.对于尚未存在的元素，如果新添加进来，则没有相应的事件 */ //2.delegate() /* * 代理：找到一个具体的对象帮忙完成某件事情 * 作用：可以解决上面bind的缺点 * * 代理委托：利用冒泡模式，通过给父标签添加事件，从而子标签也可以响应事件 * 适用场景：如果所有的子元素都要实现相同的效果，就可以使用delegate * 局限性：使用的事件必须是冒泡类型的事件 * 【click，mousedown,mouseup,keydown,keyup,keypress】 * * * 代理.delegate(委托，type,fn) */ //需求：点击每个p标签，获取p标签上的文本内容 //实现思路：将事件绑定给父标签div，p作为委托，div作为代理 $("div").delegate("p","click",function(){ alert($(this).text()); }) /* * delegate存在的问题：绑定相对容易，但是调用的时候会出现问题，就是：当节点树很深的时候 * 则采用冒泡的方式响应事件也会影响性能【遍历节点树】 */ //3.on() /* * 结合bind和delegate的优点 * * 代理.on(type，委托，fn) */ $("div").on("click","p",function(){ alert($(this).text()); }) //4.直接采用事件的名称作为函数名 /* * 事件名称(fn) */ $("#btn").click(function(){ alert("hello"); }) /* * 总结： * 1.选择器匹配到的元素较多的时候，尽量不要使用bind * 2.一般情况下，bind和click使用较多 * 3.需要动态添加元素，使用delegate和on * 4.如果节点树或者dom树较深，最好不要使用delegete */ }) </script> </body> </html>
3.解除绑定
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <button id="btn">添加</button> <div> <p>aaaaaa</p> <p>bbbbbb</p> <p>ccccc</p> <p>dddddd</p> <p>eeeeee</p> </div> <!--js中的事件解绑--> <script> window.onload = function(){ var btn = document.getElementById("btn"); //1.事件属性 //绑定 /*btn.onclick = function(){ } //解绑 btn.onclick = null;*/ //2.添加监听 var func = function(){ } btn.addEventListener("click",func,false); //解绑 btn.removeEventListener("click",func,false); } </script> <!--jq中的事件的解绑--> <script> $(function(){ //1.unbind() /* * bind() * unbind(type) */ $("#btn").bind("click",function(){ //创建一个p标签对象 var $p = $("<p>ffffff</p>"); $("div").append($p); }) //注意：需要和绑定的时间类型保持一致 $("#btn").unbind("click"); //2. /* * delegate(委托，type，fn) * undelegate(委托，type) */ $("div").delegate("p","click",function(){ alert($(this).text()); }) $("div").undelegate("p","click"); //3.off() /* * on(type,委托，fn) * off(type,委托) */ $("div").on("click","p",function(){ alert($(this).text()); }) $("div").off("click","p"); }) </script> </body> </html>
4.绑定一次性事件
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <button id="btn">点击</button> <script> $(function(){ /* * one(type,fn) * * 作用：当点击按钮的时候只触发一次时间，当第二次点击的时候将失效 * */ $("#btn").one("click",function(){ alert("hello"); }) }) </script> </body> </html>
5.模仿鼠标悬停事件
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{width: 100px; height: 100px; background-color: orange;} </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div></div> <script> $(function(){ /* * hover(over,out) * 作用：模仿鼠标移动到一个对象上面的时候，触发某个事件，当鼠标移出该对象的时候，又触发另外一个事件 * * over：用于指定鼠标移动到指定标签上方的时候需要执行的操作 * out：用于指定鼠标移出指定标签上方的时候需要执行的操作 * */ $("div").hover(function(){ //需求：当鼠标移动到div上方的时候，背景颜色改为blue $("div").css("background-color","blue"); },function(){ //需求：当鼠标移出div的时候，背景颜色改为orange $("div").css("background-color","orange"); }); }) </script> </body> </html>
6.事件对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <button id="btn">点击</button> <script> $(function(){ $("#btn").bind("click",function(event){ document.write(event); document.write("<br />"); //获取事件的类型 document.write(event.type); document.write("<br />"); //获取触发事件的元素 document.write(event.target); document.write("<br />"); //获取事件关联的节点 document.write(event.relatedTarget); document.write("<br />"); //获取光标在页面中的横纵坐标 //注意：若当前页面中有滚动条，则要加上滚动条的宽度和高度 document.write(event.pageX,event.pageY); }) }) </script> </body> </html>
7.案例
7.1Swipe实现微信场景页
js文件
//Swiper:是纯js打造的一个滑动特效插件，可以面向手机或者平板电脑 //能实现触屏滑动，多图切换【微信场景页，广告轮播图】 //定义一个变量，记录当前的页码 var currentPage = 0; $(function(){ //1.获取窗口的大小 var w_width = window.innerWidth; var w_height = window.innerHeight; //2.设置容器的大小 var container = $("#container"); container.width(w_width); container.height(w_height * 4); //3.设置每一页的大小 var divPage = $(".page"); divPage.width(w_width); divPage.height(w_height); //4.第一页 //背景有一个淡入的效果，人有一个飞入的效果 $(".page1_building").fadeIn(1000,function(){ $(".page1_person").animate({"left":"15%","width":"70%"},1500); }) //5.向上滑动翻页：Swape插件的使用 container.swipe({ /* * event:事件对象 * direction：滑动的方向 * distance：滑动的距离 * duration：持续的时间 * fingerCount：滑动需要的手指个数 */ swipe:function(event,direction,distance,duration,fingerCount){ if(direction == "up"){ //向上滑动 currentPage++; } else if(direction == "down"){ //向下滑动 currentPage--; } //临界值 if(currentPage > 3){ currentPage = 3; } if(currentPage < 0){ currentPage = 0; } //给整体添加动画 //注意：容器向上移动一个页面，距离top的值为-（一个页面的高度） container.animate({"top":currentPage * (-w_height) + "px"},400,function(){ //第二页 if(currentPage == 1){ //背景图淡入 $(".page2_back").fadeIn(1000,function(){
最低0.47元/天 解锁文章
1437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
