前一阵对三角边稍作了一点总结。昨天下班前同事又提到它。我在想，或许我们利用它做的事可能还不止那么多。也许它还能欺骗我们的眼球更多的东西。比如我一直在想的css3中目前只有webkit核心支持的transition变换属性。能否利用三角边做点它能做的事情呢？于是下班回家随便写了点测试的东西。。。发现如果要求不是很严格的话，某些时候还是能欺骗到我们的眼球的。比如下面的一个demo：
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>html {background:#000}body, ul {margin:0;padding:0}li {list-style:none}img {border:none;display:block}.slide-wp {width: 520px;height: 280px;overflow: hidden;position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -150px;}.nav-wp {position: absolute;background: #ccc;top: 50%;margin-top: 170px;left: 50%;margin-left: -100px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;padding: 0 20px 6px 10px;_padding: 0 20px 2px 10px;}.nav li {float: left;margin-left: 10px;font-size: 20px;font-weight: bold;font-family: tahoma;color: #22739e;cursor: pointer;height: 22px;}.nav li.cur{color: #ff7a00}.next {position:absolute;top: 0;left: 160px;padding: 4px 8px;color: #ff7a00;background: #ccc;height: 20px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;cursor: pointer;}</style></head><body><h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈。。。</h2><div id="slider" class="slide-wp"><ul><li><a href="http://www.nowamagic.net/" target="_blank"><img src="//www.nowamagic.net/images/1.jpg" alt="" /></a></li><li><a href="http://www.nowamagic.net/" target="_blank"><img src="//www.nowamagic.net/images/2.jpg" alt="" /></a></li><li><a href="http://www.nowamagic.net/" target="_blank"><img src="//www.nowamagic.net/images/3.jpg" alt="" /></a></li><li><a href="http://www.nowamagic.net/" target="_blank"><img src="//www.nowamagic.net/images/4.jpg" alt="" /></a></li><li><a href="http://www.nowamagic.net/" target="_blank"><img src="//www.nowamagic.net/images/5.jpg" alt="" /></a></li></ul></div><div class="nav-wp"><ul id="nav" class="nav"><li onclick="mySlider.pos(0)">●</li><li onclick="mySlider.pos(1)">●</li><li onclick="mySlider.pos(2)">●</li><li onclick="mySlider.pos(3)">●</li><li onclick="mySlider.pos(4)">●</li></ul><a class="next" onclick="mySlider.move()">next</a></div><script type="text/javascript">var HR = { $ : function(i) {return document.getElementById(i)}, $$ : function(c, p) {return p.getElementsByTagName(c)}, ce : function(i, t) { var o = document.createElement(i); t.appendChild(o); return o; }};HR.slider3D = function () { var init = function (o) { this.o = o; var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul); this.l = li.length; this.w = wp.offsetWidth; this.h = wp.offsetHeight; this.at = o.auto? o.auto : 4; var con = this.con = HR.ce('div', wp); con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px'; ul.style['display'] = 'none'; this.a1 = HR.ce('a', con); this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden'; this.a2 = HR.ce('a', con); this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden'; this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />'; this.img = HR.$$('img', ul); this.s = o.maskSize ? o.maskSize : 5; this.mask11 = HR.ce('span', this.a1); this.mask12 = HR.ce('span', this.a1); this.mask21 = HR.ce('span', this.a2); this.mask22 = HR.ce('span', this.a2); this.pos(0); } init.prototype = { pos : function (i) { clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i; var navli = HR.$$('li', HR.$(this.o.navId)); for (var j=0; j<navli.length; j++) { navli[j].className = i == j ? 'cur' : ''; } var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this; img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src; img1.width = this.w; img2.src = this.img[i].src; img2.width = 0; img1.height = img2.height = this.h; this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px'; this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px'; this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px'; this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px'; this.li[i].a = setInterval(function(){_this.anim(i)}, 20); }, anim : function (i) { var w1 = HR.$$('img', this.a1)[0].width, w2 = HR.$$('img', this.a2)[0].width; if (w2 == this.w) { clearInterval(this.li[i].a); HR.$$('img', this.a1)[0].width = 0; HR.$$('img', this.a2)[0].width = this.w; this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px'; this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px'; this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px'; this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px'; }else { HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13); HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13); this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px'; this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px'; this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px'; this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px'; if (!this.au) this.auto(); } }, auto : function () { var _this = this; this.au = setInterval(function(){_this.move()}, this.at*1000); }, move : function () { var n = this.cur==this.l-1 ? 0 : this.cur+1; this.pos(n); } } return init;}();var mySlider = new HR.slider3D({ id: 'slider', maskSize: 6, navId: 'nav', auto: 4})</script></body></html>乍一看,其实还是有点3d的效果的。不过明眼细心一点就会发现，其实我骗了你们。这哪是什么3d？只是利用三角边耍的一点小把戏。真正的类似的3d效果是按照我们人眼的透视原理，物体高宽根据远近按比例压缩的。而我上面的demo并没有用任何压缩的方法来做高或宽的改变的。看看代码就知道，只是用了一些遮罩来做的掩饰。
所以说这根本不是3d，我在作弊...不过我仍然不怕拍砖的把这种东西作为一种思路分享出来，我是觉得互联网这个行业是需要一些所谓的创意的。可能我上面的粗糙的demo不能说是创意，我希望我的某些"抛砖"或许能"引玉"...
如果对三角边还不甚了解的朋友，可以稍微看下我前文对于三角边的例子，很简单的东西。代码我并没做过多的优化和修正。因为只是昨晚一时兴起写的测试demo。可能有一点点可用性是在于不care IE6表现的朋友，或许可以优化下代码，做成你自己的幻灯片或者其他的演示。
care IE6的朋友仅当一阵清风，因为IE6的三角边支持的确不好，出现斑点我也只能表示无能为力。
最后还是稍稍说一下思路，利用三角边在轮播区域的四个角做了四个遮罩，然后同时改变两张图片的宽度（或高度）以及四个遮罩的borderWidth，稍作调整即可。由于黑色的三角边遮挡了一部分变化的图片，所以不注意的时候会有图片被渐进压缩的感觉。其实仅仅是被遮住了一部分而已。
我只稍作的封装，调用方式和可配置参数如下：
1 | new HR.slider3D({ |
2 | id: 'slider', |
3 | maskSize: 6, |
4 | navId: 'nav', |
5 | auto: 4 |
6 | }) |
id为轮播列表父元素id，maskSize为视井深度大小，建议为高或宽可以整除的大于3的数。navId为控制器列表id。auto为自动滚动时间间隔。 可以优化的地方：
联系客服
