zoukankan      html  css  js  c++  java
  • js控制图片提示(鼠标滑过显示大图片)

    基于jquery

    <head>
    
    <script>
    
    $(function(){
        var x = 10;
        var y = 20;
        $("a.tooltip").mouseover(function(e){
            this.myTitle = this.title;
            this.title = "";    
            var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/></div>"; //创建 div 元素
            $("body").append(tooltip);    //把它追加到文档中                        
            $("#tooltip")
                .css({
                    "top": (e.pageY+y) + "px",
                    "left":  (e.pageX+x)  + "px"
                }).show("fast");      //设置x坐标和y坐标,并且显示
        }).mouseout(function(){
            this.title = this.myTitle;    
            $("#tooltip").remove();     //移除
        }).mousemove(function(e){
            $("#tooltip")
                .css({
                    "top": (e.pageY+y) + "px",
                    "left":  (e.pageX+x)  + "px"
                });
        });
    })
    
    </script>
    
    </head>
    <body>
    
      <ul>
            <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
            <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
            <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
            <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
        </ul>
    
    </body>

    图片省略。

  • 相关阅读:
    ctfhub技能树—信息泄露—备份文件下载—vim缓存
    ctfhub技能树—信息泄露—备份文件下载—bak文件
    ctfhub技能树—信息泄露—备份文件下载—网站源码
    RecyclerView错误
    R.java的生成规则
    各种编译不通过xcode
    Gradle
    xcode如何运行下载的demo工程
    xcode资源管理
    IOS代码片段
  • 原文地址:https://www.cnblogs.com/web-leader/p/4220957.html
Copyright © 2011-2022 走看看