JQ二手手风琴转让效果，请大神帮我修改下bug

来源：蜘蛛抓取(WebSpider) 时间：2017-11-19 17:40 标签： jquery实现手风琴效果
简单实现jQuery手风琴效果
作者：-懒洋洋
字体：[ ] 类型：转载 时间：
这篇文章主要教大家如何简单实现jQuery手风琴效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下
&script type="text/javascript" src="jquery-3.0.0.js"&&/script&
&script type="text/javascript"&
$(function() {
//获取所有li遍历
$(".li_list").each(function() {
//当鼠标进去当前li
$(this).mouseenter(function() {
//设置当前元素宽度
$(this).stop()
.animate({ "width": "600px" }, 500, "linear");
//设置同胞元素宽度
.siblings().stop()
.animate({ "width": "100px" }, 500, "linear");
.li_list {
width: 100
height: 300
list-style:
.li_list img {
width: 100%;
height: 100%;
width: 600
height: 300
background: rgba(230, 0, 0, 0.5);
text-align:
line-height: 300
.divbg span {
width: 100
height: 300
width: 500
height: 300
width: 600
html代码：
&ul class="ul_list"&
&li class="li_list"&
&div class="divbg"&
&span&萌宠&/span&
&div class="div1"&
&img src="img/0.jpg" /&
&li class="li_list"&
&div class="divbg"&
&span&萌宠&/span&
&div class="div1"&
&img src="img/1.jpg" /&
&li class="li_list"&
&div class="divbg"&
&span&萌宠&/span&
&div class="div1"&
&img src="img/2.jpg" /&
&li class="li_list mo"&
&div class="divbg"&
&span&萌宠&/span&
&div class="div1"&
&img src="img/3.jpg" /&
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具推荐这篇日记的豆列
&&&&&&&&&&&&posts - 7,&
comments - 24,&
trackbacks - 0
这篇主要是手风琴效果和相结合，在里的Demo3.html、Demo4.html。
手风琴原理比较简单，当鼠标经过的时候改变图片的路径，鼠标移到另一张图片时还原路径。
虽然原理简单，但是做的过程中也遇到很多纠结的事。
一起来看代码吧！（很多变量没有给出，请结合Demo js里的ImageSlide.js）
&span style="position:bottom: 5width: 100%;text-align:"&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标签设置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});
当鼠标移到其他的图片的时候，就应该把上一张图片变小。之前我一直在纠结用什么方式来记录上一次鼠标经过的图片。
后来想了一下觉得用个全局变量来记录比较方便点。
$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 = $
和图片无缝切换结合就变成一个很好的手风琴效果了。
版权所有，转载请注明出处，谢谢！
阅读(...) 评论()友情提示：垃圾评论一律封号，下载出错或者资源有问题请联系全栈客服QQ
简单的jQuery手风琴效果
所需积分：20
亲，积分不够，多去发布资源、评论、签到、
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折。
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值手风琴菜单
&Advertisement
垂直导航,手风琴菜单
手风琴菜单
手风琴菜单
垂直导航,手风琴菜单
手风琴菜单
手风琴菜单,图片展示,悬停
手风琴菜单,图片展示,幻灯片和轮播图
幻灯片和轮播图,手风琴菜单
垂直导航,手风琴菜单
手风琴菜单
手风琴菜单
手风琴菜单
垂直导航,手风琴菜单
手风琴菜单
手风琴菜单

我要回帖

更多关于 jquery实现手风琴效果 的文章

 

随机推荐