jquery 水平手风琴鼠标滑过标题图片滑动切换

收藏

jquery 水平手风琴鼠标滑过标题图片滑动切换效果实现源码

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 10 积分

<div class="main"> 
        <div class="picon" id="picon"> 
            <ul> 
                <li> 
                    <img width="252" height="400" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/3485.jpg" /> 
                    <div> 
                        <h3><a href="http://www.erdangjiade.com/">jquery图片特效</a></h3> 
                        <p><a href="http://www.erdangjiade.com/" target="_blank">jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动</a></p> 
                    </div> 
                </li> 
                <li> 
                    <img width="252" height="400" alt="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换" src="images/32469.jpg" /> 
                    <div> 
                        <h3><a href="http://www.erdangjiade.com/">jquery手风琴</a></h3> 
                        <p><a href="http://www.erdangjiade.com/" target="_blank">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></p> 
                    </div> 
                </li> 
                <li> 
                    <img width="252" height="400" alt="jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单" src="images/3247.jpg" /> 
                    <div> 
                        <h3><a href="http://www.erdangjiade.com/">jquery导航菜单</a></h3> 
                        <p><a href="http://www.erdangjiade.com/" target="_blank">jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单</a></p> 
                    </div> 
                </li> 
                <li> 
                    <img width="252" height="400" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/3458.jpg" /> 
                    <div> 
                        <h3><a href="http://www.erdangjiade.com/">jquery文字特效</a></h3> 
                        <p><a href="http://www.erdangjiade.com/" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></p> 
                    </div> 
                </li> 
                <li> 
                    <img width="252" height="400" alt="jquery 文字特效霓虹灯文字效果使用jQuery和CSS" src="images/39.jpg" /> 
                    <div> 
                        <h3><a href="http://www.erdangjiade.com/">jquery文字特效</a></h3> 
                        <p><a href="http://www.erdangjiade.com/" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></p> 
                    </div> 
                </li> 
                <li> 
                    <img width="252" height="400" alt="jquery表单验证 formvalidator 插件解决整站提交表单验证问题" src="images/34856.jpg" /> 
                    <div> 
                        <h3><a href="http://www.erdangjiade.com/">jquery表单验证</a></h3> 
                        <p><a href="http://www.erdangjiade.com/" target="_blank">jquery表单验证 formvalidator 插件解决整站提交表单验证问题</a></p> 
                    </div> 
                </li> 
            </ul> 
        </div> 
    </div>

$(document).ready(function(){ 
    var movetime=500;     
    var maxw=252; 
    var avgw= parseInt((1130-maxw-2)/11);     
    var index; 
    var t=false; //延时执行 
    var _this; 
 
    //标记当前 
    function cur(ele){         
        ele=$(ele)? $(ele):ele; 
        ele.addClass("cur").siblings().removeClass("cur");     
    }; 
     
    $("#picon li:eq(0)").addClass("cur").animate({"width":maxw+"px"}); 
     
    $("#picon").find("li").mouseover(function(){                                       
        _this=$(this);         
        index=$( "#picon li" ).index( $(this)[0] ); 
        var act=function (){ 
            _this.siblings("li").removeClass("cur"); 
            _this.animate({"width":maxw+"px"},{duration:movetime,easing:"easeOutQuart",complete:function(){cur(_this)}}).siblings("li").animate({"width":avgw+"px"},{duration:movetime}) 
        } 
        t=setTimeout(act,200);             
        return false;             
    }).mouseout(function(){ 
        if(t){ 
            clearTimeout(t); 
        } 
    }); 
 
})