当前位置:首页 > 网页特效 > 图片特效 >

精美图片放大镜插件纯JS/CSS制作

时间:2013-08-20 14:25 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。

纯JS/CSS制作的精美图片放大镜插件

<!doctype html>
<html>
<head>
 <base href="http://www.etherdream.com/FunnyScript/Magnifier/" />
 <meta charset="utf-8"/>
 <title>Magnifier Demo</title>
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 <style>
  .test
  {
   margin: 100px 0 0 200px;
  }
  
  .test a
  {
   font-size: 14px;
   color: #404040;
  }
  
  .test img
  {
   border: #4b4b4b 1px solid;
  }
 </style>
</head>


<body>
 <script src="Magnifier-min.js"></script>
 <pre>源码:<a href="magnifier.js">magnifier.js</a></pre>


 <div class="test">
  <h3><a target="_blank" href="www.codesocang.com">Picture I</a></h3>
  
  <img src="http://js.alixixi.com/test/pic1.jpg" bigsrc="test/pic1-big.jpg" />
 </div>




 <div class="test">
  <h3><a target="_blank" href="www.codesocang.com">Picture II</a></h3>
  
  <img src="http://js.alixixi.com/test/pic2.jpg" bigsrc="test/pic2-big.jpg" />
 </div>


 <div class="test">
  <h3><a target="_blank" href="www.iseedy.com">Picture III</a></h3>
  
  <img src="http://js.alixixi.com/test/pic3.jpg" bigsrc="test/pic3-big.jpg" />
 </div>
</body>
</html>

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-pic/5458.html

图片特效下载排行

最新文章