jquery动态改变div背景色出现类似跑马灯效果

最新推荐文章于 2023-11-24 10:31:53 发布

liuw510

最新推荐文章于 2023-11-24 10:31:53 发布

阅读量1.9k

点赞数

分类专栏： web前端开发文章标签： jQuery动态设置div背景色出现跑马灯效果

本文链接：https://blog.csdn.net/liuw510/article/details/79557371

版权

web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
/** 定时器执行改变背景色代码*/
setInterval(changeColor,1000);//页面加载完成后每隔1秒执行一次（循环执行）
//setTimeout(changeColor,1000);//页面加载完成后1秒执行（只执行一次）
/** 具体改变背景色代码*/
function changeColor(){
   var d1 = "rgb(255, 0, 0)";
   var d2 = "rgb(0, 128, 0)";
   var d3 = "rgb(0, 0, 255)";
   var d4 = "rgb(255, 165, 0)";
   var d1_1 = $("#d1").css('background-color');
   if(d1_1 == d1){
      $('#d1').css('background',"rgb(0, 128, 0)");
      $('#d2').css('background',"rgb(0, 0, 255)");
      $('#d3').css('background',"rgb(255, 165, 0)");
      $('#d4').css('background',"rgb(255, 0, 0)");
   }else if(d1_1 == d2){
      $('#d1').css('background',"rgb(0, 0, 255)");
      $('#d2').css('background',"rgb(255, 165, 0)");
      $('#d3').css('background',"rgb(255, 0, 0)");
      $('#d4').css('background',"rgb(0, 128, 0)");
   }else if(d1_1 == d3){
      $('#d1').css('background',"rgb(255, 165, 0)");
      $('#d2').css('background',"rgb(255, 0, 0)");
      $('#d3').css('background',"rgb(0, 128, 0)");
      $('#d4').css('background',"rgb(0, 0, 255)");
   }else if(d1_1 == d4){
      $('#d1').css('background',"rgb(255, 0, 0)");
      $('#d2').css('background',"rgb(0, 128, 0)");
      $('#d3').css('background',"rgb(0, 0, 255)");
      $('#d4').css('background',"rgb(255, 165, 0)");
   }


}
</script>
</head>
<body>
<div id="d1" style="width:300px;height:20px;background-color:red;border: 1px solid red;"></div>
<div id="d2" style="width:20px;height:300px;background-color:green;border: 1px solid red;"></div>
<div id="d3" style="width:300px;height:20px;background-color:blue;border: 1px solid red;"></div>
<div id="d4" style="width:20px;height:300px;background-color:orange;border: 1px solid red;margin-left:280px;margin-top:-324px;"></div>
</body>
</html>

效果图示例：
一个周期的循环效果图

liuw510

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery动态改变div背景色出现类似跑马灯效果

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;script src="/jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt;&lt;script&gt;/** 定时器执行改变背景色代码*/setInterval(changeColor,1000);//页面加载完成后每隔1秒执行一次（循环
复制链接

扫一扫