js兼容多个浏览器右下角漂浮广告 -- [页面特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

js兼容多个浏览器右下角漂浮广告

深山工作室 2013/12/31 19:47:11 深山行者字体:大中小浏览 7651

js兼容多个浏览器右下角漂浮广告

兼容ie6 7 8 ,ff3.5 3.6,chrome 4.1.2,safari

xhtml1.0解析

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://<a name="qihoosnap0"></a>www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Untitled Document</title>
<style>
html,body{
padding:0;
margin:0;
}
</style>
</head>
<body>
<div <a name="qihoosnap5"></a>id="aa" style="width:100px;height:100px;background:#c0c0c0;" >我在随平滚</div>
<div id="bb" style="width:100px;height:100px;background:#c0c0c0;" >我静止不动</div>
<div style="width:100%;height:1500px;background:#000"></div>
<div style="width:100%;height:1500px;background:green"></div>
<div style="width:100%;height:1500px;background:red"></div>
</body>
</html>
<script>
function scrollx(p){
var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent),style,timer;
if(o){
o.style.cssText +=";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.l==undefi<a name="qihoosnap3"></a>ned?'right:0;':'left:'+p.l+'px;')+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');
if(p.f&&ie6){
o.style.cssText +=';left:expression(documentElement.scrollLeft + '+(p.l==undefined?dd.clientWidth-o.offsetWidth:p.l)+' + "px");top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';
}else{
if(!p.f){
w.onresize = w.onscroll = function(){
clearInterval(timer);
timer = setInterval(function(){
//双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0
var st = (dd.scrollTop||db.scrollTop),c;
c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);
if(c!=0){
o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
}else{
clearInterval(timer);
}
},10)
}
}
}
}
}
scrollx({
id:'aa'
})
scrollx({
id:'bb',
l:0,
t:200,
f:1
})
/*
id 你要滚动的内容的id
l 横坐标的位置 不写为紧贴右边
t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边
f 1表示固定 不写或者0表示滚动
*/
</script>

html4.01解析

以下为详细代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Untitled Document</title>
<style>
html,body{
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="aa" style="width:100px;height:100px;background:#c0c0c0;" >我在随平滚</div>
<div id="bb" style="width:100px;height:100px;background:#c0c0c0;" >我静止不动</div>
<div style="width:100%;height:1500px;background:#000"></div>
<div style="width:100%;height:1500px;background:green"></div>
<div style="width:100%;height:1500px;background:red"></div>
</body>
</html>
<script>
function scroll(p){
var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie = /msie/i.test(navigator.userAgent),style,timer;
if(o){
//ie8下position:fixed下top left失效
o.style.cssText +=";position:"+(p.f&&!ie?'fixed':'absolute')+";"+(p.l==undefined?'right:0;':'left:'+p.l+'px;')+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');
if(p.f&&ie){
o.style.cssText +=';left:expression(body.scrollLeft + '+(p.l==undefined?db.clientWidth-o.offsetWidth:p.l)+' + "px");top:expression(body.scrollTop +'+(p.t==undefined?db.clientHeight-o.offsetHeight:p.t)+'+ "px" );'
db.style.cssText +=";background-image:url(about:blank);background-attachment:fixed;"
}else{
if(!p.f){
w.onresize = w.onscroll = function(){
clearInterval(timer);
timer = setInterval(function(){
var st = db.scrollTop,c;
c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||db.clientHeight)-o.offsetHeight);
if(c!=0){
o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
}else{
clearInterval(timer);
}
},10)
}
}
}
}
}
scroll({
id:'aa'
})
scroll({
id:'bb',
l:0,
t:200,
f:1
})
/*
id 你要滚动的内容的id
l 横坐标的位置 不写为紧贴右边
t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边
f 1表示固定 不写或者0表示滚动
*/
</script>

前一页:兼容pc、移动端用js实现复制内容到剪切板（支持苹果safari浏览器）

后一页:兼容ie6+和火狐的禁止右键

相关阅读: 从数据库管理下手提升网站安全; 网页中自动换行问题; 微信小程序-接入广告; 熟记ASP+Access数据库的18条安全法则; 文本框输入限制; div+css黑色焦点图(幻灯片效果非常不错); 深山留言板钓鱼岛效果; uni-app基础知识数据绑定

共有0条关于《js兼容多个浏览器右下角漂浮广告》的评论: 发表评论

正在加载评论......

返回顶部发表评论

呢称:
表情:
内容:	评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码:

网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery下拉到某个固定位置然后某些元素发生改变样式状态; canvas绘制的文字如何换行; 兼容pc、移动端用js实现复制内容到剪切板（支持苹果safari浏览器）; js兼容多个浏览器右下角漂浮广告; 兼容ie6+和火狐的禁止右键; 做在线客服时，聊天窗口的div滚动条始终在底部

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 带时钟的台历：一个非常非常漂亮的台历; 深山行者留言系统V2.0 (简称留言板V2.0); 纯CSS制作的网页中的lightbox效果; jquery实现移动端下拉加载刷新更多信息; jquery实现下拉加载更多; 一个几个图片来回变幻的超炫的图片转换效果

更多标签热门标签

样式固定设为首页浏览器分辨率指向文化 ajax 背景标签提示标注 ie7 系统 asasds 网页 checkbox ico 论坛 email text 命名 form 文字样式闭合硬件强度文件大小改变左右全 input 源文件类别框移绝对管用的iis安装包下载 textarea input 拖动 Response 保留替换许愿墙网易 IE8 技巧压缩表达客户端 FlashFxp 生成获取