JavaScript 颜色梯度和渐变效果

很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。
关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。

实例效果

预览效果1：

这是一个颜色梯度变化演示：

运行代码框
!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"htmlhead id="Head"titleJavaScript 颜色梯度和渐变效果/titlemeta http-equiv="Content-Type" content="text/html; charset=utf-8" //headbodyscript type="text/javascript"!--var $ = function (id) {return "string" == typeof i...<a href="http://www.tulaoshi.com/n/20160220/1632426.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</span> <i>标签:</i> <div class="yyy_2_a"><a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="http://www.tulaoshi.com/n/20160220/1632426.html" target="_blank">JavaScript 颜色梯度和渐变效果</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1601252" target="_blank"><img src="http://img.tulaoshi.com/201602/19/820faa7473fe1b6dacaee69934f48c33_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1601252.html" target="_blank">颜色渐变效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> javascriptboy diopexpexdio <a href="http://www.tulaoshi.com/n/20160219/1601252.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/海腾板材/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>海腾板材</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/138222" target="_blank"><img src="http://img.tulaoshi.com/201502/03/top201502031814563461_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20150203/138222.html" target="_blank">photoshop如何实现颜色叠加、渐变叠加和图案叠加效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/psjiaocheng/" target="_blank">PS教程</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 在本文中我们将了解Photoshop图层样式中的三种叠加选项，教程讲解了颜色叠加、渐变叠加、图案叠加的各个选项的设置和效果，对PS初学者了解PS的图层样式有很大帮助。 一、颜色叠加 这是一个很简单的样式，作用实际就相当于为层着色，也可以认为这个样式在层的上方加了一个混合模式为“普通”、不透明度为100%的“虚拟”层。 例如为这样一个图层添加“颜色叠...<a href="http://www.tulaoshi.com/n/20150203/138222.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/ZelosM/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>ZelosM</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2719</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1590237" target="_blank"><img src="http://img.tulaoshi.com/201602/19/f6678d92a8e072266abe635e7c8c40f1_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1590237.html" target="_blank">javascript+css实现单击颜色褪去效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> Untitled Document p{ font-size: 12px; font-family: Arial; } input{ cursor: pointer; } "黄褪"效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]<a href="http://www.tulaoshi.com/n/20160219/1590237.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/澄澈239/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" /><span>澄澈239</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1614157" target="_blank"><img src="http://img.tulaoshi.com/201602/19/a6a2f6322043ed54590ddc78bda0d000_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1614157.html" target="_blank">CSS滤镜:颜色渐变</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">table cellpadding="0" cellspacing="0" width="100%" height="22" border="0" tr td id="msviRegionIdGraphic" bgcolor="#FFFFFF"/td td id="msviRegionGradient1" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"/td td id="msviRegionGradient2" width="50%" style="filter:progid:DX...<a href="http://www.tulaoshi.com/n/20160219/1614157.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/萧天赐0/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/7.jpg" /><span>萧天赐0</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1590304" target="_blank"><img src="http://img.tulaoshi.com/201602/19/516e0b97e6a7b01ad6b9c70381b1206b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1590304.html" target="_blank">javascript实现的颜色块滑动的动态效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 页页装载效果 #color div { width:5px; height:5px; float:left; margin:0 2px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]<a href="http://www.tulaoshi.com/n/20160219/1590304.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/天海蓝蓝双子/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>天海蓝蓝双子</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">30</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1603343" target="_blank"><img src="http://img.tulaoshi.com/201602/19/3ee0549e5bd27e1b835a50972b5432f0_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1603343.html" target="_blank">CSS滤镜技巧:颜色渐变</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> table cellpadding="0" cellspacing="0" width="100%" height="22" border="0"   tr   td bgcolor="#FFFFFF"/td   td width="50%"/td   td width="50%"/td   /tr   /table <a href="http://www.tulaoshi.com/n/20160219/1603343.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/乳名叫三秃/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>乳名叫三秃</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1600640" target="_blank"><img src="http://img.tulaoshi.com/201602/19/aefa6b95d29115a796e93ec20843cf37_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1600640.html" target="_blank">链接渐变效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 无标题文档 www.jb51.net <a href="http://www.tulaoshi.com/n/20160219/1600640.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/Lucky馨Yin/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>Lucky馨Yin</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1591345" target="_blank"><img src="http://img.tulaoshi.com/201602/19/c09dd91f553704824712eaa706fc618c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1591345.html" target="_blank">javascript背景颜色按时变换</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">head /head body onload="setcolor()"  div id=mydiv style="font:12px sans-serif;width:300px;height:200px;"背景色测试/div script function setcolor() { var colorString; do{ colorString="#"+Math.floor(Math.random()*Math.pow(2,24)).toString(16); } while (colorString.length7); document.getElementById("mydiv").style.backgroundColor=...<a href="http://www.tulaoshi.com/n/20160219/1591345.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/德州网络宣传/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/25.jpg" /><span>德州网络宣传</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">8</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/171150" target="_blank"><img src="http://img.tulaoshi.com/201504/27/ab92258ec0be646e38307872b194b17a_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20150427/171150.html" target="_blank">PowerPoint2007中让几种颜色渐变组合起来设置渐变填充效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/jsjyyjs/" target="_blank">计算机应用技术</a> <a href="http://www.tulaoshi.com/powerpoint/" target="_blank">powerpoint</a></div> <div class="span_em_123"> 颜色搭配在PPT中是很重要的哦！如果不知道如何选取颜色进行搭配那么可以试试渐变色哦！让几种颜色渐变组合起来，效果还是不错的。下面为大家讲解下渐变效果的设置。 问：powerpoint2007中如何制作双色渐变填充？ 答：设置填充的选项框， 可以有多个光圈！ 默认两个吧！光圈1 就是第一种渐变的颜色光圈2 就是第二种渐变的颜色如此类推~~注意，结束位置不能设置成0%或100%否则看不出渐变！ ①启动PowerPoint...<a href="http://www.tulaoshi.com/n/20150427/171150.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/曾经那只是经历/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>曾经那只是经历</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">607</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/130805" target="_blank"><img src="http://img.tulaoshi.com/201501/20/top201501201503075595_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20150120/130805.html" target="_blank">photoshop教程渐变效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/psjiaocheng/" target="_blank">PS教程</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 先看一下效果： 钢笔绘制选区，然后将路径做为选区载入 选区存储为通道 羽化选区，羽化40，根据自己效果调整，用白色填充选区 载入刚刚存储的通道选区，按DEL键删除多余的白色 调整图层透明度，大概40%—60%，自己喜好调整 同理制...<a href="http://www.tulaoshi.com/n/20150120/130805.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/圈圈_/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/5.jpg" /><span>圈圈_</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">54</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1617950" target="_blank"><img src="http://img.tulaoshi.com/201602/19/98bd406d7e46726dbaafc6cc3295e748_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1617950.html" target="_blank">CSS滤镜:颜色渐变[微软的方法]</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> CSS滤镜:颜色渐变[微软的方法]  table cellpadding="0" cellspacing="0" width="100%" height="22" border="0"   tr   td id="msviRegionIdGraphic" bgcolor="#FFFFFF"/td   td id="msviRegionGradient1" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"/td &nbs...<a href="http://www.tulaoshi.com/n/20160219/1617950.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/缠丝蛋60/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>缠丝蛋60</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610635" target="_blank"><img src="http://img.tulaoshi.com/201602/19/ca18b7a9215ca680b5246ace69017e54_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1610635.html" target="_blank">JavaScript 弹出层效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> function sAlert(str){    var msgw,msgh,bordercolor;    msgw=400;//提示窗口的宽度    msgh=100;//提示窗口的高度    titleheight=25 //提示窗口标题高度    bordercolor="#336699";//提示窗口的边框颜色    titlecolor="#99CCFF";//提示窗口的标题颜色      var sWidth,sHeight;    sWidth=document.bod...<a href="http://www.tulaoshi.com/n/20160219/1610635.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/拆迁律师99/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/25.jpg" /><span>拆迁律师99</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1631849" target="_blank"><img src="http://img.tulaoshi.com/201602/20/1102138b073e7095437837b49dd40ecc_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1631849.html" target="_blank">CSS3和Javascript制作图片拖动效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 可悲的是，对CSS3和HTML5的不是标准（但）这些天（何时会永远是什么？）。由于此演示使用对CSS3，并不是所有的浏览器都可以全面兼容。正因为如此，它只能作为他们的支持通过- WebKit中字头的变换和箱阴影对CSS3属性仅浏览器在苹果Safari和谷歌浏览器。 。所以，现在，这只是为了好玩 – 其它浏览器将显示拍立得，但不会有整洁的阴影，同时拖动和旋转，而把他们失望,但是IE还是可以的。 演示地址 ...<a href="http://www.tulaoshi.com/n/20160220/1631849.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/nhfgbf568/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>nhfgbf568</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">22</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632230" target="_blank"><img src="http://img.tulaoshi.com/201602/20/93798e7c2a6c35ec2f10cb7736ebf2b2_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1632230.html" target="_blank">JavaScript教程:JavaScript和Java的区别</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 虽然 JavaScript 与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；而Java的前身是Oak语言。下面对两种语言间的异同作如下比较： ...<a href="http://www.tulaoshi.com/n/20160220/1632230.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/武邑创隆集团/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>武邑创隆集团</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1596233" target="_blank"><img src="http://img.tulaoshi.com/201602/19/cfe8be6854058ab86081332c5f329d99_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1596233.html" target="_blank">JavaScript 经典效果集</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 些很实用且必用的小脚本代码: 脚本1:进入主页以后自动播放声音  embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true  脚本2:进入主页后自动最大话,省的去在自己单击了  script  self.moveTo(0,0)  self.resizeTo(screen.availWidth,screen.availHeight)  /script  脚本3:显示现在时间的脚本  ...<a href="http://www.tulaoshi.com/n/20160219/1596233.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/wgaitami0/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>wgaitami0</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1487692" target="_blank"><img src="http://img.tulaoshi.com/201601/29/a9b7972b7bbad91b2d34d3be0b4066fa_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160129/1487692.html" target="_blank">RGB颜色action自定义教程(3) — 颜色渐变篇</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/fjc/" target="_blank">flash教程</a></div> <div class="span_em_123"> 前面两篇讲了颜色设置的基础和随心所欲的得到随机的颜色，希望对大家多少有所帮助。说完随机颜色，我们再讲讲颜色渐变，就像下面这个动画： 页面：点这儿参观 源代码(3K)： colortest2.zip 这样用颜色来表示y轴数值的大小，还是很直观的，怎么做的呢？有了前面关于颜色讨论的基础，我想大家应该都差不多猜出做法来了，就是把rgb中的一个跟随变量的增加而增加，就像这样...<a href="http://www.tulaoshi.com/n/20160129/1487692.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/天乐帽业/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>天乐帽业</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632262" target="_blank"><img src="http://img.tulaoshi.com/201602/20/4fa290f0cd011c0e2c85f75cc8219d37_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1632262.html" target="_blank">JavaScript制作滚动文本效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 下面是一个跑马灯效果的JavaScript文档。 Test2_1.html html head script Language="JavaScript" var msg="这是一个跑马灯效果的JavaScript文档"; var interval = 100; var spacelen = 120; var space10=" "; var seq=0; function Scroll() { len = msg.length; window.status = msg.substring(0, seq+1); seq++; if ( seq = len ) { seq = spacelen; window.setTimeou...<a href="http://www.tulaoshi.com/n/20160220/1632262.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/四川蜀旺科技30/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>四川蜀旺科技30</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610029" target="_blank"><img src="http://img.tulaoshi.com/201602/19/1969fc97c44d123841af48fe33abc810_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1610029.html" target="_blank">JavaScript幻灯片效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 源程序： !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" / meta http-equiv="expires" content="0" titleJavaScript幻灯片效果/title style type="text/css" !-- body { font-size:12px; } input { &nbs...<a href="http://www.tulaoshi.com/n/20160219/1610029.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/幸运的嗨菜/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>幸运的嗨菜</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1601282" target="_blank"><img src="http://img.tulaoshi.com/201602/19/3b84f1cad18002bfb1bc2416b5a53669_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1601282.html" target="_blank">表单提交(插入效果)javascript</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> <a href="http://www.tulaoshi.com/n/20160219/1601282.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/羊与阳光/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>羊与阳光</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1527592" target="_blank"><img src="http://img.tulaoshi.com/201602/02/a76b7f5780499b00b34a5e97c5b66de0_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160202/1527592.html" target="_blank">巧用Topaz和可选颜色制做简单非主流效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/psxpcl/" target="_blank">PS相片处理</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a> <a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psxg/" target="_blank">PS效果</a></div> <div class="span_em_123">1.打开原图按Ctrl+ J 复制一层选择Topaz滤镜磨下皮参数设置如喜爱下图，如果你还没有安装请点这里下载。 2,如下图所示选择可选颜色，参数设置如下图 3.给相片加蓝色暗角 新建一个图层填充为黑色，执行菜单：滤镜 渲染 镜头光晕 参数设置如下图右上，确定后把图层混合模式改为“正片叠底”然后合并所有图层完成最终效果。 最终效果 <a href="http://www.tulaoshi.com/n/20160202/1527592.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/946364552/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>946364552</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21256.html">上一页</a><a href="/reader/21253.html">21253</a><a href="/reader/21254.html">21254</a><a href="/reader/21255.html">21255</a><a href="/reader/21256.html">21256</a><a href="/reader/21257.html" class="cur">21257</a><a href="/reader/21258.html">21258</a><a href="/reader/21259.html">21259</a><a href="/reader/21260.html">21260</a><a href="/reader/21261.html">21261</a><a href="/reader/21258.html">下一页</a> </div> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="http://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="http://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div> <!--tag PC分类 标签--> <script type="text/javascript" src="http://static.tulaoshi.com/js/zt.js"></script> </body> </html>