首页 / JAVASCRIPT / 兼容性非常好的js右下角与漂浮广告代码_布局与层

兼容性非常好的js右下角与漂浮广告代码_布局与层

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了兼容性非常好的js右下角与漂浮广告代码_布局与层，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2501字，纯文字阅读大概需要4分钟。

内容图文

兼容ie6 7 8 ,ff3.5 3.6,chrome 4.1.2,safari
重新修正
1.滚动时抖动的问题，主要体现在ff3.6上
2.加入了ie6下的固定
3.分成了两个块，xhtml,html解析
4.随着屏幕大小而变动

兼容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://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 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==undefined?'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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的兼容性非常好的js右下角与漂浮广告代码_布局与层全部内容，希望文章能够帮你解决兼容性非常好的js右下角与漂浮广告代码_布局与层所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/312917.html

来源：【匿名】

【上一篇】window.location.hash使用说明_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【兼容性非常好的js右下角与漂浮广告代码_布局与层】教程文章相关的互联网学习教程文章

javascript标签页切换功能（极简代码）【代码】【图】

1<!doctype html> 2<html lang="en"> 3<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 4<head> 5<meta charset="UTF-8"> 6<title>boss爱国</title> 7<style> 8 body{background:#ececec;margin:0;} 9 #test{width:100%;height:40px;background:#fff;}10 .btn{padding:11px 16%;float:left;list-style:none;}11 .focus{border-bottom:1px solid #269be8; color:#269be8;}12 .line{width: 1px;...

JavaScript 之解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码【代码】

这里以解码百度访问统计代码构造函数为示例：　　以下为要统计JavaScript源码：红色加粗部分将是要修改的地方。eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!‘‘.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return‘\\w+‘};c=1};while(c--){if(k[c]){p=p.replace(new RegExp(‘...

浏览器中的JavaScript执行机制：08 | 调用栈：为什么JavaScript代码会出现栈溢出？【代码】【图】

前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录　　在上篇文章中，我们讲到了，当一段代码被执行时，JavaScript 引擎先会对其进行编译，并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范。　　那么接下来我们就来明确下，哪些情况下代码才算是“一段”代码，才会在执行之前就进行编译并创建执行上下文。一般说来，有这么三种情况：　　1、当 JavaScript 执行全局代码的时候，会编译全局代码并创建...

C#执行javascript代码【代码】【图】

最近在做网站自动登陆小工具，遇到技术屏障。密码在submit时会使用js进行加密。这时我需要模拟这个加密过程，想到使用C#执行javascript代码。对于执行javascript代码，纯代码方式使用如下两种方式。1、Google Chrome V8引擎Google Chrome V8引擎在.NET上的封装，功能完善，性能相对较高。地址: http://javascriptdotnet.codeplex.com/using Noesis.Javascript; using System; using System.Collections.Generic;namespace JsCSharp...

vs2010 javascript代码拓展插件支持代码折叠【图】

参考地址原文：http://www.cnblogs.com/zhangwei595806165/p/4739323.html

100个直接可以拿来用的JavaScript实用功能代码片段【代码】【图】

、原生JavaScript实现字符串长度截取 View Code 2、原生JavaScript获取域名主机 View Code 3、原生JavaScript清除空格 View Code4、原生JavaScript替换全部 View Code5、原生JavaScript转义html标签 View Code 6、原生JavaScript还原html标签 View Code 7、原生JavaScript时间日期格式转换 View Code8、原生JavaScript判断是否为数字类型 View Code9、原生JavaScript设置cookie值 View Code10、原生JavaScript获取cookie值 View Co...

【前端小小白的学习之路】JavaScript常用代码书写规范【代码】

javascript 代码规范代码规范我们应该遵循古老的原则：“能做并不意味着应该做”。全局命名空间污染总是将代码包裹在一个立即的函数表达式里面，形成一个独立的模块。不推荐var x = 10,y = 100;console.log(window.x + ‘‘ + window.y);推荐;(function(window){‘use strict‘;var x = 10,y = 100;console.log(window.x + ‘‘ + window.y);}(window));立即执行函数在立即执行函数里面，如果有用到全局变量应该通过变量传递的方式...

JavaScript代码规范及其他注意事项

代码执行一般自上而下，变量需要在使用的函数段之前进行声明并赋予初值。代码规范书写：　　　　　　1.选中代码段后使用Tab键，可令代码段整体向右移动一段位置（一般是4位），善用Tab键可使得代码段对齐变得更容易。代码段对齐，可读性更好。　　　　　2.等号“=”、加号“+”等数学运算符两边应空出1位。如 x = x + 1;　　　　　　3.添加注释一般使用“//”。注释应简明易懂。　　　　　　4.代码段合理使用空行可提升可读性...

如何将 JavaScript 代码添加到网页中，以及 <script> 标签的属性【图】

Hello, world!本教程的这一部分内容是关于 JavaScript 语言本身的。但是，我们需要一个工作环境来运行我们的脚本，由于本教程是在线的，所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令（比如 alert），所以如果你打算专注于另一个环境（比如 Node.js），你就不必多花时间来关心这些特定指令了。我们将在本教程的下一部分中专注于浏览器中的 JavaScript。首先，让我们看看如何将脚本添加到网页上。对于服务器端...

初涉JavaScript模式 (13) : 代码复用【上】【代码】

引子博客断了一段时间，不是不写，一是没时间，二是觉得自己沉淀不够，经过一段时间的学习和实战，今天来总结下一个老生常谈的东西：代码复用。为何复用JS门槛低，故很多人以为写几个特效就会JS，其实真正混前端的人都知道，JS写的好和写的不好差距是很大的，前段时间看到一个前端为了实现一个浮层的显示与隐藏花了100多行代码，去遍历各个子元素，挨个去设置display。还有一个很常见的场景，为了给一个UL下面的n个li绑定事件，遂...

Head First JavaScript 第二章：2 编写代码【图】

2019-12-0210:49:26开发一款战舰游戏原文：https://www.cnblogs.com/JasonPeng1/p/11969746.html

javascript组件封装中一段通用代码解读【图】

有图有真相，先上图。相信很多想去研究源码的小伙伴一定被这段代码给吓着了把，直接就打消了往下看下去的想法。我刚开始看的时候也是有点一头雾水，这是什么东东这么长，但是慢慢分析你就会发现其中的奥秘，且听我慢慢到来。首先我们先来看一下整体的结构。（function (global, factory) {}）（this, (function() {})）,这个看着是不是还有点不明白，那（function (a ,b) {console.log(a,b)}）(a, b)这个你总不会陌生了把，就是把a...

[CoffeeScript]以优美方式编写JavaScript代码

??我用JavaScript 编程很多年了，写了大量的JS代码，即便是我这样的经历，但我仍然还在努力地去写出更优美的JS代码，在这篇文章中，我将探索为什么写出漂亮的JS代码是如此困难，如何使用CoffeScript（一种简约且能编译成JS的语言）改善它。什么是优美的代码？我想从个人观点来声明如何定义优美代码1、优美的代码是使用更少的代码解决问题；2、优美的代码是可读而且易理解的3、优美的代码是一段既没有什么可以需要添加也没有什么多余...

javascript显示年月日时间代码显示电脑时间【代码】【图】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>显示当前北京时间</title><script language=Javascript>function time() {//获得显示时间的div t_div = document.getElementById(‘showtime‘);var now =new Date()//替换div内容 t_div.innerHTML ="现在是"+ now.getFullYear() +"年"+ (now.getMonth() +1) +"月"+ now.getDate() +"日"+ now.getHours() +"时"+ now.getMinutes() +"分"+ now.g...

编写高质量代码、学习笔记——Javascript篇【代码】

一、良好的编程习惯1.避免JS冲突 1>使用匿名函数将脚本包起来，减少全局变量，避免冲突。 2>团队项目有必要添加必要注释：包括功能、编写人员名称、编写人员联系方式、编写时间。 3>使用命名空间，用作不同功能之间的通信——使用一个{}对象类型的变量作为全局变量<script type="text/JavaScript"> var GLOBAL = {}; GLOABL.namespace = function(str){var arr = atr.split("."),o = GLOBAL;for ( i = (arr[0] =...

首页 / JAVASCRIPT / 兼容性非常好的js右下角与漂浮广告代码_布局与层

兼容性非常好的js右下角与漂浮广告代码_布局与层

内容导读

内容图文

内容总结

内容备注

内容手机端

【兼容性非常好的js右下角与漂浮广告代码_布局与层】教程文章相关的互联网学习教程文章

兼容性 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程