决定不再潜水，浮出水面... - JavaScript & VBScript & DHTM...

来源：百度文库编辑：神马文学网时间：2024/04/29 16:50:11

决定不再潜水，浮出水面...

以前在无忧一直是个潜水者...唉，等到blueidea中全是充斥着“求助”，“求救”等字眼时，甚至开始有乱七八糟的广告水贴入驻的时候才发现或许论坛已经开始堕落了...唉，感慨颇多。
还好无忧仍然算是一块净土，希望这块土地能一直净下去吧...
几经思量，借用腾讯的一句话，“这是个艰难的决定”，我决定在无忧不再做潜水的水民了。
浮出水面后，烦各位大侠多指教...
在无忧的第一篇帖子。各位就当作本人热热身，暂就发一个有关“三角边”的东东吧，没什么技术含量。在blue也发过，各位将就看看...
“三角边”，我想应该很多人都知道，而且如果运用熟练，很多以前我们认为只能用图片来做的东西可以通过它来实现。因此适当和熟练地使用它可以起到减少页面中图片http链接，增强页面性能的作用。本文要讲一点三角边的实际用途以及利用它来实现的一些特别的效果。希望对有需要的朋友一些帮助。
　　“三角边”-- 故名思意，即可以模拟三角。先看看下面的例子：

<!doctype html>            <html>            <head>            <style  type="text/css" _mce_bogus="1"></style>            </head>            <body>            <div style="padding: 40px; background:#fff;" ><div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;"><span style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent;"></span>“三角形箭头”例1</div>            <div style="position: relative; border: 4px solid red; padding: 20px; margin-bottom: 30px;" ><span style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent;"></span><span style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent #FFF transparent;" ></span>“三角形箭头”例2</div>            <div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;"><span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent red;" ></span>“三角形箭头”例3</div>            <div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;"><span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px 24px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent red;"></span><span style="position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent #fff transparent;" ></span>“三角形箭头”例4</div><div style="position: relative; background: red; width: 160px; padding: 20px; color: #fff; margin-bottom: 30px;" ><span style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent;" ></span>模拟梯形边<span style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: solid dashed dashed dashed; border-color: red transparent transparent transparent;"></span></div></div></body>            </html>

   提示：您可以先修改部分代码再运行

没错，别怀疑你的眼睛，上面的html和css里没有任何图片，所有三角效果都是css直接模拟出来的，而且兼容所有浏览器。
其实，原理很简单，给一个最简单的例子就明白了，
css样式：

   提示：您可以先修改部分代码再运行

html:

   提示：您可以先修改部分代码再运行

这段简单的代码输出结果为：

呵呵，是不是已经看到了“三角形”冒出来的端倪了。没错。其实DOM元素的border相接的地方是以三角的方式衔接的。所以我们才可以利用这种特性完成许多特别的事。
到这一步了，我们把需要留下来的三角留下，把不需要的border透明掉，不就可以呈现出三角形了么。对的，我们让不需要的border的border-color为transparent即可。
这里还需要注意一个小问题，就是ie6下面如果transparent的border为solid的话，会出现问题的。所以，我们为了将就ie6这个娇生惯养的家伙，统一让transparent的border-style为dashed或者dotted都可以。
　　比如，就用上面的代码，我们想保留下面黑色的三角的话，让其余三边透明，并且dashed或dotted即可。
css:

提示：您可以先修改部分代码再运行

html:

提示：您可以先修改部分代码再运行

输出结果就变成了：

好了，三角边教程差不多了，本来就是个很简单的原理，只要用过一次相信都会掌握的。再结合其他的样式就可以作出你想要的“纯css三角”或者“纯css梯形”。
【tip】这里不得不再啰嗦一下，由于ie6太不乖了，所以如果需要用到height为0或接近0的时候，请都把它的font-size设为0，并且overfolw：hidden掉，不然你在ie6下会发现总有缝隙的。

cenanhongru

UID 94937
精华 0
积分 15
帖子 3
威望 3
阅读权限
注册 2010-9-18
状态在线 #2 大中小使用道具发表于 2010-11-12 14:59 资料个人空间短消息加为好友回复 #1 cenanhongru 的帖子

【献礼】下面是一个js写的焦点图，也是周末时一时兴起做的，它特殊的一点就是用到了“三角边”来做图片切换的效果，做到了滚轴的效果。目前本人好像还没发现有哪个网站用的是这种效果的焦点图。。。

<!Doctype html>                        <html>                        <head>                        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />                        <title>Roller</title>                        <style   type="text/css" _mce_bogus="1"></style>                        <script type="text/javascript"></script>                        </head>                        <body>                        <div id="shutter" class="shutter" style="" _mce_style="">                        <ul>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" /></a></li>                        </ul>                        </div>                        <div id="shutter2" class="shutter" style="margin-top:20px" >                        <ul>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" /></a></li>                        </ul>                        </div>                        <div id="shutter3" class="shutter" style="margin-top:20px">                        <ul>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" /></a></li>                        <li><a href="http://www.cnblogs.com/hongru/" _mce_href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" /></a></li>                        </ul>                        </div>                        <script type="text/javascript"></script>                        </body>                        </html>

提示：您可以先修改部分代码再运行

上面焦点图代码在做变换的时候有点臃肿...惭愧，我只能想到这种办法了。然后在ie6下会有闪烁的斑点，一时也没什么办法解决...

决定不再潜水，浮出水面... - JavaScript & VBScript & DHTM... vbscript和javascript互相调用出版业CMS浮出水面金融机构破产“浮出水面” 出版业CMS浮出水面 “诚信通”指数浮出水面外资概念板块浮出水面中国枪支问题浮出水面 “诚信通”指数浮出水面 “太原经济圈”概念浮出水面 “太原经济圈”概念浮出水面人口普查鲜为人知姓氏浮出水面人口普查鲜为人知姓氏浮出水面伦敦爆炸案四嫌犯浮出水面中国社会压力最大族群“奔奔族”浮出水面威孚高科首度亏损：合资后遗症浮出水面田湾核电站扩建计划浮出水面电盈股份买家浮出水面两类中线牛股浮出水面 22只跨年度牛股浮出水面惊天大内幕大跌原因浮出水面！！！中国电信业重组方案即将浮出水面百度无线搜索悄然浮出水面陈宜飚：香港公务员体系矛盾浮出水面