jquery形象照片卷轴插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery形象照片卷轴插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html> 
<html> 
<head>
  <title>jquery形象照片卷轴插件</title>
  <meta charset="utf-8" />
  <link href="css/screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
  <div id="container">
    <div class="image-scroller">
      <img src="images/feature.jpg" alt="" class="feature-image" height="1280" width="960" />
      <div class="preview">
        <img src="images/preview.jpg" alt="" height="180" width="135" />
      </div>
    </div>
  </div>
  
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.imageScroller.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('div.image-scroller').imageScroller();
    });
  </script>
</body>
</html>

JS代码(jquery.imageScroller.min.js):

/* * Image Scroller Plugin * http://www.viget.com/ * * Copyright (c) 2010 Trevor Davis (http://trevordavis.net/) * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery,see:* http://jquery.org/license * * @version 0.1 */
(function(a){
	a.fn.imageScroller=function(m){
	var j=a.extend({
}
,a.fn.imageScroller.defaults,m);
	return this.each(function(){
	var c=a(this),f=a.meta?a.extend({
}
,j,c.data()):j,k=c.height(),g=c.find(f.preview),n=g.offset(),e=g.height(),l=c.find("img"+f.featureImg),h=l.height();
	c=k/h;
	var i=Math.round(e*c);
	if(h>k){
	var d=a("<span/>",{
	"class":"indicator",css:{
	opacity:0.4,height:i}
}
);
	a("<span/>",{
	text:f.indicatorText}
).appendTo(d);
	d.appendTo(g);
	d.bind({
	mousedown:function(o){
	var p=d.offset();
	a(document).bind({
	"mousemove.dragging":function(b){
	b=b.pageY-n.top-(o.pageY-p.top);
	if(b<=0)b=0;
	else if(b>=e-i)b=e-i;
	d.css("top",b);
	l.stop().animate({
	top:"-"+Math.round(b/e*h)}
,10)}
,mouseup:function(){
	a(document).unbind("mousemove.dragging")}
}
)}
}
)}
}
)}
;
	a.fn.imageScroller.defaults={
	preview:".preview",featureImg:".feature-image",indicatorText:"Drag Me"}
}
)(jQuery);

CSS代码(screen.css):

html,body{font:12px/20px Helvetica,Arial,sans-serif;margin:0;padding:0;}
#container{margin:20px auto 0;width:960px;}
.image-scroller{height:640px;-moz-user-select:none;overflow:hidden;position:relative;-webkit-user-select:none;width:960px;}
.image-scroller img{display:block;left:0;position:absolute;top:0;}
.image-scroller .preview{border:5px solid #fff;border-radius:5px;bottom:20px;box-shadow:2px 2px 3px rgba(0,0,0,0.35);height:180px;left:20px;-moz-border-radius:5px;-moz-box-shadow:2px 2px 3px rgba(0,0,0,0.35);position:absolute;-webkit-border-radius:5px;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.35);width:135px;}
.image-scroller .preview .indicator{background:#000;cursor:move;display:block;left:0;position:absolute;width:135px;}
.image-scroller .preview .indicator span{color:#fff;display:block;margin-top:-10px;position:absolute;text-align:center;text-transform:uppercase;top:50%;width:100%;}

附件:下载该文件资源,减少时间成本(增值服务)