js+css打造令人震撼的图片展示效果-ForWork.Net

在蓝色经典社区看到的，绝对的震撼，采用JS+CSS编写，摘录下，有用！
代码如下：
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>"><br /><html><br /><head><br /><title>1</title><br /><meta http-equiv="imagetoolbar" content="no"><br /><style type="text/css"><br /> html {<br />  overflow: hidden;<br /> }<br /> body {<br />  margin: 0px;<br />  padding: 0px;<br />  background: #000;<br />  width: 100%;<br />  height: 100%;<br /> }<br /> #imageFlow {<br />  position: absolute;<br />  width: 100%;<br />  height: 80%;<br />  left: 0%;<br />  top: 10%;<br />  background: #000;<br /> }<br /> #imageFlow .diapo {<br />  position: absolute;<br />  left: -1000px;<br />  cursor: pointer;<br />  -ms-interpolation-mode: nearest-neighbor;<br /> }<br /> #imageFlow .link {<br />  border: dotted #fff 1px;<br />  margin-left: -1px;<br />  margin-bottom: -1px;<br /> }<br /> #imageFlow .bank {<br />  visibility: hidden;<br /> }<br /> #imageFlow .top {<br />  position: absolute;<br />  width: 100%;<br />  height: 40%;<br />  background: #181818;<br /> }<br /> #imageFlow .text {<br />  position: absolute;<br />  left: 0px;<br />  width: 100%;<br />  bottom: 16%;<br />  text-align: center;<br />  color: #FFF;<br />  font-family: verdana, arial, Helvetica, sans-serif;<br />  z-index: 1000;<br /> }<br /> #imageFlow .title {<br />  font-size: 0.9em;<br />  font-weight: bold;<br /> }<br /> #imageFlow .legend {<br />  font-size: 0.8em;<br /> }<br /> #imageFlow .scrollbar {<br />  position: absolute;<br />  left: 10%;<br />  bottom: 10%;<br />  width: 80%;<br />  height: 16px;<br />  z-index: 1000;<br /> }<br /> #imageFlow .track {<br />  position: absolute;<br />  left: 1%;<br />  width: 98%;<br />  height: 16px;<br />  filter: alpha(opacity=30);<br />  opacity: 0.3;<br /> }<br /> #imageFlow .arrow-left {<br />  position: absolute;<br /> }<br /> #imageFlow .arrow-right {<br />  position: absolute;<br />  right: 0px;<br /> }<br /> #imageFlow .bar {<br />  position: absolute;<br />  height: 16px;<br />  left: 25px;<br /> }<br /></style><br /><script type="text/javascript"><br />var imf = function () {<br /> var lf = 0;<br /> var instances = [];<br /> function getElementsByClass (object, tag, className) {<br />  var o = object.getElementsByTagName(tag);<br />  for ( var i = 0, n = o.length, ret = []; i < n; i++)<br />   if (o[i].className == className) ret.push(o[i]);<br />  if (ret.length == 1) ret = ret[0];<br />  return ret;<br /> }<br /> function addEvent (o, e, f) {<br />  if (window.addEventListener) o.addEventListener(e, f, false);<br />  else if (window.attachEvent) r = o.attachEvent('on' + e, f);<br /> }<br /> function createReflexion (cont, img) {<br />  var flx = false;<br />  if (document.createElement("canvas").getContext) {<br />   flx = document.createElement("canvas");<br />   flx.width = img.width;<br />   flx.height = img.height;<br />   var context = flx.getContext("2d");<br />   context.translate(0, img.height);<br />   context.scale(1, -1);<br />   context.drawImage(img, 0, 0, img.width, img.height);<br />   context.globalCompositeOperation = "destination-out";<br />   var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);<br />   gradient.addColorStop(1, "rgba(255, 255, 255, 0)");<br />   gradient.addColorStop(0, "rgba(255, 255, 255, 1)");<br />   context.fillStyle = gradient;<br />   context.fillRect(0, 0, img.width, img.height * 2);<br />  } else {<br />   /* ---- DXImageTransform ---- */<br />   flx     = document.createElement('img');<br />   flx.src = img.src;<br />   flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +<br />                      'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +<br />          (img.height * .25) + ')';<br />  }<br />  /* ---- insert Reflexion ---- */<br />  flx.style.position = 'absolute';<br />  flx.style.left     = '-1000px';<br />  cont.appendChild(flx);<br />  return flx;<br /> }<br /> /* //////////// ==== ImageFlow Constructor ==== //////////// */<br /> function ImageFlow(oCont, size, zoom, border) {<br />  this.diapos     = [];<br />  this.scr        = false;<br />  this.size       = size;<br />  this.zoom       = zoom;<br />  this.bdw        = border;<br />  this.oCont      = oCont;<br />  this.oc         = document.getElementById(oCont);<br />  this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');<br />  this.text       = getElementsByClass(this.oc,   'div', 'text');<br />  this.title      = getElementsByClass(this.text, 'div', 'title');<br />  this.legend     = getElementsByClass(this.text, 'div', 'legend');<br />  this.bar        = getElementsByClass(this.oc,   'img', 'bar');<br />  this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');<br />  this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');<br />  this.bw         = this.bar.width;<br />  this.alw        = this.arL.width - 5;<br />  this.arw        = this.arR.width - 5;<br />  this.bar.parent = this.oc.parent  = this;<br />  this.arL.parent = this.arR.parent = this;<br />  this.view       = this.back       = -1;<br />  this.resize();<br />  this.oc.onselectstart = function () { return false; }<br />  /* ---- create images ---- */<br />  var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');<br />  this.NF = img.length;<br />  for (var i = 0, o; o = img[i]; i++) {<br />   this.diapos[i] = new Diapo(this, i,<br />          o.rel,<br />          o.title || '- ' + i + ' -',<br />          o.innerHTML || o.rel,<br />          o.href || '',<br />          o.target || '_self'<br />   );<br />  }<br />  /* ==== add mouse wheel events ==== */<br />  if (window.addEventListener)<br />   this.oc.addEventListener('DOMMouseScroll', function(e) {<br />    this.parent.scroll(-e.detail);<br />   }, false);<br />  else this.oc.onmousewheel = function () {<br />   this.parent.scroll(event.wheelDelta);<br />  }<br />  /* ==== scrollbar drag N drop ==== */<br />  this.bar.onmousedown = function (e) {<br />   if (!e) e = window.event;<br />   var scl = e.screenX - this.offsetLeft;<br />   var self = this.parent;<br />   /* ---- move bar ---- */<br />   this.parent.oc.onmousemove = function (e) {<br />    if (!e) e = window.event;<br />    self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';<br />    self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);<br />    if (self.view != self.back) self.calc();<br />    return false;<br />   }<br />   /* ---- release scrollbar ---- */<br />   this.parent.oc.onmouseup = function (e) {<br />    self.oc.onmousemove = null;<br />    return false;<br />   }<br />   return false;<br />  }<br />  /* ==== right arrow ==== */<br />  this.arR.onclick = this.arR.ondblclick = function () {<br />   if (this.parent.view < this.parent.NF - 1)<br />    this.parent.calc(1);<br />  }<br />  /* ==== Left arrow ==== */<br />  this.arL.onclick = this.arL.ondblclick = function () {<br />   if (this.parent.view > 0)<br />    this.parent.calc(-1);<br />  }<br /> }<br /> /* //////////// ==== ImageFlow prototype ==== //////////// */<br /> ImageFlow.prototype = {<br />  /* ==== targets ==== */<br />  calc : function (inc) {<br />   if (inc) this.view += inc;<br />   var tw = 0;<br />   var lw = 0;<br />   var o = this.diapos[this.view];<br />   if (o && o.loaded) {<br />    /* ---- reset ---- */<br />    var ob = this.diapos[this.back];<br />    if (ob && ob != o) {<br />     ob.img.className = 'diapo';<br />     ob.z1 = 1;<br />    }<br />    /* ---- update legend ---- */<br />    this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);<br />    this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);<br />    /* ---- update hyperlink ---- */<br />    if (o.url) {<br />     o.img.className = 'diapo link';<br />     window.status = 'hyperlink: ' + o.url;<br />    } else {<br />     o.img.className = 'diapo';<br />     window.status = '';<br />    }<br />    /* ---- calculate target sizes & positions ---- */<br />    o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;<br />    var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);<br />    var x = x0 + o.w1 + this.bdw;<br />    for (var i = this.view + 1, o; o = this.diapos[i]; i++) {<br />     if (o.loaded) {<br />      o.x1 = x;<br />      o.w1 = (this.ht / o.r) * this.size;<br />      x   += o.w1 + this.bdw;<br />      tw  += o.w1 + this.bdw;<br />     }<br />    }<br />    x = x0 - this.bdw;<br />    for (var i = this.view - 1, o; o = this.diapos[i]; i--) {<br />     if (o.loaded) {<br />      o.w1 = (this.ht / o.r) * this.size;<br />      o.x1 = x - o.w1;<br />      x   -= o.w1 + this.bdw;<br />      tw  += o.w1 + this.bdw;<br />      lw  += o.w1 + this.bdw;<br />     }<br />    }<br />    /* ---- move scrollbar ---- */<br />    if (!this.scr && tw) {<br />     var r = (this.ws - this.alw - this.arw - this.bw) / tw;<br />     this.bar.style.left = Math.round(this.alw + lw * r) + 'px';<br />    }<br />    /* ---- save preview view ---- */<br />    this.back = this.view;<br />   }<br />  },<br />  /* ==== mousewheel scrolling ==== */<br />  scroll : function (sc) {<br />   if (sc < 0) {<br />    if (this.view < this.NF - 1) this.calc(1);<br />   } else {<br />    if (this.view > 0) this.calc(-1);<br />   }<br />  },<br />  /* ==== resize  ==== */<br />  resize : function () {<br />   this.wh = this.oc.clientWidth;<br />   this.ht = this.oc.clientHeight;<br />   this.ws = this.scrollbar.offsetWidth;<br />   this.calc();<br />   this.run(true);<br />  },<br />  /* ==== move all images  ==== */<br />  run : function (res) {<br />   var i = this.NF;<br />   while (i--) this.diapos[i].move(res);<br />  }<br /> }<br /> /* //////////// ==== Diapo Constructor ==== //////////// */<br /> Diapo = function (parent, N, src, title, text, url, target) {<br />  this.parent        = parent;<br />  this.loaded        = false;<br />  this.title         = title;<br />  this.text          = text;<br />  this.url           = url;<br />  this.target        = target;<br />  this.N             = N;<br />  this.img           = document.createElement('img');<br />  this.img.src       = src;<br />  this.img.parent    = this;<br />  this.img.className = 'diapo';<br />  this.x0            = this.parent.oc.clientWidth;<br />  this.x1            = this.x0;<br />  this.w0            = 0;<br />  this.w1            = 0;<br />  this.z1            = 1;<br />  this.img.parent    = this;<br />  this.img.onclick   = function() { this.parent.click(); }<br />  this.parent.oc.appendChild(this.img);<br />  /* ---- display external link ---- */<br />  if (url) {<br />   this.img.onmouseover = function () { this.className = 'diapo link'; }<br />   this.img.onmouseout  = function () { this.className = 'diapo'; }<br />  }<br /> }<br /> /* //////////// ==== Diapo prototype ==== //////////// */<br /> Diapo.prototype = {<br />  /* ==== HTML rendering ==== */<br />  move : function (res) {<br />   if (this.loaded) {<br />    var sx = this.x1 - this.x0;<br />    var sw = this.w1 - this.w0;<br />    if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {<br />     /* ---- paint only when moving ---- */<br />     this.x0 += sx * .1;<br />     this.w0 += sw * .1;<br />     if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {<br />      /* ---- paint only visible images ---- */<br />      this.visible = true;<br />      var o = this.img.style;<br />      var h = this.w0 * this.r;<br />      /* ---- diapo ---- */<br />      o.left   = Math.round(this.x0) + 'px';<br />      o.bottom = Math.floor(this.parent.ht * .25) + 'px';<br />      o.width  = Math.round(this.w0) + 'px';<br />      o.height = Math.round(h) + 'px';<br />      /* ---- reflexion ---- */<br />      if (this.flx) {<br />       var o = this.flx.style;<br />       o.left   = Math.round(this.x0) + 'px';<br />       o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';<br />       o.width  = Math.round(this.w0) + 'px';<br />       o.height = Math.round(h) + 'px';<br />      }<br />     } else {<br />      /* ---- disable invisible images ---- */<br />      if (this.visible) {<br />       this.visible = false;<br />       this.img.style.width = '0px';<br />       if (this.flx) this.flx.style.width = '0px';<br />      }<br />     }<br />    }<br />   } else {<br />    /* ==== image onload ==== */<br />    if (this.img.complete && this.img.width) {<br />     /* ---- get size image ---- */<br />     this.iw     = this.img.width;<br />     this.ih     = this.img.height;<br />     this.r      = this.ih / this.iw;<br />     this.loaded = true;<br />     /* ---- create reflexion ---- */<br />     this.flx    = createReflexion(this.parent.oc, this.img);<br />     if (this.parent.view < 0) this.parent.view = this.N;<br />     this.parent.calc();<br />    }<br />   }<br />  },<br />  /* ==== diapo onclick ==== */<br />  click : function () {<br />   if (this.parent.view == this.N) {<br />    /* ---- click on zoomed diapo ---- */<br />    if (this.url) {<br />     /* ---- open hyperlink ---- */<br />     window.open(this.url, this.target);<br />    } else {<br />     /* ---- zoom in/out ---- */<br />     this.z1 = this.z1 == 1 ? this.parent.zoom : 1;<br />     this.parent.calc();<br />    }<br />   } else {<br />    /* ---- select diapo ---- */<br />    this.parent.view = this.N;<br />    this.parent.calc();<br />   }<br />   return false;<br />  }<br /> }<br /> /* //////////// ==== public methods ==== //////////// */<br /> return {<br />  /* ==== initialize script ==== */<br />  create : function (div, size, zoom, border) {<br />   /* ---- instanciate imageFlow ---- */<br />   var load = function () {<br />    var loaded = false;<br />    var i = instances.length;<br />    while (i--) if (instances[i].oCont == div) loaded = true;<br />    if (!loaded) {<br />     /* ---- push new imageFlow instance ---- */<br />     instances.push(<br />      new ImageFlow(div, size, zoom, border)<br />     );<br />     /* ---- init script (once) ---- */<br />     if (!imf.initialized) {<br />      imf.initialized = true;<br />      /* ---- window resize event ---- */<br />      addEvent(window, 'resize', function () {<br />       var i = instances.length;<br />       while (i--) instances[i].resize();<br />      });<br />      /* ---- stop drag N drop ---- */<br />      addEvent(document.getElementById(div), 'mouseout', function (e) {<br />       if (!e) e = window.event;<br />       var tg = e.relatedTarget || e.toElement;<br />       if (tg && tg.tagName == 'HTML') {<br />        var i = instances.length;<br />        while (i--) instances[i].oc.onmousemove = null;<br />       }<br />       return false;<br />      });<br />      /* ---- set interval loop ---- */<br />      setInterval(function () {<br />       var i = instances.length;<br />       while (i--) instances[i].run();<br />      }, 16);<br />     }<br />    }<br />   }<br />   /* ---- window onload event ---- */<br />   addEvent(window, 'load', function () { load(); });<br />  }<br /> }<br />}();<br />/* ==== create imageFlow ==== */<br />//          div ID    , size, zoom, border<br />imf.create("imageFlow", 0.15, 1.5, 10);<br /></script><br /></head><br /><body><br /> <div id="imageFlow"><br />  <div class="top"></div><br />  <div class="bank"><br />   <a rel="<a href="http://www.forwork.net/upload/2009/6/200906040900456500.jpg">upload/2009/6/200906040900456500.jpg</a>" title="Myselves" href="<a href="http://www.forwork.net/upload/2009/6/200906040900451103.jpg">upload/2009/6/200906040900463457.jpg</a>" title="Discoveries" href="<a href="http://www.forwork.net/upload/2009/6/200906040900462847.jpg">upload/2009/6/200906040900464386.jpg</a>" title="Nothing" href="<a href="http://www.forwork.net/upload/2009/6/200906040900468806.jpg">upload/2009/6/200906040900462650.jpg</a>" title="New life" href="<a href="http://www.forwork.net/upload/2009/6/200906040900464768.jpg">upload/2009/6/200906040900475753.jpg</a>" title="Optimists" href="<a href="http://www.forwork.net/upload/2009/6/200906040900474213.jpg">upload/2009/6/200906040900478224.jpg</a>" title="Empathy" href="<a href="http://www.forwork.net/upload/2009/6/200906040900473655.jpg">upload/2009/6/200906040900473773.jpg</a>" title="Much work" href="<a href="http://www.forwork.net/upload/2009/6/200906040900476135.jpg">upload/2009/6/200906040900473458.jpg</a>" title="System error" href="<a href="http://www.forwork.net/upload/2009/6/200906040900470427.jpg">upload/2009/6/200906040900476830.jpg</a>" title="Nonexistance" href="<a href="http://www.forwork.net/upload/2009/6/200906040900472675.jpg">upload/2009/6/200906040900478010.jpg</a>" title="Inside" href="<a href="http://www.forwork.net/upload/2009/6/200906040900488821.jpg">upload/2009/6/200906040900481373.jpg</a>" title="E-Slaves" href="<a href="http://www.forwork.net/upload/2009/6/200906040900480734.jpg">upload/2009/6/200906040900486267.jpg</a>" title="l0v3" href="<a href="http://www.forwork.net/upload/2009/6/200906040900496623.jpg">upload/2009/6/200906040900497175.jpg</a>" title="T minus zero" href="<a href="http://www.forwork.net/upload/2009/6/200906040900493730.jpg">upload/2009/6/200906040900491488.jpg</a>" title="The End" href="<a href="http://www.forwork.net/upload/2009/6/200906040900495017.gif">upload/2009/6/200906040900497360.gif</a>" alt=""><br />   <img class="arrow-left" src="<a href="http://www.forwork.net/upload/2009/6/200906040900491535.gif">upload/2009/6/200906040900491535.gif</a>" alt=""><br />   <img class="arrow-right" src="<a href="http://www.forwork.net/upload/2009/6/200906040900498204.gif">upload/2009/6/200906040900498204.gif</a>" alt=""><br />   <img class="bar" src="<a href="http://www.forwork.net/upload/2009/6/200906040900496508.gif">upload/2009/6/200906040900496508.gif</a>" alt=""><br />  </div><br /> </div><br /></body><br /></html></p>
ForWork.Net

欢迎参观ForWork.Net，快乐工作·快乐生活！你我的快乐生活：）

js+css打造令人震撼的图片展示效果

Tags: js CSS 图片 技术 代码

发布:Person01 | 分类:技术文摘 | 评论:1 | 引用:0 | 浏览:

关于本文

最近发表

最新评论及回复

最近留言

友情链接

控制面板

Search

网站分类

文章归档

图标汇集

ForWork.Net

欢迎参观ForWork.Net，快乐工作·快乐生活！你我的快乐生活：）

js+css打造令人震撼的图片展示效果

Tags: js CSS 图片 技术 代码

发布:Person01 | 分类:技术文摘 | 评论:1 | 引用:0 | 浏览: strBatchCount+="spn307=307,"

关于本文

最近发表

最新评论及回复

最近留言

友情链接

控制面板

Search

网站分类

文章归档

图标汇集

Tags: js CSS 图片技术代码

发布:Person01 | 分类:技术文摘 | 评论:1 | 引用:0 | 浏览:
