鼠标滚轮事件之支付宝案例
来源：互联网 发布：mac vpn推荐 编辑：程序博客网 时间：2024/04/30 04:59
鼠标滚轮事件：onmousewheel
js e对象参数里
jQuery e的originalEvent里
主要实现效果：仿照支付宝效果，鼠标滚轮事件，当鼠标向下滚动时，整个页面元素依次以浏览器为单位向上移动，而当鼠标向下滚动时，整个页面元素又以浏览器为单位向下滚动。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ width: 100%; height: 100%; object-fit:cover; position:absolute; overflow:hidden; } *{ padding:0px; margin:0px; } ul{ padding:0px; margin:0px; width:100%; height:100%; } li{ position:relative; list-style:none; height:100%; padding:0; overflow:hidden; } .box{ position:absolute; bottom:40%; width:400px; left:35%; text-align:center; } .box button{ width:150px; height:30px; background:transparent; border:1px solid white; border-radius:5px; margin-top:20px; } .box button:first-of-type{ margin-right:95px; } .img_list{ width:100%; display: block; max-width: 100%; height:100%; } .btn_play{ position:absolute; right:-10%; top:50%; width:40px; height:40px; text-align:center; line-height:40px; border:1px white solid; border-radius:50%; } .imgList{ position:absolute; z-index:2; transition:transform 1s linear,opacity 1s linear; } .imgList:first-of-type{ left:10%; top:15%; } .imgList:nth-child(2){ left:62%; } .imgList:nth-child(3){ left:20%; } .imgList:nth-child(4){ left:42%; bottom:0; overflow: hidden; } .imgList:nth-child(5){ left:23%; top:30%; opacity:0; } .imgpay{ position:absolute; transition:transform 1s linear,opacity 1s linear; } .imgpay:nth-child(1){ left:-10%; top:-45%; z-index:2; } .imgpay:nth-child(2){ left:30%; bottom:-50%; } .imgpay:nth-child(3){ left:50%; top:30%; opacity:0; } .imgfan{ position:absolute; left:15%; top:20%; z-index:2; } .imgfan1{ transition:transform 1s linear; } .imgfont{ position:absolute; right:25%; top:33%; opacity:0; z-index:2; transition:opacity 1s linear; } .imgfont1,.imgp1{ transition:transform 1s linear; } .imgp{ position:absolute; left:15%; top:30%; opacity:0; z-index:2; transition:opacity 2s linear; } .animate1{ transform:translatex(200px); } .animate2{ transform:translatex(28%) translatey(60%); } .animate3{ transform:translatex(-9%) translatey(-5%); } .bigFont{ transform:scale(1.1) } </style></head><body><ul class="ul_list"> <li class="li_banner"> <div class="box"> <img src="7.26/image/4JdljnmTmX.png" alt=""/> <button>登录</button> <button>注册</button> <div class="btn_play"> <img src="7.26/banner/btn_play.png"> </div> </div> <img class="img_list" src="7.26/image/T1k5ReXXlkXXXXXXXX.jpg"> </li> <li class="li_banner"> <img class="imgList" src="7.26/image/4JdkvPL4wX.png" alt=""/> <img class="imgList" src="7.26/image/T10QFeXdlgXXXXXXXX.png" alt=""/> <img class="imgList" src="7.26/image/T19AteXc4xXXXXXXXX.png" alt=""/> <img class="imgList" src="7.26/image/T1GDtfXeRcXXXXXXXX.png"/> <img class="imgList" src="7.26/image/4JdlKWNmB3.png"/> <img class="img_list img_list2" src="7.26/image/T1yXVfXfddXXXXXXXX.jpg"> </li> <li class="li_banner"> <img class="imgpay" src="7.26/image/T1zABeXkxsXXXXXXXX.png" alt=""/> <img class="imgpay" src="7.26/image/T1PQteXadyXXXXXXXX.png" alt=""/> <img class="imgpay" src="7.26/image/T148deXkVlXXXXXXXX.png" alt=""/> <img class="img_list" src="7.26/image/4JdlRITPmX.jpg"> </li> <li class="li_banner"> <img class="imgfan" src="7.26/image/T14uXfXdBXXXXXXXXX.png" alt=""/> <img class="imgfan1 img_list" src="7.26/image/T1y3dfXfFlXXXXXXXX.jpg"> </li> <li class="li_banner"> <img class="imgfont" src="7.26/image/T1fCVfXg0hXXXXXXXX.png" alt=""/> <img class="imgfont1 img_list" src="7.26/image/4JdkvtFg7B.jpg"> </li> <li class="li_banner"> <img class="imgp" src="7.26/image/4OdnkirZ89.png" alt=""/> <img class="imgp1 img_list" src="7.26/image/4JdidBF3Kn.jpg" alt=""/> </li></ul><script src="7.26/jquery-3.0.0.js"></script><script type="text/javascript"> var num=0; var isAnimate=false; $(function(){ $(document).bind("mousewheel",function(event){ //bind是事件的绑定(type,[data],fn) if(event.originalEvent.deltaY>0){ //向下滚动，元素向上 if(isAnimate == false){ //这里用isAnimate主要是为了保证一次划过一个页面 isAnimate = true; num++; if(num>5 ){ num=5; isAnimate = false return; } $(".ul_list").animate({ "marginTop":-num *parseInt($(".li_banner").css("height"))+"px" },500,"linear",function(){ //图片中的相应动画 isAnimate =false; if(num==0){ $(".imgList").eq(2).removeClass("animate1"); $(".imgList").eq(4).css("opacity",0).removeClass("bigFont") } else if(num == 1){ $(".imgList").eq(2).addClass("animate1"); $(".imgList").eq(4).css("opacity",1).addClass("bigFont") }else if(num == 2){ $(".imgList").eq(2).removeClass("animate1"); $(".imgList").eq(4).css("opacity",0).removeClass("bigFont") $(".imgpay").eq(0).addClass("animate2"); $(".imgpay").eq(1).addClass("animate3"); $(".imgpay").eq(2).css("opacity",1); }else if(num ==3){ $(".imgpay").eq(0).removeClass("animate2"); $(".imgpay").eq(1).removeClass("animate3"); $(".imgpay").eq(2).css("opacity",0); $(".imgfan1").eq(0).addClass("bigFont"); }else if(num == 4){ $(".imgfan1").eq(0).removeClass("bigFont"); $(".imgfont1").eq(0).addClass("bigFont"); $(".imgfont").eq(0).css("opacity",1) }else if(num == 5){ $(".imgfont1").eq(0).removeClass("bigFont"); $(".imgfont").eq(0).css("opacity",0) $(".imgp1").eq(0).addClass("bigFont"); $(".imgp").eq(0).css("opacity",1) } }) } }else{ //向上滚动，元素向下 if(isAnimate == false){ isAnimate = true; num--; if(num<0){ num = 0; isAnimate= false; return; } $(".ul_list").animate({ "marginTop":-num * parseInt($(".li_banner").css("height"))+"px" },500,"linear",function(){ //执行相应动画 isAnimate = false; if(num==0){ $(".imgList").eq(2).removeClass("animate1"); $(".imgList").eq(4).css("opacity",0).removeClass("bigFont") } else if(num == 1){ $(".imgpay").eq(0).removeClass("animate2"); $(".imgpay").eq(1).removeClass("animate3"); $(".imgpay").eq(2).css("opacity",0); $(".imgList").eq(2).addClass("animate1"); $(".imgList").eq(4).css("opacity",1).addClass("bigFont") }else if(num == 2){ $(".imgfan1").eq(0).removeClass("bigFont"); $(".imgpay").eq(0).addClass("animate2"); $(".imgpay").eq(1).addClass("animate3"); $(".imgpay").eq(2).css("opacity",1); }else if(num ==3){ $(".imgfont1").eq(0).removeClass("bigFont"); $(".imgfont").eq(0).css("opacity",0) $(".imgfan1").eq(0).addClass("bigFont"); }else if(num == 4){ $(".imgp1").eq(0).removeClass("bigFont"); $(".imgp").eq(0).css("opacity",0) $(".imgfont1").eq(0).addClass("bigFont"); $(".imgfont").eq(0).css("opacity",1) }else if(num == 5){ $(".imgp1").eq(0).addClass("bigFont"); $(".imgp").eq(0).css("opacity",1) } }) } } }) })</script></body></html>阅读全文
0 0
- 鼠标滚轮事件之支付宝案例
- JS事件之事件类型[鼠标和滚轮事件]
- 鼠标滚轮事件
- javascript: 鼠标滚轮事件
- 兼容鼠标滚轮事件
- SWT:鼠标滚轮事件
- 鼠标--滚轮事件
- 鼠标滚轮事件
- 浅谈鼠标滚轮事件
- jquery 鼠标滚轮事件
- 【Js】鼠标滚轮事件
- 鼠标滚轮滚动事件
- 鼠标滚轮事件
- 鼠标滚轮事件
- js鼠标滚轮事件
- 鼠标滚轮事件
- JQuery鼠标滚轮事件
- 鼠标滚轮事件封装
- 初学 linux NFS
- poj3974 Palindrome(manacher)
- LintCode :Big Integer Addition
- 数据结构：链表栈
- POJ3133 Manhattan Wiring（难题 较为复杂）
- 鼠标滚轮事件之支付宝案例
- ICG博弈游戏的必胜策略
- 用Apache Spark进行大数据处理之Spark SQL（2）
- 例说数据结构&STL（四）——queue
- 逻辑回归LogisticRegression
- Python-17 lambda表达式
- 【LeetCode系列】动态规划算法
- 【C语言】动态内存分配
- web开发常见安全问题（SQL注入、XSS攻击、CSRF攻击）
