jq悬浮效果

最新推荐文章于 2021-06-26 10:03:59 发布

joyhen

最新推荐文章于 2021-06-26 10:03:59 发布

阅读量5.4k

点赞数

分类专栏： HTML 文章标签： jq悬浮效果

本文链接：https://blog.youkuaiyun.com/Joyhen/article/details/8812186

版权

HTML 专栏收录该内容

40 篇文章

订阅专栏

如有不明白的地方欢迎加QQ群14670545 探讨

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        img{ border:none;}
        
        .content{ width:1100px; margin:0 auto;}
        .imglist{ width:1100px;}
        .imglist img{ float:left; margin-right:5px;}
        #HintImg{ position:absolute; padding:0; margin:0; display:none; z-index:999}
    </style>
</head>
<body>
    <div class="content">
        <div style="height:50px;"></div>
        <div class="imglist">
            <img alt="" title="" src="http://avatar.profile.youkuaiyun.com/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.youkuaiyun.com/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.youkuaiyun.com/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.youkuaiyun.com/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.youkuaiyun.com/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.youkuaiyun.com/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.youkuaiyun.com/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.youkuaiyun.com/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.youkuaiyun.com/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.youkuaiyun.com/3/B/4/1_qiqishardge.jpg" />    
        </div>
    </div>
    <div id="HintImg"></div>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".imglist img").hover(function() {
            $("*").stop(); //停止所有正在运行的动画
            var offset = $(this).offset(); //取得事件对象的位置
            var _left = (offset.left + $(this).width() + $("#HintImg").width() < 1100) ? (offset.left + $(this).width()) : (offset.left - $("#HintImg").width());
            $("#HintImg").html('<img alt="" title="" src="' + $(this).attr("shouimg") + '" />').css({ "top": offset.top + "px", "left": _left + "px" }).fadeIn(500);
        }, function() {
            $("#HintImg").hide();
        });
    </script>
</body>

悬浮效果如下: