首页 > 代码库 > JS浏览器滚轮事件实现横向滚动照片展
JS浏览器滚轮事件实现横向滚动照片展
if(window.attachEvent){ ///*IE8注册事件*/ this.oc.attachEvent(‘onmousewheel‘,function(e) { //函数体 });} else if(window.addEventListener) ///*Firefox注册事件*/ { this.oc.addEventListener(‘DOMMouseScroll‘, function(e) { //函数体 }, false);}this.oc.onmousewheel = function () { //IE/Opera/Chrome 注册事件 //函数体 }
以上是核心代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>超酷横向滚动带倒影的照片展...</title><style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; width: 100%; height: 100%; } #imageFlow { position: absolute; width: 100%; height: 100%; left: 0%; top: 10%; background: #000; } #imageFlow .diapo { position: absolute; left: -1000px; cursor: pointer; -ms-interpolation-mode: nearest-neighbor; } #imageFlow .link { border: dotted #fff 1px; margin-left: -1px; margin-bottom: -1px; } #imageFlow .bank { visibility: hidden; } #imageFlow .top { position: absolute; width: 100%; height: 40%; background: #181818; } #imageFlow .text { position: absolute; left: 0px; width: 100%; bottom: 16%; text-align: center; color: #FFF; font-family: verdana, arial, Helvetica, sans-serif; z-index: 1000; } #imageFlow .title { font-size: 0.9em; font-weight: bold; } #imageFlow .legend { font-size: 0.8em; } #imageFlow .scrollbar { position: absolute; left: 10%; bottom: 10%; width: 80%; height: 16px; z-index: 1000; } #imageFlow .track { position: absolute; left: 1%; width: 98%; height: 16px; filter: alpha(opacity=30); opacity: 0.3; } #imageFlow .arrow-left { position: absolute; } #imageFlow .arrow-right { position: absolute; right: 0px; } #imageFlow .bar { position: absolute; height: 16px; left: 25px; }</style><script type="text/javascript">var imf = function () { var lf = 0; var instances = []; function getElementsByClass (object, tag, className) { var o = object.getElementsByTagName(tag); for ( var i = 0, n = o.length, ret = []; i < n; i++) if (o[i].className == className) ret.push(o[i]); if (ret.length == 1) ret = ret[0]; return ret; } function addEvent (o, e, f) { if (window.addEventListener) o.addEventListener(e, f, false); else if (window.attachEvent) r = o.attachEvent(‘on‘ + e, f); } 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 = http://www.mamicode.com/img.src;"imageFlow", 0.15, 1.5, 10);</script></head><body> <div id="imageFlow"> <div class="top"></div> <div class="bank"> <a rel="images/1.png" title="i103" href="http://www.mamicode.com/#">高级钢琴镜面烤漆 全平面水晶触屏</a> <a rel="images/2.png" title="i100" href="http://www.mamicode.com/#">行业首创高亮8位纯平蓝光客显</a> <a rel="images/3.png" title="组合1" href="http://www.mamicode.com/#">体积紧凑 随意组合</a> <a rel="images/4.png" title="组合2" href="http://www.mamicode.com/#">体积紧凑 随意组合</a> <a rel="images/5.png" title="i201" href="http://www.mamicode.com/#">全平面触屏 尽显高档气息</a> <a rel="images/6.png" title="i200" href="http://www.mamicode.com/#">可选背部广告板</a> <a rel="images/7.png" title="组合3" href="http://www.mamicode.com/#">体积紧凑 随意组合</a> <a rel="images/8.png" title="i301" href="http://www.mamicode.com/#">绚丽时尚 引领潮流</a> <a rel="images/9.png" title="i300" href="http://www.mamicode.com/#">高贵典雅 庄重不俗</a> </div> <div class="text"> <div class="title">Loading</div> <div class="legend">Please wait...</div> </div> <div class="scrollbar"> <img class="track" src="http://www.mamicode.com/images/sb.gif" > <img class="arrow-left" src="http://www.mamicode.com/images/sl.gif" > <img class="arrow-right" src="http://www.mamicode.com/images/sr.gif" > <img class="bar" src="http://www.mamicode.com/images/sc.gif" > </div> </div><div style="width:550px;margin:20px auto;"><p> </p></div></body></html>
JS浏览器滚轮事件实现横向滚动照片展
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。