jquery 图片手风琴效果
2013-10-15 14:26
169 查看
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html、Demo4.html。
手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径。
虽然原理简单,但是做的过程中也遇到很多纠结的事。
一起来看代码吧!(很多变量没有给出,请结合Demo js里的ImageSlide.js)
先是用a标签设置Smallimg 和 Bigimg来存图片的路径,因为img的src会改变。
当鼠标经过li的时候我们就改变img的src 把图片变成大图。
当鼠标移到其他的图片的时候,就应该把上一张图片变小。之前我一直在纠结用什么方式来记录上一次鼠标经过的图片。
后来想了一下觉得用个全局变量来记录比较方便点。
鼠标不移动的时候,图片也应该自动把中间的图片变成大图。
和图片无缝切换结合就变成一个很好的手风琴效果了。
下篇图片放大
谢谢!
版权所有,转载请注明出处,谢谢!
手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径。
虽然原理简单,但是做的过程中也遇到很多纠结的事。
一起来看代码吧!(很多变量没有给出,请结合Demo js里的ImageSlide.js)
<li> <span style="position: absolute;bottom: 5px;width: 100%;text-align: center;">22222</span> <a class="img_b" href="#" Smallimg="images/2_s.jpg" Bigimg="images/2_b.jpg"> <img alt="" width="150" height="150" src="images/2_s.jpg"/> </a> </li>
先是用a标签设置Smallimg 和 Bigimg来存图片的路径,因为img的src会改变。
当鼠标经过li的时候我们就改变img的src 把图片变成大图。
$this.find("li").mouseover(function () { var myurl = $(this).find('a').attr("Bigimg"); //获取大图路径 $(this).css("width",options.bigImgWidth).find('img').attr({src: myurl,width:options.bigImgWidth}); });
当鼠标移到其他的图片的时候,就应该把上一张图片变小。之前我一直在纠结用什么方式来记录上一次鼠标经过的图片。
后来想了一下觉得用个全局变量来记录比较方便点。
var $lastLi; $this.find("li").mouseover(function () { if ($lastLi != undefined) { var lasturl = $lastLi.find('a').attr("Smallimg"); $lastLi.css("width",liwidth).find('img').attr({src: lasturl,width:liwidth}); } var myurl = $(this).find('a').attr("Bigimg"); $(this).css("width",options.bigImgWidth).find('img').attr({src: myurl,width:options.bigImgWidth}); $lastLi = $(this); });
鼠标不移动的时候,图片也应该自动把中间的图片变成大图。
var $getli = $this.find('li').eq(2);//这里又偷懒了,应该根据显示图片数量来判断中间图片 var myurl = $getli.find('a').attr("Bigimg"); $getli.css("width", options.bigImgWidth).find('img').attr({src: myurl, width: options.bigImgWidth}); $lastLi = $getli;
和图片无缝切换结合就变成一个很好的手风琴效果了。
下篇图片放大
谢谢!
版权所有,转载请注明出处,谢谢!
相关文章推荐
- 基于jquery的手风琴图片展示效果实现方法
- 一款基于jquery的手风琴图片展示效果
- 基于jquery的手风琴图片展示效果实现方法
- 一款基于jquery的手风琴图片展示效果
- Jquery 酷炫 用户 选择效果(js 实现带图片的 select 效果)
- jquery 鼠标图片经过效果
- jquery轮换图片效果学习
- jQuery 图片放大镜效果插件:jQZoom
- jquery实现上传图片及图片大小验证、图片预览效果代码
- jQuery实现为图片添加镜头放大效果的方法
- 用jquery的attr方法实现图片切换效果
- jquery带小图的图片轮换效果
- jQuery滚动加载图片效果的实现
- jquery 图片自由拼凑,鼠标移上图片晃动效果代码
- jquery实现图片左右滚动效果
- jquery 做的一个简单切换图片和内容的效果
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- 原生js和jquery实现图片轮播淡入淡出效果