幻灯片/轮播

纯js图片倒影轮播插件

创客主机


这是一款美轮美奂的纯js超酷全屏带缩略图和图片倒影的轮播图插件。该轮播图插件带有缩略图导航,并且每张图片都带有十分逼真的倒影效果。该轮播图代码在ie8下即可运行。

HTML代码:

  1. <div id="imageFlow">
  2.     <div class="top">
  3.     </div>
  4.     <div class="bank">
  5.         <a rel="images/1.jpg" title="Myselves" href="http//www.htmleaf.com/">
  6.         My identity lies in not knowing who I am</a>
  7.         <a rel="images/2.jpg" title="Discoveries" href="http//www.htmleaf.com/">
  8.         ...are made by not following instructions</a>
  9.         <a rel="images/3.jpg" title="Nothing" href="http//www.htmleaf.com/">
  10.         ...can come between us</a>
  11.         <a rel="images/4.jpg" title="New life" href="http//www.htmleaf.com/">
  12.         Here you come!</a>
  13.         <a rel="images/5.jpg" title="Optimists" href="http://www.html.org.cn/">
  14.         They don't know all the facts yet</a>
  15.         <a rel="images/6.jpg" title="Empathy" href="http//www.htmleaf.com/">
  16.         Emotional intimacy</a>
  17.         <a rel="images/7.jpg" title="Much work" href="http//www.htmleaf.com/">
  18.         ...remains to be done before we can announce our total failure to make any 
  19.         progress</a>
  20.         <a rel="images/8.jpg" title="System error" href="http//www.htmleaf.com/">
  21.         Errare Programma Est</a>
  22.         <a rel="images/9.jpg" title="Nonexistance" href="http//www.htmleaf.com/">
  23.         There's no such thing</a>
  24.         <a rel="images/10.jpg" title="Inside" href="http//www.htmleaf.com/">
  25.         I抦 now trapped, without hope of escape or rescue</a>
  26.         <a rel="images/11.jpg" title="E-Slaves" href="http//www.htmleaf.com/">
  27.         The World is flat</a>
  28.         <a rel="images/12.jpg" title="l0v3" href="http//www.htmleaf.com/">
  29.         1 l0v3 j00 - f0r3v3r</a>
  30.         <a rel="images/13.jpg" title="T minus zero" href="http//www.htmleaf.com/">
  31.         111 111 111 x 111 111 111 = 12345678987654321</a>
  32.         <a rel="images/14.jpg" title="The End" href="http//www.htmleaf.com/">
  33.         ...has not been written yet</a> </div>
  34.     <div class="text">
  35.         <div class="title">
  36.             Loading</div>
  37.         <div class="legend">
  38.             Please wait...</div>
  39.     </div>
  40.     <div class="scrollbar">
  41.         <img class="track" src="images/track.jpg" alt="">
  42.         <img class="arrow-left" src="images/sign_out.png" alt="">
  43.         <img class="arrow-right" src="images/sign_in.png" alt="">
  44.         <img class="bar" src="images/bar.jpg" alt=""> </div>
  45. </div>

JAVASCRIPT代码:

实现图片倒影的js函数如下:

  1. function createReflexion (cont, img) {
  2.     var flx = false;
  3.     if (document.createElement("canvas").getContext) {
  4.         flx = document.createElement("canvas");
  5.         flx.width = img.width;
  6.         flx.height = img.height;
  7.         var context = flx.getContext("2d");
  8.         context.translate(0, img.height);
  9.         context.scale(1, -1);
  10.         context.drawImage(img, 0, 0, img.width, img.height);
  11.         context.globalCompositeOperation = "destination-out";
  12.         var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
  13.         gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
  14.         gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
  15.         context.fillStyle = gradient;
  16.         context.fillRect(0, 0, img.width, img.height * 2);
  17.     } else {
  18.         /* ---- DXImageTransform ---- */
  19.         flx     = document.createElement('img');
  20.         flx.src = img.src;
  21.         flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
  22.                            'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
  23.                            (img.height * .25) + ')';
  24.     }
  25.     /* ---- insert Reflexion ---- */
  26.     flx.style.position = 'absolute';
  27.     flx.style.left     = '-1000px';
  28.     cont.appendChild(flx);
  29.     return flx;
  30. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!