图片放大镜(支持数量/位置/倍数等配置)

发布时间：2018-09-03 16:18:06 所属栏目：运营来源：站长网

导读：猛火网(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>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要