zoukankan      html  css  js  c++  java

  • jquery 图片放大镜例子

    <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{
        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;
        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>
  • 相关阅读:
    LeetCode OJ 112. Path Sum
    LeetCode OJ 226. Invert Binary Tree
    LeetCode OJ 100. Same Tree
    LeetCode OJ 104. Maximum Depth of Binary Tree
    LeetCode OJ 111. Minimum Depth of Binary Tree
    LeetCode OJ 110. Balanced Binary Tree
    apache-jmeter-3.1的简单压力测试使用方法（下载和安装）
    JMeter入门教程
    CentOS6（CentOS7）设置静态IP 并且 能够上网
    分享好文：分享我在阿里8年，是如何一步一步走向架构师的
  • 原文地址：https://www.cnblogs.com/lizhao/p/1990429.html
Copyright © 2011-2022 走看看