当前位置:96看吧 > 实用代码 > 网页特效 > 图片可上下滚轮的jQuery特效

图片可上下滚轮的jQuery特效

时间:2013/06/30
作者:viget.com
来源:viget.com
查看:
标签:jquery

图片可上下滚轮的jQuery特效

jQuery特效的特点是:长脸的图片带有上下滚轮工具。使用jQuery+CSS实现的。适用于一些摄影网站。使用一个jQuery插件:jquery.imageScroller.min.js

style代码部分很简洁:

  1. html, body { font12px/20px HelveticaArialsans-serifmargin0padding0; }  
  2. #container { margin20px auto 0width960px; }  
  3. .image-scroller { height640px; -moz-user-select: noneoverflowhiddenpositionrelative; -webkit-user-select: nonewidth960px; }  
  4. .image-scroller img { displayblock; left: 0positionabsolute; top: 0; }  
  5. .image-scroller .preview { border5px solid #fff; border-radius: 5px; bottom: 20px; box-shadow: 2px 2px 3px rgba(0,0,0,0.35); height180px; left: 20px; -moz-border-radius: 5px; -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.35); positionabsolute; -webkit-border-radius: 5px; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.35); width135px; }  
  6. .image-scroller .preview .indicator { background#000cursormovedisplayblock; left: 0positionabsolutewidth135px; }  
  7. .image-scroller .preview .indicator span { color#fffdisplayblockmargin-top-10pxpositionabsolutetext-aligncentertext-transformuppercase; top: 50%width100%; } 

jQuery插件:jquery.imageScroller.min.js部分:

  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=  
  2. 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); 

 

英文原版:http://viget.com/uploads/file/image-scroller/

上一篇:多功能的返回顶部代码jQuery特效代码
下一篇:检测用户输入密码强度jquery特效代码
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门