教程集 > jQuery > jquery 教程 > 正文 js放大镜

js放大镜

发布时间：2023-12-19 编辑：jiaochengji.com

教程集为您提供js放大镜等资源，欢迎您收藏本站，我们将为您提供最新的js放大镜资源

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html><head><title>10</title>  <meta http-equiv="imagetoolbar" content="no">  <style type="text/css">  	body {  		background: #222;  		overflow: hidden;  		left: 0;  		top: 0;  		width: 100%;  		height: 100%;  		margin: 0;  		padding: 0;  	}  	#screen span {  		position:absolute;  		overflow:hidden;  		border:#FFF solid 1px;  		background:#FFF;  	}  	#screen img{  		position:absolute;  		left:-32px;  		top:-32px;  		cursor: pointer;  	}  	#caption, #title{  		color: #FFF;  		font-family: georgia, 'times new roman', times, veronica, serif;  		font-size: 1em;  		text-align: center;  	}  	#caption b {  		font-size: 2em;  	}    </style>    <script type="text/javascript">  </script></head><body>    <div style="position: absolute; left: 50%; top: 50%;">  	<div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div>  	<div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div>  	<div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">  		<span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="" alt=""></span>  		<span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  		<span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="" alt=""></span>  	</div>  	<div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div>  </div>    <script type="text/javascript">  </script>      </body></html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
Javascript图片放大镜的实例分析
 基于jquery的放大镜效果
 js放大镜效果一例
 关于Jqzoom的使用心得 jquery放大镜效果插件
 JS放大镜效果(简洁实用的放大镜效果)
jQuery图片放大镜插件 magnifier
jQuery网页放大镜插件 Apple Zoom
电商网站上常用的js放大镜效果(京东商城的js放大镜代码)
jQuery放大镜插件 AnythingZoomer
jQuery 图片放大镜效果插件jQZoom的用法举例

上一篇：状态栏跑马灯代码下一篇：Javascript 自定义多级右键菜单效果代码

[关闭]

js放大镜

最近更新

浏览排行