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

浏览数：22 / 时间：2015年06月09日

<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实现图片内容的放大提示使用jquery实现图片内容的放大提示