现在的位置: 首页 > 综合 > 正文

jquery div 跟随 鼠标 移动

2013年02月18日 ⁄ 综合 ⁄ 共 2756字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.