• Page 1 of 1
  • 1
很炫的图片展示js
今天要介绍的是一个很炫的图片展示效果——Imageflow,此效果支持:

1. 自缩放图片形成远近伪3D效果
2. 华丽丽的倒影
3. 支持给每个图片加标题和介绍,支持自定义好看的水平滚动条

点击这里看效果

imageflow共分为三个部分:js,html,css和相关图片

步骤一:引入js

<script type="text/javascript" src="Scripts/imageflow.js"></script>


步骤二:将图片部分的代码写入html。包含图片地址(图片可带链接),图片载入前的替换文本,以及水平滚动条

<div class="imageflow">
      <div id="imageFlow">
        <div class="bank">
        <a rel="../images/001.jpg" title="Our Doomsday" href="javascript:void(0)">Doomsday Only Belongs to Us</a>
        <a rel="../images/002.jpg" title="Web-Friendly Design" href="javascript:void(0)">How to make a Web-Friendly Design</a>
        <a rel="../images/003.jpg" title="50 Months" href="javascript:void(0)">My Wonderland TimeLine</a>
        </div>
        <div class="text">
          <div class="title">Loading</div>
          <div class="legend">Please wait...</div>
        </div>
        <div class="scrollbar"> <img class="track" src="images/sb.gif" alt=""> <img class="arrow-left" src="images/sl.gif" alt=""> <img class="arrow-right" src="images/sr.gif" alt=""> <img class="bar" src="images/sc.png" alt=""> </div>
      </div>
</div>


步骤三:引入css和相关图片

imageflow自带有css及四个图片,分别是“上一张”、“下一张”、滚动轴、滚动条,建议新手在原有的上面改哦
  • Page 1 of 1
  • 1
Search: