js实现文字闪烁特效的方法

本文实例讲述了基于jquery实现省市联动特效的代码，分享给大家供大家参考，具体如下：

运行效果图：

实现原理：使用style对象来设置css属性，结合定时器就可以实现js实现文字闪烁特效。

具体代码如下

<html>
 <head>
 <meta charset="gb2312" />
 <title>js实现文字闪烁特效</title>
 </head>
<script>
 var flag = 0;
 function start(){
 var text = document.getElementById("myDiv");
 if (!flag)
 {
 text.style.color = "red";
 text.style.background = "#0000ff";
 flag = 1;
 }else{
 text.style.color = "";
 text.style.background = "";
 flag = 0;
 }
 setTimeout("start()",500);
 }
</script>
 <body onload="start()">
 <span id="myDiv">css的世界是如此的精彩！</span>
 </body>
</html>

代码复制即可运行。

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 原生js和jquery中有关透明度设置的相关问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2 原生js设置透明度 为了兼容IE与其他浏览器对透明度的设置,

  • JS实现浏览器状态栏文字闪烁效果的方法

    JS实现浏览器状态栏文字闪烁效果的方法

    本文实例讲述了JS实现浏览器状态栏文字闪烁效果的方法.分享给大家供大家参考,具体如下: 这里演示为你的IE浏览器状态栏增加文字闪烁效果,请看下面的状态栏中的文字一直不停的闪烁,火狐下可能效果不正常,本代码只针对IE浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-txt-blink-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

  • JavaScript通过改变文字透明度实现的文字闪烁效果实例

    JavaScript通过改变文字透明度实现的文字闪烁效果实例

    本文实例讲述了JavaScript通过改变文字透明度实现的文字闪烁效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta charset="utf-8"> <title>JS文字闪烁</title> <style type="text/css"> .title { font-size:50px; font-family:Arial b

  • JS CSS制作饱含热情的镶边文字闪烁特效

    文字闪烁 function glowit(which){ if (document.all.glowtext[which].filters[0].strength==2) document.all.glowtext[which].filters[0].strength=1 else document.all.glowtext[which].filters[0].strength=2 } function glowit2(which){ if (document.all.glowtext.filt

  • javascript感应鼠标图片透明度显示的方法

    本文实例讲述了javascript感应鼠标图片透明度显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>感应鼠标的图片透明度显示效果</title> <head> <script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

  • javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

    平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200

  • JavaScript 平滑文字闪烁

    colors2 = new Array(6); colors2[0]="#fef4d9"; colors2[1]="#333300"; colors2[2]="#665500"; colors2[3]="#997700"; colors2[4]="#CC9900"; colors2[5]="#FFCC00"; var i=0; function fLi2() { line2.style.

  • js改变透明度实现轮播图的算法

    前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法. 实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设置为0,然后在让初始的第一张图片的透明度为1即可,具体算法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>改变透明度算法(经典)</title&

  • js实现鼠标划过给div加透明度的方法

    本文实例讲述了js实现鼠标划过给div加透明度的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> <!-- Begin if ((navigator.appName.indexOf('Microsoft')+1)) { document.write('<style type="text/css"> #div2 a img{ filter:alpha(opacity=100)}

  • js实现感应鼠标图片透明度变化的方法

    本文实例讲述了js实现感应鼠标图片透明度变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>感应鼠标图片透明度变化</title> <SCRIPT language="JavaScript"> <!-- function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100

  • js实现透明度渐变效果的方法

    本文实例讲述了js实现透明度渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止.鼠标移出,透明度慢慢减少,减少到30的效果. 要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值. var alpha=30; 要点二:判断目标值和目前透明值,来判定是正向速度还是负向速度. if(target > alpha){ speed = 2; }else{

随机推荐