javascript实例分享---具有立体效果的图片特效

前端技术 2023/08/10 JavaScript

此实例是我一遍学习一边写出来的，希望能够帮到大家，一起学习。效果如图所示：

html代码如下所示：

复制代码 代码如下:

<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
  <head>
    <title>图片浏览工具制作</title>
    <script type=\"text/javascript\" src=\"js/main.js\"></script>
    <link rel=\"stylesheet\" type=\"text/css\"  href = \"style/css.css\">
  </head>
  <body>
  <div id=\"pic_browser\">
      <img class=\"prev\" src=\"images/prev.png\" onclick=\"javascript:jzk.ui.moveImg(-1);\"/>

      <img id=\"img1\" onclick=\"\"/>
      <div class=\"mask3\" onclick=\"javascript:jzk.ui.moveImg(3);\"></div><!-- 增加三级遮罩 -->

      <img id=\"img2\" onclick=\"\"/>
      <div class=\"mask2\" onclick=\"javascript:jzk.ui.moveImg(2);\"></div><!-- 增加二级遮罩 -->

      <img id=\"img3\" onclick=\"\"/>
      <div class=\"mask1\" onclick=\"javascript:jzk.ui.moveImg(1);\"></div><!-- 增加一级遮罩 -->

      <img id=\"img4\" onclick=\"\"/>

      <img id=\"img5\" onclick=\"\"/>
      <div class=\"mask5\" onclick=\"javascript:jzk.ui.moveImg(-1);\"></div><!-- 和mask1一样效果 -->

      <img id=\"img6\" onclick=\"\"/>
      <div class=\"mask6\" onclick=\"javascript:jzk.ui.moveImg(-2);\"></div><!-- 和mask2一样效果 -->

      <img id=\"img7\" onclick=\"\"/>
      <div class=\"mask7\" onclick=\"javascript:jzk.ui.moveImg(-3);\"></div><!-- 和mask3一样效果 -->

      <img class=\"next\" src=\"images/next.png\" onclick=\"javascript:jzk.ui.moveImg(1);\"/>
  </div>
  </body>
</html>

本文地址：https://www.stayed.cn/item/824

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案