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>

    图片省略。

  • 相关阅读:
    用Shell判断字符串包含关系
    shell命令调用http接口(curl方式)
    shell脚本实现发送信息到钉钉
    功能测试特殊字符处理总结
    Java_Swing实现小球沿正弦曲线运动的代码
    Python迁移MySQL数据到MongoDB脚本
    1. WP8.1学习笔记
    0. WP8.1学习笔记
    小练习--低仿系统计算器
    C#字符串题目
  • 原文地址:https://www.cnblogs.com/web-leader/p/4220957.html
Copyright © 2011-2022 走看看