Web_CSS_通过不断设置广告位置来实现广告停留视野效果;

原创

cyb_23 2023-08-22 10:22:18 博主文章分类：Web ©著作权

©著作权归作者所有：来自51CTO博客作者cyb_23的原创作品，请联系作者获取转载授权，否则将追究法律责任

>html源码

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<title>对联广告效果</title>
	</head>

	`<body>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<script src="js/ad-02.js" language="JavaScript"></script>
	</body>
</html>

>JS源码

var delta = 0.8;
var collection;		// 广告集合；
var closeB = false;	// 默认不关闭广告；

/**
* 广告构造函数
*/
function Floaters() {
	this.items	= []; // 广告数组；
	
	// addItem方法：
	this.addItem = function(id, x, y, content)
    {
		// 输出广告：
		document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval（x):x)+';top:'+(typeof(y)=='string'?eval（y):y)+'">'+content+'</DIV>');
		
		// 添加信息：
		var newItem	={};
		newItem.object = document.getElementById(id);
		newItem.id = id;
		newItem.x = x;
		newItem.y = y;

		// 添加广告对象：
		this.items[this.items.length]	= newItem;
	}
	
	// play方法：
	this.play	= function()
	{
		collection	= this.items;
		setInterval('play()',1000);	//隔30毫秒运行play()方法，也是通过这样的方法实现广告移动；
	}
}


/**
* 运行
*/	
function play()
{
	if(screen.width<=800 || closeB)
	{// 不显示所有DIV：
		for(var i=0;i<collection.length;i++)
		{
			collection[i].object.style.display	= 'none';
		}
		return;
	}
	
	
	for(var i=0;i<collection.length;i++)
	{
		var followObj = collection[i].object;	//广告；
		var followObj_x	 = (typeof(collection[i].x)=='string'?eval（collection[i].x):collection[i].x);	// 如果为字符串请用eval（)方法执行计算；
		var followObj_y	= (typeof(collection[i].y)=='string'?eval（collection[i].y):collection[i].y);

		// 设置left属性：
		//followObj.offsetLeft: 离浏览器左边距离；
		if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
			var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
			dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
			followObj.style.left=followObj.offsetLeft+dx;
		}

		// 设置top属性：
		// followObj.offsetTop：离顶端多少距离；
		// document.body.scrollTop: 滚动条离顶端的距离；
		if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
			var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
			dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
			followObj.style.top=followObj.offsetTop+dy;
		}
	}
}


/**
* 关闭_由onClick事件调用
*/	
function closeBanner()
{
	closeB=true;
	return;
}


/**
* 创建对象
*/	
var theFloaters	 = new Floaters();
// 添加广告_document.body.clientWidth得到浏览器宽度；
theFloaters.addItem('followDivRight','document.body.clientWidth-106',80,'<a href=http://www.divcss5.com/ target=_blank><img src=img/ad-01.gif ></a><br><br><img src=img/close.gif onClick="closeBanner();">');
theFloaters.addItem('followDivLeft',6,80,'<a href=http://www.divcss5.com/ target=_blank><img src=img/ad-01.gif></a><br><br><img src=img/close.gif onClick="closeBanner();">');
theFloaters.play();