用js实现动态广告

最新推荐文章于 2024-02-12 08:18:52 发布

大雄@

最新推荐文章于 2024-02-12 08:18:52 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： JS 广告

本文链接：https://blog.csdn.net/qq_44160107/article/details/102905825

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在日常生活中，我们经常能见到广告，随着科技的进步，广告的表现形式也越发新颖。在网页上你是否见过会动的广告标语呢？它是如何实现的？我用js实现一个动态广告效果，即从屏幕左边到右边来回滚动，下面我举一个例子给大家参考参考。

效果如图：
在这里插入图片描述

代码部分：

<!DOCTYPE html>

<html lang="en">
<head>
    <title>动态广告</title>
    <style>
		#divAdvert{								/* 字体的样式 */
			position: absolute;
			font:48px arial;
			top:8px;
			left: 0px;
		}
    </style>
</head>
<body>
    <div id="divAdvert">
		这是一个广告……
	</div>

	
	

    <script>
		var switchDirection=false;
		
		function doAnimation(){
			var divAdvert=document.getElementById("divAdvert");			//获取元素divAdvert
			var currentLeft=divAdvert.offsetLeft;				//获取当前位置
			var newLocation;
			
			if(!switchDirection){
				newLocation=currentLeft+2;			//向右移动两个像素
				
				if(currentLeft>=500){			//大于500像素时向左移动
					switchDirection=true;
				}
			}else{
				newLocation=currentLeft-2;			//向左移动两个像素
				
				if(currentLeft<=0){
					switchDirection=false;			//移动到最左边时向右移动
				}
			}
			divAdvert.style.left=newLocation+"px";			//调整字体位置
		}
		
		setInterval(doAnimation,10);  			//每隔10毫秒执行一次doAnimation函数
    </script>
</body>
</html>

以这样的速度，浏览网站的用户更容易看到元素的移动。如果要加快或减慢动画的效率，只需要修改setInterval()的第二个参数即可。怎么样？一个既简单又实用的功能，快去试试吧，也许你能做一个更好看的广告哦！

在这里插入图片描述

大雄@

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用js实现动态广告

在日常生活中，我们经常能见到广告，随着科技的进步，广告的表现形式也越发新颖。在网页上你是否见过会动的广告标语呢？它是如何实现的？我用js实现一个动态广告效果，即从屏幕左边到右边来回滚动，下面我举一个例子给大家参考参考。效果如图：代码部分：<!DOCTYPE html><html lang="en"><head> <title>动...
复制链接

扫一扫

专栏目录