论广告图片在浏览器的固定位置

Hi,all 2018-06-25 08:38:00
大家在上网时经常会看到有一些网页左侧、右侧或右下底部的广告图片,无论滚动条如何滚动这些内容一直在浏览器的固定位置。两种实现方式:
一:通过CSS3的position属性的值fixed,即固定定位。它的定位基准不是祖先元素,而是浏览器窗口。
二:通过JavaScript中的DOM对象获取元素位置设定。可以做成一个工具类,方便以后使用,不需要再调网页中元素的位置。
var adverTop;//层距页面顶端距离
var adverLeft;//层距页面左端距离
var adverObj;//层对象
function inits(){
adverObj=document.getElementById("float");//获得层对象
//IE浏览器
if(adverObj.currentStyle){
adverTop=parseInt(adverObj.currentStyle.top);
adverLeft=parseInt(adverObj.currentStyle.left);
}else {
//其他浏览器
adverTop=parseInt(document.defaultView.getComputedStyle(adverObj,null).top);
adverLeft=parseInt(document.defaultView.getComputedStyle(adverObj,null).left);
}
}
function move() {
var sTop=parseInt(document.documentElement.scrollTop || document.body.scrollTop);
var sLeft=parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
adverObj.style.top=adverTop+sTop+"px";
adverObj.style.left=adverLeft+sLeft+"px";
}
window.onload=inits;
window.onscroll=move;
...全文
184 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复

50,639

社区成员

发帖
与我相关
我的任务
社区描述
Java相关技术讨论
javaspring bootspring cloud 技术论坛(原bbs)
社区管理员
  • Java相关社区
  • 小虚竹
  • 谙忆
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧