一个很好用的滚动跟随广告代码!

最新推荐文章于 2022-02-20 18:07:13 发布

原创最新推荐文章于 2022-02-20 18:07:13 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

客户端技巧专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页元素动态定位方法。通过监听页面滚动与窗口大小变化，实时调整指定元素的位置，确保其始终处于屏幕可见范围内。代码中还包含了简单的CSS样式设置，用于定义元素的基本外观。

var marginTop = 0;
var firstTop = 0;
function move() {
	scrollTop = (document.body.scrollTop || document.documentElement.scrollTop);
	$("#rightDiv").css("margin-top", parseInt(scrollTop) + parseInt(firstTop) + "px");
}
window.onscroll = move;
window.onresize = function() {
	scrollTop = (document.body.scrollTop || document.documentElement.scrollTop);
	$("#rightDiv").css("margin-top", parseInt(scrollTop) + parseInt(firstTop) + "px");
};
//-->
//关闭按钮
//显示样式
document.writeln("<style type=\"text\/css\">");
document.writeln("#leftDiv,#rightDiv{width:159px;height:400px; z-index:999;position:absolute;}");
document.writeln(".itemFloat{width:159px;height:auto;line-height:5px}");
document.writeln("<\/style>");
//------左侧各块结束
document.writeln("<div id=\"rightDiv\" style=\"top:40px;right:40px\">");
//------右侧各块结束
//---R1
document.writeln("<div id=\"right1\" class=\"itemFloat\">");
document.writeln("<div><img src=\"images/top_01.png\" width=\"159\" height=\"19\" /></div><div style=\"background:url(images/g_05.jpg); padding-left:5px;\"> <a href=\"http://www.izhushen.com/activity/chongzhi1/lingqu.html\"><img src=\"images/lqjhm_01.jpg\"  /></a></div>");
document.writeln("<\/div>");
//------右侧各块结束
document.writeln("<\/div>");