js鼠标滚轮滚动图片切换效果
2013-10-16 21:21
916 查看
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm
HTML文件代码:
最新请参考:http://keleyi.com/a/bjac/kvqcktk6.htm
Web前端资源:/article/4797642.html
HTML文件代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="图片切换,滚轮,jquery" /> <meta name="description" content="keleyi,演示HTML、CSS、jquery、ASP.NET案例和示例" /> <title>js鼠标滚轮滚动图片切换效果-柯乐义</title><base target="_blank" /> <style type="text/css"> img{border:none; } .clear{clear:both} .demo{width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden} #images-keleyi-com{ margin:20px 0 0 60px; width:860px} #images-keleyi-com img{position:absolute; margin-top:-160px;} #loading-keleyi-com{margin:0; color:#fff; text-align:center} #loading-keleyi-com img{position:ralative; margin:0} #captions-keleyi-com{position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(http://keleyi.com/keleyi/phtml/image/12/images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000} #scrollbar-keleyi-com{position:relative; top:-100px; height:2px; background:#abcd3a url(http://keleyi.com/keleyi/phtml/image/12/images/scroll.gif) repeat-x; z-index:10001} #slider-keleyi-com{position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(http://keleyi.com/keleyi/phtml/image/12/images/bar.gif) no-repeat; z-index:10002} a{color:Blue} </style> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/image/12/keleyi.imageflow.js"></script> </head> <body> <div id="header"> <div id="logo"><h1><a href="http://keleyi.com" title="返回keleyi首页">柯乐义</a></h1></div> </div> <div id="main"> <h2 class="top_title"><a href="http://keleyi.com/view-blog-81.html">基于鼠标滚轮驱动的图片切换效果</a></h2> <div class="demo"> <div id="imageflow-keleyi-com"> <div id="loading-keleyi-com"><img src="images/loader.gif" alt="加载中" /></div> <div id="captions-keleyi-com">柯乐义</div> <div id="images-keleyi-com"> <img src="http://down.keleyi.com/images/bing/2013-8-7_Honeybee_CobisRM_935C647_008_ZH-CN1223668775.jpg" alt="多彩图标按钮动画下拉菜单" longdesc="http://keleyi.com/a/bjac/cu727al8.htm" /> <img src="http://down.keleyi.com/images/bing/2013-8-23_Fairytopia_ZH-CN6940724395_keleyi.jpg" alt="Fairytopia" longdesc="http://down.keleyi.com/images/bing/2013-8-23_Fairytopia_ZH-CN6940724395_keleyi.jpg" /> <img src="http://down.keleyi.com/images/bing/2013-8-10_Toulouse_ZH-CN7808794431_keleyi.jpg" alt="Toulouse" longdesc="http://down.keleyi.com/images/bing/2013-8-10_Toulouse_ZH-CN7808794431_keleyi.jpg" /> <img src="http://down.keleyi.com/images/bing/2013-8-18_SpiritBear_ZH-CN8342221823_keleyi.jpg" alt="SpiritBear" longdesc="http://down.keleyi.com/images/bing/2013-8-18_SpiritBear_ZH-CN8342221823_keleyi.jpg" /> <img src="http://down.keleyi.com/images/bing/2013-8-22_KataleKhorCave_ZH-CN6707191757_keleyi.jpg" alt="弹出灯箱窗口浏览图片" longdesc="http://keleyi.com/a/bjac/ppdss7ux.htm" /> <img src="http://down.keleyi.com/images/bing/2013-9-27_BoliviaSalt_ZH-CN10259156901_keleyi.jpg" alt="BoliviaSalt" longdesc="http://down.keleyi.com/images/bing/2013-9-27_BoliviaSalt_ZH-CN10259156901_keleyi.jpg" /> <img src="http://down.keleyi.com/images/bing/2013-9-3_DwarfGoby_ZH-CN11409083216_keleyi.jpg" alt="DwarfGoby" longdesc="http://down.keleyi.com/images/bing/2013-9-3_DwarfGoby_ZH-CN11409083216_keleyi.jpg" /> </div> <div id="scrollbar-keleyi-com"> <div id="slider-keleyi-com"></div> </div> </div> </div> <br/> 把光标停在图片上,转动鼠标滚轮就可以切换图片,也可以拖动下方水平的滚动条,也可以点击非顶端的图片切换到对应图。 </div> <div id="footer"> <p>Powered by keleyi.com 出处:<a href="http://keleyi.com">keleyi.com</a> <a href="http://keleyi.com/a/bjac/kvqcktk6.htm">原文</a></p> </div> <p id="stat"></p> </body> </html>
最新请参考:http://keleyi.com/a/bjac/kvqcktk6.htm
Web前端资源:/article/4797642.html
相关文章推荐
- js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
- js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
- jQuery底部带导航的图片切换,定时上下滚动效果(无滚轮切换效果)
- js图片根据鼠标左右滚动的效果
- [转]JS控制-图片滚动切换效果(实用)
- JS实现鼠标移入移出控制图片的切换效果
- 基于鼠标滚轮驱动的图片切换效果
- js改变图片大小——把鼠标放图片上,滚动鼠标滚轮.
- js图片滚动,鼠标经过滚动停止效果
- 基于jquery实现鼠标滚轮驱动的图片切换效果
- js图片滚动效果时间可随意设定当鼠标移上去时停止
- js鼠标点击图片切换效果代码分享
- 原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
- js鼠标点击图片切换效果实现代码
- js实现鼠标滚轮控制图片缩放效果的方法
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
- js图片滚动效果 时间随便定 鼠标移上去停止
- 原创JS图片放大效果(二) — 多图点击切换,鼠标移上放大 代码很美,步履不停
- js和jquery 两种写法 鼠标经过图片切换背景效果