发布于 2016-10-14 22:24:48 | 152 次阅读 | 评论: 0 | 来源: 网友投递
jQuery javascript框架
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。
jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件
mousewheel
插件)1.在head
或者body
中引入下列文件:
<!--必须引入-->
<script type="text/javascript" src="your-path/jquery-1.8.1.min.js"></script>
<!--如果需要支持鼠标滚动则引入,否则可以不引用-->
<script type="text/javascript" src="your-path/require/jquery.mousewheel.min.js"></script>
<!--必须引入-->
<script type="text/javascript" src="your-path/require/jquery.jqdrag-1.0.min.js"></script>
<!--必须引入-->
<script type="text/javascript" src="your-path/min/jquery.jscrollbar-1.0.2.min.js"></script>
2.设置内容区域的大小:
<!--设置区域大小,包括滚动条-->
<div style="width:1300px;height:600px;">Some long text or other elements...</div>
3.调用插件:
<script>
$(function(){
$(‘#test1,#test2‘).jscrollbar({
//some options
});
});
</script>
<script>
$(function(){
$(‘#test1,#test2‘).jscrollbar({
width:12, //滚动条宽度
color:‘orange‘, //滚动条颜色
opacity:0.7, //透明度
position:‘inner‘, //滚动条位置
mouseScrollDirection:‘horizontal‘ //鼠标滚动时滚动的方向
});
var jsb2 = $(‘#test2‘).jscrollbar(‘getObject‘);
setTimeout(function(){
$(‘#test2 img‘).css({width:‘4000px‘});
//滚动实例的链式调用,无法使用jQuery操作DOM的方法 [不推荐]
jsb2.updateUI()
.scrollTo(‘x‘,100)
.scrollBy(‘x‘,50);
//jQuery的链式调用,可以使用jQuery操作DOM的方法 [推荐]
$(‘#test1‘).jscrollbar(‘scrollBy‘,‘x‘,10)
.jscrollbar(‘scrollTo‘,‘x‘,300)
.animate({‘opacity‘:0.8},1000);
},2000)
});
</script>
https://github.com/dingo826/jquery.jscrollbar