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>

  • 相关阅读:
    (转载)C#如何在任务管理器中不显示指定的窗体
    Windows上配置Mask R-CNN及运行示例demo.ipynb
    如何选择普通索引和唯一索引?
    relay(跳板机)搭建
    javascript 9x9乘法口诀表
    canvas画布爆炸
    Chrome Network Timing 解释
    JavaScript中对数组的定义
    jquery each 和 map 区别
    css 兼容性转换网站
  • 原文地址:https://www.cnblogs.com/wangjiangze/p/2152034.html
Copyright © 2011-2022 走看看