爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
JS特效
变色的动态文字
变色的动态文字
日期:2014-05-18 浏览次数:20134 次
欢迎光临爱易网网页脚本特效中心,点击运行按钮演示特效:
以下是程序代码
脚本说明: 第一步:把如下代码加入<body>区域中 <div id="fader" style="position:absolute; top:35px; left:50px; width:600px; text-align:center;"></div> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var texts = new Array( "<font size='+2' color='{COLOR}' face='Arial'><strong>1stscript</strong></font>", "<font size='+3' color='{COLOR}' face='Arial'><strong>J a v a s c r i p t</strong></font>", "<font size='+4' color='{COLOR}' face='Arial'><strong>F l a s h</strong></font>", "<font size='+3' color='{COLOR}' face='Arial'><strong>A s p</font>", "<a href='http://www.1stscript.com' target='_top'><font size='+3' color='{COLOR}' face='Arial'><strong>W e l c o m e </strong></font></a>"); var bgcolor = "#000000"; // background color, must be valid browser hex color (not color names) var fcolor = "#FF8000"; // foreground or font color var steps = 20; // number of steps to fade var show = 500; // milliseconds to display message var sleep = 30; // milliseconds to pause inbetween messages var loop = true; // true = continue to display messages, false = stop at last message // Do Not Edit Below This Line var colors = new Array(steps); getFadeColors(bgcolor,fcolor,colors); var color = 0; var text = 0; var step = 1; // fade: magic fader function function fade() { // insert fader color into message var text_out = texts[text].replace("{COLOR}", colors[color]); // texts should be defined in user script, e.g.: var texts = new Array("<font color='{COLOR}' sized='+3' face='Arial'>howdy</font>"); // actually write message to document if (document.all) fader.innerHTML = text_out; // document.all = IE only if (document.layers) { document.fader.document.write(text_out); document.fader.document.close(); } // document.layers = Netscape only // select next fader color color += step; // completely faded in? if (color >= colors.length-1) { step = -1; // traverse colors array backward to fade out // stop at last message if loop=false if (!loop && text >= texts.length-1) return; // loop should be defined in user script, e.g.: var loop=true; } // completely faded out? if (color == 0) { step = 1; // traverse colors array forward to fade in again // select next message text += 1; if (text == texts.length) text = 0; // loop back to first message } // subtle timing logic... setTimeout("fade()", (color == colors.length-2 && step == -1) ? show : ((color == 1 && step == 1) ? sleep : 50)); // sleep and show should be defined in user script, e.g.: var sleep=30; var show=500; } // getFadeColors: fills Colors (predefined Array) // with color hex strings fading from ColorA to ColorB // note: Colors.length equals the number of steps to fade function getFadeColors(ColorA, ColorB, Colors) { len = Colors.length; // strip '#' signs if present if (ColorA.charAt(0)=='#') ColorA = ColorA.substring(1); if (ColorB.charAt(0)=='#') ColorB = ColorB.substring(1); // substract rgb compents from hex string var r = HexToInt(ColorA.substring(0,2)); var g = HexToInt(ColorA.substring(2,4)); var b = HexToInt(ColorA.substring(4,6)); var r2 = HexToInt(ColorB.substring(0,2)); var g2 = HexToInt(ColorB.substring(2,4)); var b2 = HexToInt(ColorB.substring(4,6)); // calculate size of step for each color component var rStep = Math.round((r2 - r) / len); var gStep = Math.round((g2 - g) / len); var bStep = Math.round((b2 - b) / len); // fill Colors array with fader colors for (i = 0; i < len-1; i++) { Colors[i] = "#" + IntToHex(r) + IntToHex(g) + IntToHex(b); r += rStep; g += gStep; b += bStep; } Colors[len-1] = ColorB; // make sure we finish exactly at ColorB } // I</div></div> <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="4667">上一篇:狡猾的按钮特效</a></li> <li class="next"><a href="1935">下一篇:内容显示隐藏效果</a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明:</strong> 本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34212' title='据消息传百度将要控股携程 整合去哪儿' target="_blank"> 据消息传百度将要控股携程 整合去哪儿</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34308' title='迅雷再次在美提交IPO申请' target="_blank"> 迅雷再次在美提交IPO申请</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/6918' title='用户喊话当当网:我彻底把你们丢弃了' target="_blank"> 用户喊话当当网:我彻底把你们丢弃了</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/10841' title='华为任正非:家族成员不会成为接班人' target="_blank"> 华为任正非:家族成员不会成为接班人</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/6865' title='王建宙解构OTT效劳 中移动重塑飞信平台' target="_blank"> 王建宙解构OTT效劳 中移动重塑飞信平台</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34249' title='美剧讲硅谷创业者:远不及现实荒诞?' target="_blank"> 美剧讲硅谷创业者:远不及现实荒诞?</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34372' title='从旗下三大业务BG发展看华为的过去现在和未来' target="_blank"> 从旗下三大业务BG发展看华为的过去现在和未来</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34312' title='京东物流"最后一公里":颠覆阿里或者被阿里干掉' target="_blank"> 京东物流"最后一公里":颠覆阿里或者被阿里干掉</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34210' title='FB上广告费用昂贵而且效果不及Twitter' target="_blank"> FB上广告费用昂贵而且效果不及Twitter</a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/cloud/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/vps1.png" alt="香港云服务器 免备案 云主机VPS 国内 独立IP 独享15M 月付SSD" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/ItNews/440 title='中国联通困局:遭遇OTT宽带4G三大难题' target="_blank"> 中国联通困局:遭遇OTT宽带4G三大难题</a></li> <li class="articleAbout"><a href=/ItNews/34159 title='为啥苹果定要出廉价iPhone?都是安卓逼的 ' target="_blank"> 为啥苹果定要出廉价iPhone?都是安卓逼的 </a></li> <li class="articleAbout"><a href=/ItNews/34160 title='微软为避免代理权争夺 与大股东达成和解协议' target="_blank"> 微软为避免代理权争夺 与大股东达成和解协议</a></li> <li class="articleAbout"><a href=/ItNews/10806 title='微软谷歌高层访韩面前:忌惮三星的崛起 ' target="_blank"> 微软谷歌高层访韩面前:忌惮三星的崛起 </a></li> <li class="articleAbout"><a href=/ItNews/34122 title='墨迹天气:产品创新以攻为守方能对抗巨头' target="_blank"> 墨迹天气:产品创新以攻为守方能对抗巨头</a></li> <li class="articleAbout"><a href=/ItNews/34166 title='苹果多色彩!葫芦里究竟卖的什么药' target="_blank"> 苹果多色彩!葫芦里究竟卖的什么药</a></li> <li class="articleAbout"><a href=/ItNews/428 title='支付宝被曝严重破绽 隐私平安再受质疑' target="_blank"> 支付宝被曝严重破绽 隐私平安再受质疑</a></li> <li class="articleAbout"><a href=/ItNews/34124 title='苏宁易购成世界最慢电商 专家称其涉嫌违约' target="_blank"> 苏宁易购成世界最慢电商 专家称其涉嫌违约</a></li> <li class="articleAbout"><a href=/ItNews/34302 title='逆转猜想:如果阿里成为雅虎大股东会怎样?' target="_blank"> 逆转猜想:如果阿里成为雅虎大股东会怎样?</a></li> <li class="articleAbout"><a href=/ItNews/10834 title='三星维修新规:Galaxy S4主板进水也收费修' target="_blank"> 三星维修新规:Galaxy S4主板进水也收费修</a></li> <li class="articleAbout"><a href=/ItNews/34399 title='让一让,小米4来了,碰见米粉请务必绕道走!' target="_blank"> 让一让,小米4来了,碰见米粉请务必绕道走!</a></li> <li class="articleAbout"><a href=/ItNews/34392 title='任正非:喜马拉雅山的水为什么不能流入亚马逊河?' target="_blank"> 任正非:喜马拉雅山的水为什么不能流入亚马逊河?</a></li> <li class="articleAbout"><a href=/ItNews/34307 title='迅雷向美SEC提交IPO招股书:拟最多筹资1亿美元' target="_blank"> 迅雷向美SEC提交IPO招股书:拟最多筹资1亿美元</a></li> <li class="articleAbout"><a href=/ItNews/34433 title='网易微博将正式关闭 用户迁至轻博客LOFTER' target="_blank"> 网易微博将正式关闭 用户迁至轻博客LOFTER</a></li> <li class="articleAbout"><a href=/ItNews/34225 title='薛蛮子取保后首次发微博表示:辜负你们了' target="_blank"> 薛蛮子取保后首次发微博表示:辜负你们了</a></li> <li class="articleAbout"><a href=/ItNews/10804 title='联发科享用价钱战 专利难以摆脱高通 ' target="_blank"> 联发科享用价钱战 专利难以摆脱高通 </a></li> <li class="articleAbout"><a href=/ItNews/677 title='微信收费形式三选一 腾讯或变身运营商' target="_blank"> 微信收费形式三选一 腾讯或变身运营商</a></li> <li class="articleAbout"><a href=/ItNews/34257 title='“组合拳”怎么打 拆解小米新玩法' target="_blank"> “组合拳”怎么打 拆解小米新玩法</a></li> <li class="articleAbout"><a href=/ItNews/34441 title='银河证券王锦炎:金融业如何使用大数据' target="_blank"> 银河证券王锦炎:金融业如何使用大数据</a></li> <li class="articleAbout"><a href=/ItNews/34408 title='二代 iPad Air将配备2GB内存?为同屏多任务做准备' target="_blank"> 二代 iPad Air将配备2GB内存?为同屏多任务做准备</a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接:</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2025 爱易网页 当前在线:195人 网站在6时31分57秒内访问总人数:79143人 当前 1.91% <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>