| 标题 | 利用jquery制作滚动到指定位置触发动画 |
| 内容 | 利用CSS3的 animation 动画特性来完成的，对IE的兼容性不是太好，适用与手机端。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>sas</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <style type="text/css"> *{ margin:0px; padding:0px;} .gs{ position:relative; top:800px; background-color:#099; left:150px; width:80px; } .xz{ animation:roate 2s; animation-fill-mode:forwards; animation-direction:alternate; } @keyframes roate{ from { transform:rotate(0deg); width:100px; height:100px; } to{transform:rotate(360deg); width:200px; height:200px; }} .xs{ width:50px; float: left; height:30px; background-color: #F90; position:fixed; left:700px; top:0px;} </style> </head> <body> <script type="text/javascript"> function gdjz(div,cssname,offset){ var a,b,c,d; d=$(div).offset().top; a=eval(d + offset); b=$(window).scrollTop(); c=$(window).height(); if(b+c>a){ $((div)).addClass((cssname)); } } $(document).ready(function(e) { $(window).scroll(function(){ gdjz("#dh",'xz',500); } /*var a,b,c; a=$("#dh").offset().top;//元素相对于窗口的距离 b=$(window).scrollTop(); //监控窗口已滚动的距离; c=$(document).height();//整个文档的高度 d=$(window).height();//浏览器窗口的高度*/ /*if(d+b>a+100){ $("#dh").addClass("xz"); } */ ); }); </script> <div> <div id="dh" >触发动画</div> </div> <div></div> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。