所属分类:网页特效-图片特效,触屏/拖拽/下拉
<link rel="stylesheet" href="jquery.mThumbnailScroller.css">
<!-- Google CDN jQuery with fallback to local -->
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<!-- plugin script -->
<script src="jquery.mThumbnailScroller.js"></script>
(function($){
$(window).load(function(){
$("#content-1").mThumbnailScroller({
axis:"y",
type:"hover-precise"
});
});
})(jQuery);
<div id="content-1" class="content">
<ul>
<li><a href="#"><img src="examples/thumbnails/img3.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img7.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img11.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img15.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img20.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img3.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img7.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img11.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img15.jpg" /></a></li>
<li><a href="#"><img src="examples/thumbnails/img20.jpg" /></a></li>
</ul>
</div>
1、如果你在IE7,或IE8中沒用的话,估计就是下面这段代码的原因(要加上);
如果地址失效的话,要下载到本地,再引入到页面
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2、在页面中,下面代码 "click-25" 后面多了一个, 要删掉否则IE7会报错!
$("#content-6").mThumbnailScroller({
type:"click-25",
});