原生Java脚本语言实现的简单放大镜效果示例

本文实例讲述了原生Java脚本语言实现的简单放大镜效果。分享给大家供大家参考，具体如下：

原理：其实所谓的放大就是准备两张一样的图片，除大小不一样。鼠标移动到不同位置，将会显示大图片对应的图片内容。

完整代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题放大镜效果/title/head body div id=' wrap ' style=' position : relative；宽度： 900像素；margin: 0自动文本对齐：中心；div id=' small IMg ' style=' width : 400 px；高度： 400像素；相对位置：z-index : 1；img src=' http 3360 small。jpg ' style=' width : 400 px高度： 400像素；/span id=' filter ' style=' width : 200 px；高度： 200像素；背景-颜色：蓝色；opacity: 0.1绝对位置：top : 0；左： 0；z-index : 2；光标：移动；显示器：无；span/div div id=' BigIMg ' style=' width : 400 px；高度： 400像素；飞越：隐藏；绝对位置：right : 0pxtop : 0；显示器：无；img src=' http :大。jpg ' style=' width : 800 px高度：800 px绝对位置：左： 0；top : 0；/div /div脚本类型=' text/JavaScript ' var filter=document。getelementbyid('筛选器')；var small img=文档。getelementbyid(' small img ')；var big img=文档。getelementbyid(' big img ')；var wrap=文档。getelementbyid(' wrap ')；var largeIMGs=BigIMG。GetElementsBytagname(' IMG ')[0]；小型IMg。onmouseover=function(){ BigIMg。风格。display=' inline-block '；过滤器。风格。display=' inline-block '；}小型img。onmousemove=function(event){ var event=event | | window。事件；var鼠标左键=事件。客户端包装。offsetleftvar鼠标顶部=事件。客户服务。偏移顶部；var left=mouseleftsmallImg.offsetWidth/4?0: mouseleftssmallimg。* 3/4的偏移量？smallimg。偏移量为/2:(mouseleft-filter。偏移量为/2)；var top=mousetopsmallImg.offsetHeight/4?0:mousetopsmallImg.offsetHeight右侧右侧*3/4?小型img。偏移心/2:(鼠标顶部过滤器。偏移量为/2)；过滤器。风格。left=left ' px过滤器。风格。top=top“px”；大的。风格。left='-' left * bigimg。offsetwith/smallimg。带有“px”的偏移量；大的。风格。top='-' top *大img。偏置热量/小img。偏移热量“px”；} smolimg。onmouseout=function(){ BigIMg。风格。显示='无'；过滤器。风格。显示='无'；}/脚本/正文/html运行效果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript事件相关操作与技巧大全》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。