在写网站的时候，有一些dom第一次进入屏幕时需要加一个动画进入效果，如下图
于是，自己就研究下，要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧，并将他的透明度（opacity）设置为0；
然后监听滚轮当dom出现在屏幕中时候，然后dom移回原位，并且透明度（opacity）设置为1。
html如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 100%; height: 100px; margin-top: 1500px; } .txt{ margin-left:100px; width: 600px; display:inline-block; } #txt{ width: 600px; display:inline-block; } .AtFirst{ opacity: 1; transform: translateX(0); transition-duration: 2s; } .left{ opacity: 0; transform: translateX(-100px); } .right{ opacity: 0; transform: translateX(100px); } </style> </head> <body> <div class="box"> <div class="txt"><img src="imgs/1.jpg" /></div> <div id="txt"><img src="imgs/2.jpg" /></div> </div> <div class="box"></div> </body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/socllII.js"></script> <script> $(".txt").ScrollLeft(); $("#txt").ScrollRight(); </script> </html>
插件代码如下
$.fn.extend({ ScrollLeft:function(){ var that=this; return (function(){ that.addClass('AtFirst'); that.addClass('left'); $(window).bind("scroll",function(){ var ss=that.offset().top- $(window).height() +300; if($(window).scrollTop() > ss){ that.removeClass('left'); $(this).unbind("scroll"); } }) })() }, ScrollRight:function(){ var that=this; return (function(){ that.addClass('AtFirst'); that.addClass('right'); $(window).bind("scroll",function(){ var ss=that.offset().top- $(window).height() +300; if($(window).scrollTop() > ss){ that.removeClass('right'); $(this).unbind("scroll"); } }) })() } });
这个插件中我用闭包是怕外层函数的this到jq监听滚轮时，this指向就不再是原来的dom，其实不用闭包也可以的。
代码如下
ScrollLeft:function(){ var that=this; that.addClass('AtFirst'); that.addClass('left'); $(window).bind("scroll",function(){ var ss=that.offset().top- $(window).height() +300; if($(window).scrollTop() > ss){ that.removeClass('left'); $(this).unbind("scroll"); } }) }
我只是写了两种动画效果，如果你需要多种特效的话，可以去下载animate.min.css，引用到html中，然后修改下插件代码即可
代码如下
ScrollRight:function(){ var that=this; return (function(){ that.addClass('AtFirst'); that.addClass('right'); $(window).bind("scroll",function(){ var ss=that.offset().top- $(window).height() +300; if($(window).scrollTop() > ss){ that.addClass('animated flipInY');//前一个class一定要加，后一个class看你要什么效果，自己修改。 that.removeClass('right'); $(this).unbind("scroll"); } }) })() }
更多专业前端知识，请上 【猿2048】www.mk2048.com