热线电话: 4006-123-892
jQuery实现拖动滚动条的缩略图排列插件下载

资源上传者:332304

下载所需能力币:1

资源下载总次数:0

资源上传时间:2016-07-05 19:49

jQuery实现拖动滚动条的缩略图排列插件下载

如截图,拖动滚动条的缩略图排列,实现“缩略图”和对应的文字描述按进度条进行切换显示。

插件安装如下,首先包含相应的js文件,如下:

<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
其次,将一下js代码防止在网页对应的js文件中(html可参见附件中的index文件),如下:


<script type="text/javascript">
      $(function() {
        
		//vars
		var conveyor = $(".content-conveyor", $("#sliderContent")),
		item = $(".item", $("#sliderContent"));
		
		//set length of conveyor
		conveyor.css("width", item.length * parseInt(item.css("width")));
				
        //config
        var sliderOpts = {
		  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
          slide: function(e, ui) { 
            conveyor.css("left", "-" + ui.value + "px");
          }
        };

        //create slider
        $("#slider").slider(sliderOpts);
      });
    </script>




联系在线客服
免费成为开发商,接单做软件外包项目不收取佣金,且无限量投标竞价