自编JQuery插件第十二个:水平滚动图片
来源：互联网 发布：中国软件评测 编辑：程序博客网 时间：2024/04/29 00:23
水平滚动图片效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" ><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv=Content-Type content="text/html; charset=utf-8"><SCRIPT language=javascript src="jquery-1.6.js" type=text/javascript></SCRIPT><style type="text/css" >.margin_18 {MARGIN-RIGHT: 18px}#runbox {DISPLAY: block; OVERFLOW: hidden; WIDTH: 618px; HEIGHT: 87px}#runboxpic {FLOAT: left; HEIGHT: 87px}#runboxpic A {DISPLAY: block; FLOAT: left}.bold {FONT-WEIGHT: bold}#runactbox {DISPLAY: block; OVERFLOW: hidden; WIDTH: 873px; HEIGHT: 156px}img{ border:0px;}div{ margin:1px;}</style><BODY><TABLE class=hd_bg cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR vAlign=top> <TD><TABLE style="MARGIN-TOP: 36px; MARGIN-BOTTOM: 23px" cellSpacing=0 cellPadding=0 width=1099 align=center border=0> <TBODY> <TR> <TD><TABLE style="MARGIN-TOP: 20px; MARGIN-BOTTOM: 10px" cellSpacing=0 cellPadding=0 width=943 border=0> <TBODY> <TR> <TD vAlign=top width=35><IMG class=hand id=runleftbtn style="MARGIN-TOP: 40px" height=26 src="http://www.33fly.com/University/images/hd_30.gif" width=18></TD> <TD class=hd_img vAlign=top width=873><DIV id=runactbox> <DIV id=runboxpic> <DL class=margin_18> <DT><A title=333 href="http://www.33fly.com/University/Team/Actview.aspx?aid=6" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531140458.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=6" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=55555555555 href="http://www.33fly.com/University/Team/Actview.aspx?aid=8" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531184426.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=8" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=666 href="http://www.33fly.com/University/Team/Actview.aspx?aid=9" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531185339.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=9" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=888 href="http://www.33fly.com/University/Team/Actview.aspx?aid=10" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531185518.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=10" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=899 href="http://www.33fly.com/University/Team/Actview.aspx?aid=12" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/201171191915.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=12" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=556 href="http://www.33fly.com/University/Team/Actview.aspx?aid=13" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531201905.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=13" target=_blank></A></DD> </DL> </DIV> </DIV></TD> <TD vAlign=top align=right width=35><IMG class=hand id=runrightbtn style="MARGIN-TOP: 40px" height=26 src="http://www.33fly.com/University/images/hd_31.gif" width=18></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY></TABLE></BODY></HTML><script type="text/javascript" src="JQPI.js" ></script>
JQPI.js源码:jQuery.hor={ box:null, pic:null,runx:null,runover:function (){ clearInterval(jQuery.hor.runx);},run2:function(a){if(this.pic.offsetWidth-this.box.scrollLeft<=0){jQuery.hor.box.scrollLeft-=this.pic.offsetWidth;}else{this.box.scrollLeft+=a;}},runSpeed:10,runStar:function(a){$.hor.runx=setInterval("jQuery.hor.run2("+a+")",$.hor.runSpeed);},run:function(options){ var defaults = { boxid:"", leftbtn:"", rightbtn:"", leftbtn:"", rightbtn:"" } var o = $.extend(defaults, options); this.box=$('#'+o.boxid)[0]; this.pic=$('>*',this.box)[0]; $(this.pic).height(o.boxh); $(this.pic).width(o.boxw*$(">*",this.pic).length); $("#"+o.leftbtn).attr("alt","点住不放可以快速向左滚动").css({"cursor":"pointer"}); $("#"+o.rightbtn).attr("alt","点住不放可以快速向右滚动").css({"cursor":"pointer"}); $("#"+o.leftbtn).mousedown(function(){$.hor.runover();$.hor.runStar(-3)}).mouseup(function(){$.hor.runover();$.hor.runStar(-1)}).mouseover(function(){ $.hor.runStar(-1)}).mouseout(function(){$.hor.runover();}); $("#"+o.rightbtn).mousedown(function(){ $.hor.runover(); $.hor.runStar(3) }).mouseup(function(){ $.hor.runover(); $.hor.runStar(1) }).mouseover(function(){ $.hor.runStar(1) }).mouseout(function(){ $.hor.runover(); });}}jQuery.hor.run({boxid:"runactbox",boxh:"156",boxw:"178",leftbtn:"runleftbtn", rightbtn:"runrightbtn",leftbtn:"runleftbtn",rightbtn:"runrightbtn"});
- 自编JQuery插件第十二个:水平滚动图片
- 自编jQuery插件第七个
- 自编jQuery插件第八个
- 自编JQuery插件第十个
- 10+个jQuery图片滚动插件介绍
- 自编jQuery插件第九个
- jquery 图片滚动插件
- jquery 图片水平滚动代码
- Android_ViewPager_实现多个图片水平滚动
- Android_ViewPager_实现多个图片水平滚动
- Android_ViewPager_实现多个图片水平滚动
- Android_ViewPager_实现多个图片水平滚动
- 第31款插件:第26款插件：jcarousellite.js 基于Jquery的无缝“水平滚动”图片插件
- 自编JQuery插件第十一个
- jquery图片滚动插件marquee
- jquery图片滚动插件jcarousellite
- jquery插件实现图片滚动
- js图片水平滚动插件，支持上下滚动
- Linux/UNIX 命令行大全完整版
- 【CPU 与编译器版】资源集合
- [ThinkPad] PWMTR32V.Dll的问题
- 毕业设计——人脸检测——001 图片导入MATLAB
- STL之vector
- 自编JQuery插件第十二个:水平滚动图片
- 博客检讨
- const 总 结
- [读书笔记]ASCII字符的兼容性
- UVa Problem 10215 The Largest/Smallest Box... （最大/最小的盒子）
- 2011年下半年11月份系统架构设计师上午试题答案之一
- 生成符合flexigrid的json格式的java代码
- Oracle Pro*c 中sqlca以及oraca的定义和说明
- Curve Fitting Toolbox简介
