|
   |
| Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » 很炫的图片展示js (imageflow.js) |
| 很炫的图片展示js |
Date Sa, 2013-01-05, 15:44 | Msg 1
 
今天要介绍的是一个很炫的图片展示效果——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及四个图片，分别是“上一张”、“下一张”、滚动轴、滚动条，建议新手在原有的上面改哦  |
| |||
| |||
