特效描述:JQuery 自适应全屏 图片滚动 鼠标上下滑动效果。JQuery:全屏随鼠标滑动而滚动
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.screenscroll.js"></script>
2. HTML代码
<div id="content"> <div id="tag"> <div></div> <div></div> </div> <div class="screen" id="screen-1"><img src="images/1.jpg"/></div> </div> <script type="text/javascript"> $(function(){ $('body,html').animate({scrollTop:0},300); $.cxycs.screenscroll.init({ screens:["#screen-1"],//滚动标记的数组,类似于锚点数组 timer:500,//滚动间隔,默认500毫秒,500毫秒内鼠标滚动事件不执行页面滚动 speed:500,//滚动时间,默认500毫秒,500毫秒完成页面滚动动画 mouseScrollEventOnOff:true//鼠标滚动事件,默认为true,即开启,开启后,滚动事件由插件执行,若为false,则可以提出滚动事件自己来写滚动事件 }); $("#tag div").eq(1).html(($.cxycs.screenscroll.index+1)+"/"+num); loadimages(2); }); var num=2; function loadimages(i){ if (i>num) return false; $("#tag div").eq(0).html("正在加载第"+i+"张图片..."); var img = new Image(); img.src="images/"+i+".jpg"; img.onload=function(){ var html = '<div class="screen" id="screen-'+i+'"><img src="images/'+i+'.jpg"/></div>'; $("#content").append(html); $.cxycs.screenscroll.opts.screens.push("#screen-"+i); $("#tag div").eq(0).html("已加载"+i+"张图片"); return loadimages(i+1); } } function screenScrollCallback(){ $("#tag div").eq(1).html(($.cxycs.screenscroll.index+1)+"/"+num); } </script>