JS图片放大查看效果!
2008-04-15 11:26
471 查看
http://bbs.blueidea.com/thread-2812683-1-1.html
http://bbs.blueidea.com/thread-2814846-1-1.html
应用效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Images zoom-out view sample. Brought to you by 斩梦人.天天
QQ:22062019</title>
</script>
</style>
</head>
<body>
Some text here<table cellpadding="0" cellspacing="0" border="2" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td width="520" align="center">
<div id="picshow">
<img id="bpic" onload="loaddone(tempo)"/>
<div id="loading">
<img src="http://www.whoj.net/images/loading.gif" border="0"/> Loading
<div class="text">Please wait </div>
</div>
</td>
<td>
<div class="picbox" show="show"><!--设置show显示默认图片-->
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b1.jpg" src="http://www.whoj.net/images/s1.jpg" onmousemove="move(event,this,0)" dLeft="700" dTop="300" title="设置标签属性show='show'显示默认图片,设置dLeft,dTop定义默认偏移量"/><!--src:小图,lowsrc:大图,showW/showH:可设置预览窗大小-->
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b2.jpg" src="http://www.whoj.net/images/s2.jpg" onmousemove="move(event,this,0)" showW="200" showH="200" title="可自定义预览图大小"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b4.jpg" src="http://www.whoj.net/images/s4.jpg" width="302" onmousemove="move(event,this,0)" title="小图可以按比例放大"/><!--这里可以重新设置小图大小,尽量与大图比例保持一致-->
</div>
</td>
<td>In table
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b3.jpg" src="http://www.whoj.net/images/s3.jpg" width="60" onmousemove="move(event,this,0)" title="也可以按比例缩小"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b3.jpg" src="http://www.whoj.net/images/s3.jpg" onmousemove="move(event,this,0)" showW="500" showH="200" title="可以嵌套在table中"/>
</div>
</td>
</tr>
</table>
Out of table
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b2.jpg" src="http://www.whoj.net/images/s2.jpg" onmousemove="move(event,this,0)" title="放在table外面也没有问题"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/s4.jpg" src="http://www.whoj.net/images/s4.jpg" onmousemove="move(event,this,0)" showW="1000" showH="1000" title="showW='1000' showH='1000',如果指定预览图比原图大,则使用原图大小" />
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b5.jpg" src="http://www.whoj.net/images/s5.jpg" onmousemove="move(event,this,0)" showW="160" showH="320" title="代码较上一版本健壮,能在IE,FF下稳定工作,基本支持OP,欢迎大家帮助测试!"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b5.jpg" src="http://www.whoj.net/images/s5.jpg" onmousemove="move(event,this,0)" width="500" height="112" title="即使没有按比例拉伸,也可以正常工作"/>
</div>
</body>
</html>
http://bbs.blueidea.com/thread-2814846-1-1.html
应用效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Images zoom-out view sample. Brought to you by 斩梦人.天天
QQ:22062019</title>
</script>
</style>
</head>
<body>
Some text here<table cellpadding="0" cellspacing="0" border="2" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td width="520" align="center">
<div id="picshow">
<img id="bpic" onload="loaddone(tempo)"/>
<div id="loading">
<img src="http://www.whoj.net/images/loading.gif" border="0"/> Loading
<div class="text">Please wait </div>
</div>
</td>
<td>
<div class="picbox" show="show"><!--设置show显示默认图片-->
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b1.jpg" src="http://www.whoj.net/images/s1.jpg" onmousemove="move(event,this,0)" dLeft="700" dTop="300" title="设置标签属性show='show'显示默认图片,设置dLeft,dTop定义默认偏移量"/><!--src:小图,lowsrc:大图,showW/showH:可设置预览窗大小-->
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b2.jpg" src="http://www.whoj.net/images/s2.jpg" onmousemove="move(event,this,0)" showW="200" showH="200" title="可自定义预览图大小"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b4.jpg" src="http://www.whoj.net/images/s4.jpg" width="302" onmousemove="move(event,this,0)" title="小图可以按比例放大"/><!--这里可以重新设置小图大小,尽量与大图比例保持一致-->
</div>
</td>
<td>In table
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b3.jpg" src="http://www.whoj.net/images/s3.jpg" width="60" onmousemove="move(event,this,0)" title="也可以按比例缩小"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b3.jpg" src="http://www.whoj.net/images/s3.jpg" onmousemove="move(event,this,0)" showW="500" showH="200" title="可以嵌套在table中"/>
</div>
</td>
</tr>
</table>
Out of table
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b2.jpg" src="http://www.whoj.net/images/s2.jpg" onmousemove="move(event,this,0)" title="放在table外面也没有问题"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/s4.jpg" src="http://www.whoj.net/images/s4.jpg" onmousemove="move(event,this,0)" showW="1000" showH="1000" title="showW='1000' showH='1000',如果指定预览图比原图大,则使用原图大小" />
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b5.jpg" src="http://www.whoj.net/images/s5.jpg" onmousemove="move(event,this,0)" showW="160" showH="320" title="代码较上一版本健壮,能在IE,FF下稳定工作,基本支持OP,欢迎大家帮助测试!"/>
</div>
<div class="picbox">
<div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
<img class="spic" lowsrc="http://www.whoj.net/images/b5.jpg" src="http://www.whoj.net/images/s5.jpg" onmousemove="move(event,this,0)" width="500" height="112" title="即使没有按比例拉伸,也可以正常工作"/>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS图片loading及放大查看效果(兼容IE,FF)
- JS图片放大查看效果! (代码全部重构,兼容IE,FF,OP,简单,健壮)
- JS图片loading及放大查看效果(兼容IE,FF)
- js放大镜效果。类似于淘宝产品内页多图展示代码，鼠标移到图片上有放大效果，方便查看产品细节，此代码适合网店产品展示，
- 兼容IE,FF的JS图片loading及放大查看效果
- JS图片loading及放大查看效果(兼容IE,FF)
- 原生js实现图片放大缩小计时器效果
- 原创JS图片放大效果(二) — 多图点击切换，鼠标移上放大 代码很美,步履不停
- js实现简单的单击图片放大功能---仿新浪微博图片放大效果
- js图片放大效果
- JS图片放大效果简单实现代码
- 收缩与放大图片效果（JS+CSS）
- Android 高仿微信朋友圈动态支持双击手势放大并滑动查看图片效果
- JS与CSS3实现图片响应鼠标移动放大效果示例
- js如何制作放大效果的图片
- JS实现鼠标移动到缩略图显示大图的图片放大效果
- JS鼠标悬停经过图片由中心点逐渐放大效果
- 查看商品图片，鼠标悬浮图片放大js实现
- js 图片放大缩小（动画效果）
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题