源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

基于jquery实现鼠标滚轮驱动的图片切换效果

  • 时间:2020-08-02 14:50 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于jquery实现鼠标滚轮驱动的图片切换效果
jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果。 [img]http://files.jb51.net/file_images/article/201510/20151026165917201.jpg?2015926165928[/img] [b]本例实现的效果: [/b]鼠标滚轮滚动时图片进行切换。 支持键盘方向键实现图片切换效果。 支持点击图片切换,支持点击当前图片链接。 进度条滑块展示图片图片数量进度。 [b]XHTML[/b]
<div class="demo"> 
 <div id="imageflow"> 
 <div id="loading"><img src="images/loader.gif" alt="loading" /></div> 
 <div id="captions"></div> 
 <div id="images"> 
 <img src="images/s1.jpg" alt="image1" /> 
 <img src="images/s2.jpg" alt="image2" /> 
 <img src="images/s3.jpg" alt="image3" /> 
 <img src="images/s4.jpg" alt="image4" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div> 
[b]div.demo[/b]是最外面的一层,包含了整个滚动效果所需的所有元素[b]。#imageflow[/b]是必需的,且与其内部包含的元素的ID名称不能修改,如确实要修改,就要先定义或直接修改JS代码了[b]。#loading[/b]用来装载一个加载动画的图片,当然你也可以直接写成"loading"或其他文字。[b]#captions[/b]用来显示图片的标题。[b]#images[/b]放置所要滚动切换的图片,数量不限。[b]#scrollbar[/b]就是展示图片的进度条。[b]#slider[/b]是一个滑块,当切换图片时,滑块会滑动到相应的位置,以展示图片数量的位置。 [b]CSS[/b]
.demo { width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden } 
#images { margin:20px 0 0 60px; width:860px } 
#images img { position:absolute; margin-top:-160px } 
#loading { margin:0; color:#fff; text-align:center } 
#loading img { position:ralative; margin:0 } 
#captions { position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000 } 
#scrollbar { position:relative; top:-100px; height:2px; z-index:10001 background:#abcd3a url(images/scroll.gif) repeat-x; 
} 
#slider { position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(images/bar.gif) no-repeat; z-index:10002 } 
[b]CSS[/b]是整个效果实现的关键部分,如果CSS控制不好,将得不到你要的效果。 [b].demo[/b]设置了宽度和高度,并设置position:relative和overflow:hidden,目的是为了让鼠标滑轮滚动作用的范围限制在.demo里。[b]#images[/b]设置了margin值,并对内部的img设置了相对定位。#captions设置了用来显示图片标题的样式,注意我使用半透明的图片[b]cap_bg.png[/b]作为背景图片,在IE6下不支持透明的png图片,所以你要进行相关的处理。接下来看滚动进度条和滑块的设置,都运用的定位和深度设置,为何要这样设置,只有大家去慢慢测试才会知道其中的奥妙。 引入jquery库和滑动js文件
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script> 
所有的js动作都在imageflow.js完成,我只做了略微的改动,大家可以直接使用。 现在可以看到效果了吧。但是还有问题: [b]图片连接地址如何获取?[/b] 最终的效果应该是点击当前展示的图片时,会连接到一个页面,用来展示该图片相关的详细信息。那么这个链接地址如何获取,大概在第252行开始有这样两行代码:
image.url = image.getAttribute("longdesc"); 
image.ondblclick = function() { document.location = this.url; } 
可以看出,图片的链接地址来源于它的属性:longdesc,当单击图片的时候,页面将会跳转到相应的地址页面。好现在我们回到刚开始的XHTML代码,只需给每张图片指定longdesc属性,并将值设为对应的网页地址。如:
<img src="images/s1.jpg" alt="image1" longdesc="#" /> 
现在,任务算是完成了。看完本例你会发现,你根本不需要些一句jquery代码,因为imageflow都已经完成了所有的操作代码。 以上就是本文的全部内容,希望对大家的学习有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部