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>

    图片省略。

  • 相关阅读:
    c语言cgi笔记
    End of script output before headers错误解决方法
    我的树莓派3配置脚本
    Qt学习(4)
    Qt学习(3)
    Qt学习(2)
    Qt学习(1)
    C++ Primer中文版(第五版)——第六章 函数
    C++ 11 ----Lambda表达式
    Java SPI 源码解析
  • 原文地址:https://www.cnblogs.com/web-leader/p/4220957.html
Copyright © 2011-2022 走看看