代码改变世界

jquery 图片放大镜例子

2010-12-17 16:02  smat  阅读(257)  评论(0)  编辑  收藏  举报

<mce:script type="text/javascript"><!--
$(function(){
  var x=10;
  var y=10;
  $("a.tooltip").mouseover(function(e){
    var tooltip="<div id='tooltip'><img src=""+this.href+"" mce_src=""+this.href+"" alt='商品預覽圖'/></div>";
    $("body").append(tooltip);
    $("#tooltip").css({
      "top":(e.pageY+y)+"px","left":(e.pageX+x)+"px","position":"absolute","border":"1px solid #ccc","background":"#FFF"
    }).show("fast");
  }).mouseout(function(){
    $("#tooltip").remove();
  }).mousemove(function(e){
    $("#tooltip").css({
      "top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"
  });
  });
});
// --></mce:script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:script src="http://www.aixq.com/js/jquery.js" mce_src="http://www.aixq.com/js/jquery.js" type="text/javascript"></mce:script>
<mce:style type="text/css"><!--
ul{
    list-style: none;
}
.picdes{
    margin:8px 0;
    overflow:auto;
}
ul.picdes li{
    width:300px;
    height:110px;
    float:left;
    margin:5px;
    border:1px solid #ccc;
    padding:5px;
    line-height:1.8em;
}
ul.picdes li a img{
    float:left;
    margin:5px;
    width:100px;
    height:100px;
    border:none;
}
--></mce:style><style type="text/css" mce_bogus="1">ul{
    list-style: none;
}
.picdes{
    margin:8px 0;
    overflow:auto;
}
ul.picdes li{
    width:300px;
    height:110px;
    float:left;
    margin:5px;
    border:1px solid #ccc;
    padding:5px;
    line-height:1.8em;
}
ul.picdes li a img{
    float:left;
    margin:5px;
    width:100px;
    height:100px;
    border:none;
}</style>
</head>
<body style="position:relative;" mce_style="position:relative;">
<ul class="picdes">
      <li><a href="images/00005.jpg" mce_href="images/00005.jpg" class="tooltip"><img src="images/00005.jpg" mce_src="images/00005.jpg" /></a>
       0902傳票插(彎型) 手牌<br />
        建議售價：<span class="fontred">25元/個</span><br />
        條碼：4711734090200<br />
        貨號：1800100005 </li>
     <li><a href="images/00005.jpg" mce_href="images/00005.jpg" class="tooltip"><img src="images/00005.jpg" mce_src="images/00005.jpg" /></a>
       0902傳票插(彎型) 手牌<br />
        建議售價：<span class="fontred">25元/個</span><br />
        條碼：4711734090200<br />
        貨號：1800100005 </li>
    </ul>
<mce:script type="text/javascript"><!--
$(function(){
    var x=10;
    var y=10;
    $("a.tooltip").mouseover(function(e){
        var tooltip="<div id='tooltip'><img src=""+this.href+"" mce_src=""+this.href+"" alt='商品預覽圖'/></div>";
        $("body").append(tooltip);
        $("#tooltip").css({
            "top":(e.pageY+y)+"px","left":(e.pageX+x)+"px","position":"absolute","border":"1px solid #ccc","background":"#FFF"
        }).show("fast");
    }).mouseout(function(){
        $("#tooltip").remove();
    }).mousemove(function(e){
        $("#tooltip").css({
            "top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"
    });
    });
});
// --></mce:script>
</body>
</html>