zoukankan      html  css  js  c++  java
  • jQuery制作图片提示效果

    需求说明
    鼠标移动到小图上时,跟随鼠标可以显示出对应大图
    当鼠标在小图上移动时,大图也会跟随鼠标移动位置
    鼠标离开小图时,显示的大图消失

     html

     
    <!DOCTYPE html>
    <html lang="en">
        <head>    
        <meta charset="UTF-8">    
        <title>超链接提示图片</title>    
        <script type="text/javascript" src="js/jquery-1.12.4.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/1.jpg" class="tooltip" title="手机"><img class="current" src="images/1_bigger.jpg" width="128px" alt="胡歌" /></a>    
            <a href="images/2.jpg" class="tooltip" title="手机"><img src="images/2_bigger.jpg" width="128px" alt="胡歌" /></a>    
            <a href="images/3.jpg" class="tooltip" title="手机"><img src="images/3_bigger.jpg" width="128px" alt="胡歌" /></a>    
            </div> 
        </body>
        <script src="js/lianxi.js"></script>
            <script src="js/jquery-1.12.4.js"></script>
        </html>
     

    js(jquery-1.12.4.js

     
    $(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",
                        });       
                    });   
            }) 
     
  • 相关阅读:
    git fetch 和git pull 的差别
    解决npm install安装慢的问题
    Git本地分支和远程分支关联
    phalapi 2.14 使用(一)增加顶级命名空间、调整返回结构字段
    vue-element-template实战(五) 获取后端路由表动态生成权限
    vue-element-template实战(四)使用mock数据,新增用户管理界面
    使用phalapi 2.14版本的问题及解决办法
    关于vue
    git详细操作
    三次握手四次挥手理解
  • 原文地址:https://www.cnblogs.com/duan-YF/p/13232156.html
Copyright © 2011-2022 走看看