首页 > 图片特效 / jquery特效插件 / > jquery触屏特效插件touchScroll

jquery触屏特效插件touchScroll

点击: 15688 , 发布日期: 2013-5-3
jquery触屏特效插件touchScroll

jquery触屏特效插件touchScroll

智能手机的普及也让网页设计人员的设计风格发生了变化,手机不像PC那样的大部分通过鼠标来完成,都是以触屏拖动等方式来实现。今天这个触屏特效是jquery插件,实现滚动条自定义效果的同时可以上下拖动实现。

jquery参数说明:

_default:{
	'id': 'slider',
	'width':4,
	'minLength':20,
	'opacity':0.8,
	'onscroll':new Function(),
	'ondrag':new Function(),
	'color':'black',
	'mouseAlign':1
	},

width:滚动条的宽度。

minLength:滚动条的长度。

color:滚动条的颜色。

opacity:透明度。

mouseAlign:滑动的方式

如何使用触屏特效

引入JS与CSS

<script type="text/javascript" src="js/touchScroll.js"></script>
<link rel="stylesheet" type="text/css" href="css/kaiwo.css">

body中插入html内容

<div id="wrapper">
	<div id="scroller">
	<ul id="thelist">
	<li><img src="images/img01.jpg" alt="触屏插件touchScroll" /><span>触屏插件touchScroll</span></li>
	<li><img src="images/img02.jpg" /><span>触屏案例图片1</span></li>
	<li><img src="images/img03.jpg" /><span>触屏案例图片2</span></li>
	<li><img src="images/img04.jpg" /><span>触屏案例图片3</span></li>
	<li><img src="images/img05.jpg" /><span>触屏案例图片4</span></li>
	<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
	<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
	<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
	<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
	<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
	<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
	<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
	<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
	<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
	<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
	</ul>
	</div>
	</div>

最后调用jquery插件

<script>
var t1=new TouchScroll({id:'wrapper','width':5,'opacity':0.7,color:'#555',minLength:20});
</script>

完成,看看效果吧。

关键词: 触屏 手机网站 jquery插件

注:用QQ登录后即可下载特效,当然你的积分是有限的,望好好利用与赚取!如何获得积分

我要评论
登录再评论
全部评论
不错,值得学习学习
嫣然一笑
2015-12-30 14:56:00
非常不错
恶魔乜单纯
2015-8-10 20:20:56
厉害厉害
丶大螃蟹丶
2014-12-23 10:33:54
好屌,太给力了
搁浅的回忆
2014-12-22 13:03:29
微柳(微信柳州)
2014-12-16 13:34:54
很不错的插件
Sparks Fly
2014-12-4 14:15:48
不错,太厉害了!
大、風
2014-11-28 16:52:05
为什么在苹果手机上滑不到底啊?
心底的涟漪,此起彼伏!
2014-10-27 13:03:52
好叼,太给力了。
三喜。
2014-9-16 22:51:37
嗖嗖嗖
Slade
2014-5-15 22:57:11
吊炸天
平生欢。
2014-5-15 16:19:50
很不错噢 分析一下
.
2014-4-21 11:53:45