zoukankan      html  css  js  c++  java
  • jquery div 跟随 鼠标 移动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">

    <head>

    </head>

    <style>

    .tuku{ margin:0 auto;}

    a{ color:red; text-decoration:none;}

    .imgsrc{border:1px solid #cccccc;  background-color:#ffffff; position:absolute;z-index:1000;}

    </style>

    <script src="jquery.min.js"></script>

    <script>

        $(document).ready(function(){

            $("img").mouseover(function(e){

                var xx = e.originalEvent.x || e.originalEvent.layerX || 0;

                var yy = e.originalEvent.y || e.originalEvent.layerY || 0;

                var srcimg = $(this).attr('src');

                $("#alt").attr("src",srcimg);

                $(".imgsrc").css("left",50 + xx + "px");

                $(".imgsrc").css("top",yy + "px");

                $(".imgsrc").css("display","block");

            });

            $("img").mousemove(function(e){

                var xx = e.originalEvent.x || e.originalEvent.layerX || 0;

                var yy = e.originalEvent.y || e.originalEvent.layerY || 0;

                var srcimg = $(this).attr('src');

                $("#alt").attr("src",srcimg);

                $(".imgsrc").css("left",50 + xx + "px");

                $(".imgsrc").css("top",yy + "px");

                $(".imgsrc").css("display","block");

            });

            $("img").mouseout(function(){

                $(".imgsrc").css("display","none");

            });

        });

    </script>

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <div class="imgsrc" style="display:none"><img src="" id='alt'></div>

    <tr>

        <td><table width="" border="0" cellspacing="0" cellpadding="0">

          <tr>

            <td colspan="3">&nbsp;</td>

            </tr>

          <tr>

            <td width="" align="left" valign="middle">&nbsp;</td>

            <!--<td width="" align="left" valign="middle"><label>

              <input type="checkbox" name="fllbqx" id="fllbqx" />

            </label>&nbsp;&nbsp;全选&nbsp;&nbsp;</td>-->

            <td width="" align="left" valign="middle">总计<?php echo $total;?>个记录

    &nbsp;&nbsp;&nbsp;&nbsp;分为<?php echo $total_page;?>页

    &nbsp;&nbsp;&nbsp;&nbsp;当前第<?php echo $page;?>页

    &nbsp;&nbsp;&nbsp;&nbsp;<a href="?m=product&c=product_manage&a=tuku&page=1&product_id=<?php echo $product_id;?>&product_name=<?php echo $product_name;?>&dosubmit=1">第一页</a>

    &nbsp;&nbsp;&nbsp;&nbsp;

    <?php if($page-1 > 0){ ?>

    <a href="?m=product&c=product_manage&a=tuku&page=<?php echo $page-1;?>&product_id=<?php echo $product_id;?>&product_name=<?php echo $product_name;?>&dosubmit=1">上一页</a>

    <?php }else{echo '上一页';}?>

    &nbsp;&nbsp;&nbsp;&nbsp;

    <?php if($page+1 <= $total_page){ ?>

    <a href="?m=product&c=product_manage&a=tuku&page=<?php echo $page+1;?>&product_id=<?php echo $product_id;?>&product_name=<?php echo $product_name;?>&dosubmit=1">下一页</a>

    <?php }else{echo '下一页';}?>

    &nbsp;&nbsp;&nbsp;&nbsp;<a href="?m=product&c=product_manage&a=tuku&page=<?php echo $total_page;?>&product_id=<?php echo $product_id;?>&product_name=<?php echo $product_name;?>&dosubmit=1">最末页</a></td>

          </tr>

        </table></td>

    </tr>

    <?php } ?>

    </body>

    </html>

  • 相关阅读:
    【测试技术】ant在测试中的使用@文件以及目录的读写删和复制
    【测试环境】java|jdk|ant
    【测试理论】入行7年,一点感悟
    home_work picture
    linux shell awk 语法
    linux shell 指令 诸如-d, -f, -e之类的判断表达式
    软件测试工作这两年来,我丢失了什么?(一)
    软件测试工作近两年来的感想和未来规划(一)
    用Python进行SQLite数据库操作
    python selenium xpath定位时使用变量
  • 原文地址:https://www.cnblogs.com/wangjiangze/p/2152034.html
Copyright © 2011-2022 走看看