原生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脚本语言程序设计有所帮助。
版权声明:原生Java脚本语言实现的简单放大镜效果示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。