原生射流研究…写的放大镜效果

我的大体思路是：时时监听鼠标的坐标，当鼠标移动时，透明层随着鼠标移动，大图片相对透明层的移动而移动。不废话了，看代码。复制代码代码如下：文档类型头元字符集='utf-8 '标题放大镜/title meta name=' Keywords ' content=' meta name=' Description ' content=' style type=' text/CSS '/*重置{ */html { color : # 000；背景# fff} body，div { padd :0 margin :0 } img { border : none }/* }重置*/.外部{宽度：200像素高度：150 px位置：相对；余量：20px汽车；} .内部{宽度：80像素高度：60 px背景技术# f55位置：绝对；opa city 33600.5 filter : alpha(不透明度=50);左指针：0点：0光标：点指针；} .aa { width:320px高度：240 px位置：相对；border:1px红色固体；余量：20px汽车；飞越：隐藏；} .imgs { position:absolute}。外部img { width:200px高度：150 px}/style/head body div class=' outer ' id=' outer ' img src=' http : images/pobabyb。gif ' alt=' pobaby '小图/div class=' inner ' id=' inner '/div/div class=' aa ' id=' aa ' div class=' imgs ' id=' imgs ' img src=' http : images/pobabyb。gif ' alt=' pobaby '大图//div /div /div脚本类型=' text/JavaScript ' var outer=document。getelementbyid(' outer ')；var inner=文档。getelementbyid(' inner ')；var aa=文档。getelementbyid(' aa ')；var imgs=文档。getelementbyid(' imgs ')；var x，y，n=假；inner.onmousedown=test1//如果把内部的改为文件，鼠标在窗口任意位置点击，图片都会跟随document.onmousemove=test2//文档如果改为外部，鼠标在外面的内才起作用document . onmouseup=test 3 function test 1(事件){//鼠标按下时方法var事件=事件| | window.event//调试兼容，各个浏览器认识事件有差别n=真；//当n=真(n的值可随便设定)时，假定为鼠标按下的事件x=事件。client x-内部。offsetleft//鼠标在透明层的相对横坐标=鼠标坐标-方块左边距y=事件。内心的客户。偏移顶部；//鼠标在透明层的相对纵坐标=鼠标坐标-方块上边距}功能测试2(事件){//鼠标移动时方法var event=event | | window . event if(n==true){////////鼠标移动范围内心。风格。左=事件。客户端x-x ' px内心。风格。top=事件。client y-y ' px；////////图片移动范围imgs。风格。left=-4 * ParSeint(内部。风格。左)“px”；imgs。风格。top=-4 * ParSeint(内部。风格。top)' px '；////////////////////////////限定鼠标移动的范围if(ParSeint)(内部。风格。左)0){内部。风格。left=0 ' px} if(ParSeint(内部。风格。top)0){ inner。风格。top=0 ' px} if(ParSeint(内部。风格。左)外侧。客户端宽度-内部。客户端宽度){内部。风格。左侧=外侧。客户端宽度-内部。客户端宽度' px '；} if(ParSeint(内部。风格。顶部)外部。客户端高度-内部。客户端高度){内部。风格。顶部=外部。客户端高度-内部。客户端高度“px”；} //////////////////////////////限定图片移动的范围if(ParSeint(imgs。风格。左)0){ imgs。风格。left=0 ' px} if(ParSeint(imgs。风格。top)0){ imgs。风格。top=0 ' px} if(Parsent(imgs。风格。左)-4 *(外部。客户端宽度-内部。客户端宽度){ imgs。风格。left=-4 * Parsent(外部。客户端宽度-内部。客户端宽度)' px '；} if(parsent(imgs。风格。top)-4 *(外部。客户端高度-内部。客户端高度){ imgs。风格。top=-4 * parsent(外部。客户端高度-内部。客户端高度)' px '；} } } function test3(){//鼠标松开时方法n=假；}/脚本/正文/html