添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 弹出层 | 滚动条 >

jQuery横向滚动条图文相册JS特效

时间:2013-11-18      来源:科e互联     
特效说明:
一款jQuery横向滚动条图文相册JS网页特效,可以设置样式来实现漂亮的横向滚动条效果、抛去系统默认滚动条。滚动条滑块可以设置鼠标滑过样式、鼠标点击样式、鼠标离开样式三种状态。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用CSS代码:
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css">
<link rel="stylesheet" type="text/css" href="css/css.css">

2、调用JS代码:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
  $(function() {
    var conveyor = $(".content-conveyor", $("#sliderContent")),
    item = $(".item", $("#sliderContent"));
    conveyor.css("width", item.length * parseInt(item.css("width")));
    var sliderOpts = {
      max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
      slide: function(e, ui) {
        conveyor.css("left", "-" + ui.value + "px");
      }
    };
    $("#slider").slider(sliderOpts);
  });
</script>

3、添加HTML代码:
加入<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。
相关特效

最新更新特效

设计分享