jQuery 鼠标移入图片显示大图并跟随鼠标移动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            width: 390px;
            height: 220px;
        }
        
        ul li {
            width: 390px;
            height: 220px;
            border: 1px solid orange;
        }
        
        ul li img {
            width: 384px;
            height: 214px;
        }
        
        .opacity_li {
            opacity: 0.5;
        }
        
        div img {
            width: 608px;
            height: 424px;
        }
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function() {
            $("ul li").hover(function() {
                // over
                //鼠标移入当前列透明度为1 其他列为0.5
                //$(this).css("opaacity", "1").siblings("li").addClass("opacity_li");


                var $imgsrc = $(this).find("img").attr("src");
                var $div = "<div><img src='" + $imgsrc + "'/></div>";
                $("body").append($div);
                $("div img").attr("src", $imgsrc);
            }, function() {
                // out
                //鼠标移出的时候把其他列透明度去掉
                //$(this).siblings().removeClass("opacity_li");


                $("div").remove();
            }).mousemove(function(e) {
                $("div").css({
                    position: "absolute",
                    left: e.pageX + 10,
                    top: e.pageY + 10
                }); //设置div绝对定位 坐标就是距离鼠标当前的位置 
            });;
        })
    </script>
</head>

<body>
    <ul>
        <li>
            <img src="images/问奈何.png" alt="" />
        </li>
        <li>
            <img src="images/夏承凛.png" alt="" />
        </li>
        <li>
            <img src="images/怀璧明罪问奈何.png" alt="" />
        </li>
    </ul>
</body>

</html>

View Code

转载于:https://www.cnblogs.com/xiemin-minmin/p/11040324.html

jQuery 鼠标移入图片 显示大图并跟随鼠标移动

猜你喜欢

jQuery 鼠标移入图片显示大图并跟随鼠标移动