最新消息:

第92款插件:jquery.nicescroll.js可全屏可改滚动条颜色的滚动条插件-推荐

Jquery插件 杨红伟 5065浏览 0评论

一、插件介绍

当我在做项目的时修改,遇到一个问题,在一个很小的区域内,客户让我做一个带有滚动条的内容,而且这个区域内放的内容还不少。我想:怎么才能在有效的区域内放置更多的内容。翻开《jQuery权威指南2》,里边正好有这边一则插件,对于我来说很实用。于我我就采用了!结果还是很棒的!以下会有我的截图

这里是书中介绍的,我看的有点儿晕:“众所周知,在页面中实现滚动的效果不是太容易,尤其要兼容其他的浏览器,代码相对要复杂些,特别是兼容移动设备的浏览器。特别是兼容移动设备的浏览器。NiceScroll是一款完全基于jQuery框架的滚动条插件,它不仅有着类似iOS系统设备的滚动条外观,而且还支持任意的<div>、<iframe>、<body>元素的滚动效果,该滚动效果也完全兼容各类桌面和移动设备的主流浏览器。此外,该插件还拥有iOS系统设备中的触摸事件,比较适用于iOS系统设备中的页面展示。”

二、插件图片示例


本案图片

三、使用方法及使用参数

$("#id1").niceSroll("#id2",{
	touchbehavior:true,		//是否是触摸式滚动效果
	cursorcolor:"#333",		//滚动条的颜色值
	cursoropacitymax:0.6,	//滚动条的透明度值
	cursorwidth:20,  		//滚动条的宽度值
	background:#FF0000, 	//滚动条的背景色,默认是透明的
	autohidemode:true,  	//滚动条是否是自动隐藏,默认值为 true ,表示是自动隐藏
	boxzoom:true  			//是否显示放大镜标按钮,默认为false,表示不显示
});

四、使用教程

HTML代码:

<p>DIV里是图片</p>
<div id="box1" class="bs">
	<div class="scrimg">
		<img src="images/pic10.jpg" />
		<img src="images/pic10.jpg" />
		<img src="images/pic10.jpg" />
		<img src="images/pic10.jpg" />
		<img src="images/pic10.jpg" />
	</div>
</div>
<p>DIV里是内容</p>
<div id="box2" class="bs">
	<div id="content">
		<h3>这是一个div区域</h3>
		<p class="p">内容区域</p>
	</div>
</div>
<p>DIV里是框架</p>
<div id="box3" class="bs">
	<!--iframe 自适应高度 -->
	<iframe src="http://www.baidu.com" height="100%"  width="100%" frameborder="0"  onload="$(this).height($(this).contents().height());"></iframe>
</div>

JS代码:

<script type="text/javascript">
	$(function() {
		//图片区域显示滚动效果
		$("#box1").niceScroll("#box1 div", {
			touchbehavior: true,
			cursorcolor: "#333",
			cursoropacitymax: 0.6,
			autohidemode: false,
			boxzoom: false
		});
		//div区域显示滚动效果
		$("#box2").niceScroll("#content", {
			cursorcolor: "#666",
			autohidemode: false,
			boxzoom: true
		});
		//iframe区域显示滚动效果
		$("#box3").niceScroll("iframe", {
			cursorcolor: "#ccc",
			autohidemode: false,
			boxzoom: true
		});
	});
</script>

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址