使用jQuery实现图片内容的放大(提示)

时间：2015-04-19 18:03:10 阅读：169 评论：0 收藏：0 [点我收藏+]

<script type="text/javascript">

$(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>

标签：使用jquery实现图片内容的放大提示

原文地址：http://blog.csdn.net/u013803262/article/details/45130027

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行