【jQuery】菜单滑动特效

最新推荐文章于 2020-01-04 15:07:30 发布

weixin_34249367

最新推荐文章于 2020-01-04 15:07:30 发布

阅读量57

点赞数

文章标签： javascript ViewUI

本文介绍了一个使用jQuery实现的图片滚动展示效果。通过鼠标悬停在不同的图片链接上，选择器会平滑滚动到对应的位置，展示不同的图片。该效果利用了jQuery的动画和位置属性，实现了流畅的用户体验。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    (function(){
        $("#play_list").css("opacity","0.3"); //设置透明度
        $("#play_list").children().clone().appendTo("#selector"); //复制元素
        $("#selector").css({
            left:$("#play_list").offset().left,
            top:$("#play_list").offset().top
        }); //定位选择器
        $("#selector").scrollLeft(0); //回到第一帧
    })();

    var $intervalID = null
    $("#play_list a").mouseover(function(){
        clearInterval();
        var $move = $(this).offset().left - $(this).parent().offset().left; //目标滑动位置
        var $left = $("#play_list").offset().left + $move; //目标左边距位置
        var $m =$("#selector").scrollLeft(); //现滑动位置
        var $l = parseInt($("#selector").css("left")); //现左边距位置
        var $direct = ($l < $left)?1:-1; //滑动方向
        var $multiple = ($left - $l ) *$direct / 12; //倍数
        $intervalID = window.setInterval(function(){
            $l+=$multiple*$direct;
            $m+=$multiple*$direct;
            if($l *$direct < $left*$direct){
                $("#selector").css("left",$l).scrollLeft($m);
            }else{
                $("#selector").css("left",$left).scrollLeft($move);
                clearInterval();
            }
        }, 1);
    });

    //清除前面的动画效果
    function clearInterval(){
        if($intervalID != null){
            window.clearInterval($intervalID);
            $intervalID = null;
        }
    }
})
</script>
<style>
a{text-decoration: none;}
#selector img,#play_list img{width:120px; border:1px; }
</style>
</head>
<body>
<div id="selector" style="overflow:hidden; width:120px;white-space:nowrap; position:absolute;Z-index:100"></div>
<br><br><br><br><br><br>
<div id="play_list">
                        <a href="http://koyoz.com/1.jpg">
                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/1.jpg" alt="相恋9年尔冬升再婚娶相恋9年女友" />
                        </a>

                        <a href="http://koyoz.com/2.jpg">

                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/2.jpg" alt="恋情变贤周海媚公开6年恋情变贤妇" />
                        </a>

                        <a href="http://koyoz.com/3.jpg">
                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/3.jpg" alt="为啥这么“熊猫”阿宝为啥这么红？" />
                        </a>

                        <a href="http://koyoz.com/4.jpg">
                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/4.jpg" alt="男友被捕安妮-海瑟薇前男友被捕" />
                        </a>

                        <a href="http://koyoz.com/5.jpg">

                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/5.jpg" alt="开价一亿天后王菲“复出”开价一亿" />
                        </a>

                        <a href="http://koyoz.com/6.jpg">
                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/6.jpg" alt="赞郑伊健阿Sa赞郑伊健“保存”得好" />
                        </a>

                        <a href="http://koyoz.com/7.jpg">
                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/7.jpg" alt="死跑龙套北影演员：甘当‘死跑龙套的’" />
                        </a>

                        <a href="http://koyoz.com/8.jpg">

                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/8.jpg" alt="潘玮柏死潘玮柏死盯辣妹脱衣解带" />
                        </a>

                        <a href="http://koyoz.com/9.jpg">
                            <img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/9.jpg" alt="张曼玉分尔冬升深爱张曼玉分手发呆" />
                        </a>

                </div>

</body>
</html>

【jQuery】 菜单滑动特效

【jQuery】菜单滑动特效