jQuery鼠标不停滑动手风琴bug修复

jQuery鼠标不停滑动手风琴bug修复

当鼠标悬浮在手风琴过快的时候,手风琴会出现不停的收缩和展开bug,本文是通过setTimeout来修复的,具体代码请看手风琴演示部分。

淘建站为您提供更多_图片代码_手风琴_滑动_悬浮,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 155 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:图片代码 > 手风琴 难易程度:高级

手风琴标题和图片列表

<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.sucaiq.com/js/175.html" target="_blank">jQuery+fullPage.js制作百度百科史记</a></h3>
                <p><a href="http://www.sucaiq.com/" target="_blank">本文参展了百度百科史记2013http://baike.baidu.com/shiji/2013的效果。</a></p>
            </div>
        </li>
        <li>
            <img width="252" height="400" alt="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换" src="images/32469.jpg" />
            <div>
                <h3><a href="http://www.sucaiq.com/js/375.html" target="_blank">jQuery+css静态下拉导航菜单</a></h3>
                <p><a href="http://www.sucaiq.com/" target="_blank">分享一个网页顶部下拉菜单效果。</a></p>
            </div>
        </li>
        <li>
            <img width="252" height="400" alt="jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单" src="images/3247.jpg" />
            <div>
                <h3><a href="http://www.sucaiq.com/js/32.html" target="_blank">jQuery实现页面滚动时元素智能定位</a></h3>
                <p><a href="http://www.sucaiq.com/" target="_blank">我们在天猫商城下拉滚动条时,“宝贝详情”、“交易详情”等一排按钮会一直出现在浏览器顶部,方便我们切换导航。</a></p>
            </div>
        </li>
    </ul>
</div>

setTimeout+mouseover悬浮展开和收缩手风琴

$(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);
        }
    });
})

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/770.html
jQuery鼠标不停滑动手风琴bug修复 希望对你有帮助,感谢您的支持!
  • js悬浮的肥皂泡泡碰撞动画代码

    js悬浮的肥皂泡泡碰撞动画代码

  • 旋转立方体 展开切换

    旋转立方体 展开切换

  • 手机上下滑动翻页动画加音乐

    手机上下滑动翻页动画加音乐

  • 中国水墨风格的手机滑动翻页专题动画模板

    中国水墨风格的手机滑动翻页专题动画模板

  • html5苹果触屏滑动接电话

    html5苹果触屏滑动接电话

  • html5触屏手机侧边栏滑动导航菜单动画特效

    html5触屏手机侧边栏滑动导航菜单动画特效

  • html5 canvas背景特效鼠标滑动

    html5 canvas背景特效鼠标滑动

  • 一个3d立体逼真的雪花效果特效雪花跟随鼠标滑动效果

    一个3d立体逼真的雪花效果特效雪花跟随鼠标滑动效果

  • 蓝色的jquery固定div悬浮在线客服代码

    蓝色的jquery固定div悬浮在线客服代码

  • jQuery网页右下角悬浮的美女在线客服代码

    jQuery网页右下角悬浮的美女在线客服代码

  • jQuery支持拖动的QQ客服悬浮层

    jQuery支持拖动的QQ客服悬浮层

  • jquery悬浮带返回顶部在线客服

    jquery悬浮带返回顶部在线客服

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2