图片放大镜(支持数目/位置/倍数等设置)

发布时间：2018-09-03 11:11 所属栏目：30 来源：站长网

导读：烈火网(LieHuo.Net)教程之前小编看过好多放大镜效果，并且我们在烈火网的教程中也提到过此类例子，如《JavaScript 移动焦点放大图片局部效果代码》、《各类CMS通用鼠标触发放大图片效果》等，今天我们再来看一个功能更加强大的例子，可以设置部分图片和网

　　烈火网(LieHuo.Net)教程之前小编看过好多放大镜效果，并且我们在烈火网的教程中也提到过此类例子，如《JavaScript 移动焦点放大图片局部效果代码》、《各类CMS通用“鼠标触发”放大图片效果》等，今天我们再来看一个功能更加强大的例子，可以设置部分图片和网页的全部图片放大，同时也可以指定放大显示的位置、放大倍数等等。

　　参数意义

　　使用方法

　　目标div:

　　下面是实例代码与运行效果，请选择操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>放大镜效果</title> </head> <body style="width:1000px;margin:0px auto;overflow:hidden;overflow-y:auto"> <p><input type="button" onclick="run1()" value="给页面所有img添加放大效果" /></p> <p><input type="button" onclick="run2()" value="在目标div显示" /><input type="button" onclick="run4()" value="设置横向距离与放大倍数" /></p> <p><input type="button" onclick="run3()" value="在指定位置显示" /><input id="tagetcssdiv" type="text" style="width:500px" value="position:absolute;width:150px;height:150px;left:300px;top:300px;" /> </p> <p> <img src="http://www.veryhuo.com/uploads/userup/0905/2Q452412545.jpg" title="liehuo.net" id="gimg_1" style="width:200px;float:left" /> <div style="float:right;width:200px;height:200px;">目标div:<div id="gdiv_1" style="border:1px red dotted;width:200px;height:200px;position:relative;"></div></div> <div style="clear:both"></div> </p> <p><input type="button" onclick="run5()" value="同时设置多张图片效果" /></p> <p> <img id="gimg_2" src="http://www.veryhuo.com/uploads/userup/0904/0H051211c7.jpg" title="liehuo.net" style="width:100px;margin:5px 100px" /> <img id="gimg_3" src="http://www.veryhuo.com/uploads/allimg/090220/2144550.jpg" title="liehuo.net" style="width:100px;margin:5px 100px" /> <img id="gimg_4" src="http://www.veryhuo.com/uploads/userup/0903/1G226342158.jpg" title="liehuo.net" style="width:100px;margin:5px 100px" /> </p> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）