jq悬浮效果

如有不明白的地方欢迎加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.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
            <img alt="" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg" 
                shouimg="http://avatar.csdn.net/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>

悬浮效果如下:


©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值