• jQuery之图片提示效果


    目标:

    我们的目标是实现鼠标在图片上移动的时候,可以看到大图展示和超链接自带的提示。

    实现具体步骤如下:

    1. 当鼠标滑入图片超链接,创建一个<div>元素,内容为插入的图片及其title属性的值;
    2. 将创建的元素追加到文档中;
    3. 为元素设置x、y坐标,使其显示 在鼠标位置的旁边;
    4. 当鼠标滑出图片超链接时,移除<div>元素。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接提示图片</title>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <style>
            #tooltip{
                position:absolute;
                border:1px solid #ccc;
                background:#333;
                padding:2px;
                display:none;
                color:#fff;
            }
        </style>
    </head>
    <body>
    <h3 class="title">超链接提示图片</h3>
    <div class="small">
        <a href="../images/炊烟.jpg" class="tooltip" title="炊烟"><img class="current" src="../images/炊烟.jpg" width="128px" alt="水天一线" /></a>
        <a href="../images/水天一线.jpg" class="tooltip" title="水天一线"><img src="../images/水天一线.jpg" width="128px" alt="水天一线" /></a>
        <a href="../images/窗外人生.jpg" class="tooltip" title="窗外人生"><img src="../images/窗外人生.jpg" width="128px" alt="水天一线" /></a>
        <a href="../images/路3.jpg" class="tooltip" title="路3"><img src="../images/路3.jpg" width="128px" alt="水天一线" /></a>
        <a href="../images/水天一线.jpg" class="tooltip" title="水天一线"><img src="../images/水天一线.jpg" width="128px" alt="水天一线" /></a>
    </div>
    
    </body>
    <script type="text/javascript">
    
        $(function(){
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function(e){
                this.myTitle = this.title;
                this.title = "";
                var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
                var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt=''/>"+imgTitle+"</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>
    </html>

    注意事项:

    1. 为了防止自带提示的干扰,添加新属性的同时清空原属性;
    2. 根据鼠标和提示框的位置,给个合适的初值更利于交互;
    3. 为了提示效果可以随鼠标一起动,添加mousemove事件是非常必要的。

    总结:

    jQuery确实非常方便好用,简简单单用几个DOM方法就可以实现一个很好的交互效果。毕竟其设计初衷就是write less, do more. 关于其缺点还得在后续的使用中慢慢去对比发现。

  • 相关阅读:
    mongodb单机搭建
    zeus部署
    hive单机部署
    datax部署
    hadoop/hbase/hive单机扩增slave
    读取Jar中的json文件
    Mybatis 一对多 简单映射配置
    java/kotlin 读取文件、写入文件
    ES6中Json、String、Map、Object之间的转换
    java 客户端发起http请求2
  • 原文地址:https://www.cnblogs.com/markniefeng/p/10561862.html
Copyright © 2020-2023  润新知