这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
之前做过一个生成渐变字体的简单演示今天闲着没事就把这个功能完善了,把 JS 代码封装成一个类,载入页面就可以使相应的 html 元素内部的字体产生渐变色。
你需要做的只是在 HTML 页面里面把需要用到渐变色的文字加上外容器(span 标签或者 a 标签都可以),再给这个标签加入 name 属性做渐变元素的标示,rel 属性指示渐变的颜色,rel 属性的格式很重要:
- rel = "#十六进制颜色-#十六进制颜色"
少一个或多一个字符都不行。
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>CSS+JS多彩渐变字</title>
- <script type="text/javascript" src="clip.js"></script>
- <style type="text/css">
- body{font:12px/1.5 arial}
- h3{padding:10px;margin:0;background-color:#c00;border:1px dashed #fff;color:#fff;font:16px/1.5 arial;}
- p{font:16px/1.5 "黑体",arial;padding:5px 10px;margin:0;}
- .code{padding:8px;}
- .box{background-color:#fff;border:1px dashed #f60;margin:8px 0;padding:5px;list-style-position:inside}
- .box li{padding:0;}
- .f999{color:#999;}
- a:link{text-decoration:none;}
- a:hover{text-decoration:underline;}
- a:visited{text-decoration:underline;}
- address{background-color:#f1f1f1;border:1px dashed #ddd;padding:10px;font-style:normal;color:#999;}
- address a,address a:visited{color:#c00;}
- </style>
- </head>
- <body>
- <div>
- <h3><strong>CSS+js多彩渐变字使用说明</strong></h3>
- <div>
- 首先在HTML页面中引入clip.js,然后给需要渐变效果的HTML元素(比如SPAN)添加name属性和rel属性,格式如下:
- <div>
- <span name="clip:g" rel="#00ffff-#000000">蓝黑渐变文字</span>
- </div>
- <ol class="box">
- <li>name属性作为渐变标示,name值不正确,将不会产生效果;</li>
- <li>rel值提供头和尾的颜色,以16进制颜色代码为准,格式为"起始颜色-末端颜色",其他格式不予支持。格式不正确将不产生效果。</li>
- <li>最后需要在页面上加上clip.gradient().init({t:["SPAN","A"]});这段代码生成渐变色。</li>
- </ol>
- <p>
- 演示:蓝黑渐变文字
- 这是一段文字,我们可以随意挑选几个字做渐变效果,字体的样式随页面的全局样式变化,和本JS无关,这里用黑体可以看的更仔细。
- </p>
- <div>由红转灰的渐变链接:<a href="http://www.silentash.com" name="clip:g" rel="#ff0000-#666666">我是连接,用A标签</a></div>
- </div>
- <address>
- Designed by Silence,转载请注明出处
- <a name="clip:g" rel="#ff0000-#0000ff" href="http://www.silentash.com?id=110" title="文章地址">http://www.silentash.com/?id=110</a>
- </address>
- </div>
- <script type="text/javascript">
- clip.gradient().init({t:["SPAN","A"]});
- </script>
- </body>
- </html>
怎么样,效果很炫吧,嘿嘿!
这样的一个效果的 HTML 代码是这样的:
字体的样式
- <span name="clip:g" rel="#cc0000-#00ffff">
- 随页面的全局样式变化
- </span>
,
就是这么简单,先用 span 元素包含文字,再给 span 元素加上标示和颜色值就可以了!不难吧。
最后在 HTML 文档的最后位置插入 JS 代码给有标示的元素着色
clip.gradient().init({t:["SPAN","A"]});
其中的 {t:["SPAN","A"]} 这个参数指示了需要给出反应的元素,现在是只针对 SPAN 和 A 标签,如果你需要给 DIV 内部的文字也使用渐变色,就需要写成{t:["SPAN","A","DIV"]},本来这句也可以一起封装到 JS 文件里面,不过考虑到每个人的需求不同,所以放外面方便配置。
如果有些用户的浏览器禁用了 JS 也不用担心页面出现错乱或者其他问题。
PS:一直让我觉得这个渐变方法有用武之地的是它可以完美的支持所有浏览器(禁用 JS 的除外 =.=!)
来源: http://www.phperz.com/article/17/0629/287785.html