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>
  • 相关阅读:
    免费webservice接口
    sql server按符号截取字符串
    javaweb项目部署到tomcat服务器
    sql server导出数据结构
    Mabits简单应用 2017.8.3
    部署项目到tomcat步骤参考如下 2017.7.10
    没事多看文档 2017.7.8
    ssh商城源码 2017.6.30
    axios的详细用法以及后端接口代理
    用Vue来实现音乐播放器（八）：自动轮播图啊
  • 原文地址：https://www.cnblogs.com/lizhao/p/1990429.html
Copyright © 2011-2022 走看看