很酷的JavaScript圖片放大效果

2024-09-05 12:21:10

字體：大中小

來源：轉載

供稿：網友

非常酷的一個JavaScript圖片放大效果，不信就運行一下試試，相信你會喜歡的。

<html><head><title>JS圖片放大特效</title><meta http-equiv="imagetoolbar" content="no"><style type="text/css">body {background: #000;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   class="70qarhlowxag"   id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div><div   class="70qarhlowxag"   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   class="70qarhlowxag"   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="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" alt=""></span><span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" alt=""></span><span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" alt=""></span><span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" alt=""></span><span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" alt=""></span><span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" alt=""></span><span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" alt=""></span><span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" alt=""></span><span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" alt=""></span><span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" alt=""></span><span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" alt=""></span><span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" alt=""></span><span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" alt=""></span><span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" alt=""></span><span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" alt=""></span><span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" alt=""></SPAN>
</div>
</div>
<div   id="70qarhlowxag"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="70qarhlowxag"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557822.html'>CSS給圖片加上鼠標經過換色的雙邊框</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557824.html'>帶倒影的圖片切換效果（類似FLASH）</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="70qarhlowxag"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流