很炫的图片展示js - Forum

Page 1 of 1
1

很炫的图片展示js (imageflow.js)

很炫的图片展示js

Seven

Date Sa, 2013-01-05, 15:44 | Msg 1

今天要介绍的是一个很炫的图片展示效果——Imageflow，此效果支持：

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

点击这里看效果

imageflow共分为三个部分：js，html，css和相关图片

步骤一：引入js

步骤二：将图片部分的代码写入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及四个图片，分别是“上一张”、“下一张”、滚动轴、滚动条，建议新手在原有的上面改哦

很炫的图片展示js (imageflow.js)

Page 1 of 1
1