• 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>

  • 相关阅读:
    Oracle存储过程格式
    Parallel并行运算实例
    唐让的领航少年
    株洲县阳光三农网
    株洲县招商网
    利用css新属性appearance优化select下拉框
    谈谈我的出差感想
    颜色表及html代码
    jquery中DOM的操作方法
    HTML DOM的nodeName,nodeValue,nodeType介绍
  • 原文地址:https://www.cnblogs.com/wangjiangze/p/2152034.html
Copyright © 2020-2023  润新知