简单背景图片，鼠标移动特效

来源：互联网发布：斯诺克最新过百数据编辑：程序博客网时间：2024/05/21 00:55

<html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title></title>    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>    <style type="text/css">    #image{          height: 1000px;          width: 60%;           border: 1px solid red;        }    </style>    <script type="text/javascript">    $(function(){/*接受鼠标位置,处理后,赋值给背景图片*/    var x,y;    $("#image").mousemove(function(e){    $("#text").text(e.pageX+" "+e.pageY);    x=-e.pageX/20;    y=-e.pageY/20;    var c=x+"px "+y+"px";    $("#image").css('background-position',c);    })    })        </script>    <style type="text/css">    #image{    background-image: url(img/5.jpg);    background-position: -100px -100px;    background-size: 110% 110%;    }    </style></head><body>      <div id="image">               </div></body></html>

阅读全文

0 0