特效描述:jquery 水平滚动条插件 图片滚动展示。jquery水平滚动条插件图片滚动展示
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/hScrollPane.js"></script>
2. HTML代码
<h2 class="scrolltitle">jquery hScrollPane 水平或横行滚动条插件 默认状态属性</h2> <pre class="scrolllist"> $(".container").hScrollPane({ mover:".press", //指定container对象下的哪个元素需要滚动位置 | 必传项; moverW:function(){return $(".press").width();}(), //传入水平滚动对象的长度值,不传入的话默认直接获取mover的宽度值 | 可选项; handleMinWidth:300, //指定handle的最小宽度,要固定handle的宽度请在css中设定handle的width属性(如 width:28px!important;),不传入则不设定最小宽度 | 可选项; showArrow:true, //指定是否显示左右箭头,默认不显示 | 可选项; dragable:false, //指定是否要支持拖动效果,默认可以拖动 | 可选项; handleCssAlter:"draghandlealter", //指定拖动鼠标时滚动条的样式,不传入该参数则没有变化效果 | 可选项; easing:true, //滚动是否需要滑动效果,默认有滑动效果 | 可选项; mousewheel:{bind:true,moveLength:500} //mousewheel: bind->'true',绑定mousewheel事件; ->'false',不绑定mousewheel事件; moveLength是指定鼠标滚动一次移动的距离,默认值:{bind:true,moveLength:300} | 可选项; }); </pre> <h2 class="scrolltitle">设置水平滚动条商品图片横行展示</h2> <div class="imgshow"> <div class="imgzoom"> <img src="images/1.jpg" alt="" /> <div class="loading"></div> </div> <div class="container thumblist"> <ul> <li> <div class="current"><a href="images/1.jpg"><img src="images/s1.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单</a></p> </li> <li> <div><a href="images/2.jpg"><img src="images/s2.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery 表单美化 input文本框模拟select选择框获取选定的value值</a></p> </li> <li> <div><a href="images/3.jpg"><img src="images/s3.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动</a></p> </li> <li> <div><a href="images/4.jpg"><img src="images/s4.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery smartFloat插件制作仿淘宝产品列表页默认排序搜索框</a></p> </li> <li> <div><a href="images/5.jpg"><img src="images/s5.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></p> </li> <li> <div><a href="images/6.jpg"><img src="images/s6.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></p> </li> <li> <div><a href="images/7.jpg"><img src="images/s7.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></p> </li> <li> <div><a href="images/8.jpg"><img src="images/s8.jpg" alt="" /></a></div> <p><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></p> </li> </ul> </div> </div><!--imgshow end--> <script type="text/javascript"> $(".container").hScrollPane({ mover:"ul", moverW:function(){return $(".container li").length*178;}(), showArrow:true, handleCssAlter:"draghandlealter", mousewheel:{moveLength:207} }); $(function(){ var img=new Image(); var imgshowobj=$(".imgshow"); var imgzoom=imgshowobj.find(".imgzoom"); imgshowobj.find(".thumblist").find("div a").live("click",function(){ imgzoom.find(".loading").show(); img.onload=function(){ imgzoom.find("img").attr("src",img.src); imgzoom.find(".loading").hide(); } img.src=$(this).attr("href"); $(".thumblist li div a").parent().removeClass("current"); $(this).parent().addClass("current"); return false; }); }); </script>