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>

  • 相关阅读:
    Android MP3录音实现
    Android应用中MVP开发模式
    ExpandableListView getChildView 不执行,不显示子列表
    Javascript中apply、call、bind
    baidu地图:实现多点连线渲染
    经纬度纠偏的一些经验
    Spark:spark df插入hive表后小文件数量多,如何合并?
    Java-Maven(七):Eclipse中Maven依赖、聚合、继承特性
    Java-Maven(六):Eclipse中Maven插件的命令操作
    Java-Maven(五):Eclipse&Maven下创建java工程&web工程
  • 原文地址:https://www.cnblogs.com/wangjiangze/p/2152034.html
Copyright © 2011-2022 走看看