这是一款js大师级的作品。该插件使用纯javascript来实现图片的倒影效果和轮播图的缩略图及切换效果。
HTML
html代码十分简单：
<div id="imageFlow"> <div class="top"> </div> <div class="bank"> <a rel="images/1.jpg" title="Myselves" href="http//www.bluestep.cc/"> My identity lies in not knowing who I am</a> <a rel="images/2.jpg" title="Discoveries" href="http//www.bluestep.cc/"> ...are made by not following instructions</a> <a rel="images/3.jpg" title="Nothing" href="http//www.bluestep.cc/"> ...can come between us</a> <a rel="images/4.jpg" title="New life" href="http//www.bluestep.cc/"> Here you come!</a> <a rel="images/5.jpg" title="Optimists" href="http://www.html.org.cn/"> They don't know all the facts yet</a> <a rel="images/6.jpg" title="Empathy" href="http//www.bluestep.cc/"> Emotional intimacy</a> <a rel="images/7.jpg" title="Much work" href="http//www.bluestep.cc/"> ...remains to be done before we can announce our total failure to make any progress</a> <a rel="images/8.jpg" title="System error" href="http//www.bluestep.cc/"> Errare Programma Est</a> <a rel="images/9.jpg" title="Nonexistance" href="http//www.bluestep.cc/"> There's no such thing</a> <a rel="images/10.jpg" title="Inside" href="http//www.bluestep.cc/"> I抦 now trapped, without hope of escape or rescue</a> <a rel="images/11.jpg" title="E-Slaves" href="http//www.bluestep.cc/"> The World is flat</a> <a rel="images/12.jpg" title="l0v3" href="http//www.bluestep.cc/"> 1 l0v3 j00 - f0r3v3r</a> <a rel="images/13.jpg" title="T minus zero" href="http//www.bluestep.cc/"> 111 111 111 x 111 111 111 = 12345678987654321</a> <a rel="images/14.jpg" title="The End" href="http//www.bluestep.cc/"> ...has not been written yet</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/track.jpg" alt=""> <img class="arrow-left" src="images/sign_out.png" alt=""> <img class="arrow-right" src="images/sign_in.png" alt=""> <img class="bar" src="images/bar.jpg" alt=""> </div></div> |
JAVASCRIPT
实现图片倒影的js函数如下：
function createReflexion (cont, img) { var flx = false; if (document.createElement("canvas").getContext) { flx = document.createElement("canvas"); flx.width = img.width; flx.height = img.height; var context = flx.getContext("2d"); context.translate(0, img.height); context.scale(1, -1); context.drawImage(img, 0, 0, img.width, img.height); context.globalCompositeOperation = "destination-out"; var gradient = context.createLinearGradient(0, 0, 0, img.height * 2); gradient.addColorStop(1, "rgba(255, 255, 255, 0)"); gradient.addColorStop(0, "rgba(255, 255, 255, 1)"); context.fillStyle = gradient; context.fillRect(0, 0, img.width, img.height * 2); } else { /* ---- DXImageTransform ---- */ flx = document.createElement('img'); flx.src = img.src; flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' + 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' + (img.height * .25) + ')'; } /* ---- insert Reflexion ---- */ flx.style.position = 'absolute'; flx.style.left = '-1000px'; cont.appendChild(flx); return flx;} |
其它部分的js代码和css代码请参考下载文件。
