zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    NoteExpress 自定义参考文献输出样式
    Gabor学习笔记
    智能电视,谁的电视?谁的智能?
    智能手表的未来:独立还是附属,这是个问题!
    罗技Setpoint控制酷狗等第三方播放器
    Python中pip的SSL异常
    解决ArcPy脚本工具中文乱码问题
    文件夹exe病毒的清理
    WinRAR解压提示压缩包损坏
    网络数据集不能重命名
  • 原文地址:https://www.cnblogs.com/xiemin-minmin/p/11040324.html
Copyright © 2011-2022 走看看