- 浏览: 493140 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (191)
- Android学习 (3)
- jsp/servlet (2)
- java学习 (44)
- 数据库 (28)
- GWT开发学习 (8)
- 开发中问题 (15)
- JavaScript (48)
- 正则表达式 (1)
- svn配置 (1)
- C# (5)
- SSH (8)
- 找工作面试用 (5)
- DWR开发学习 (0)
- CSS学习 (4)
- AJAX学习 (1)
- Swing (1)
- Json (3)
- Jquery (4)
- Java 网络编程 (1)
- 管理相关 (2)
- Weblogic (1)
- 开发模式 (1)
- web前端 (6)
- 响应式设计 (1)
- Angular (5)
- 其它 (1)
- LESS (1)
- AngularJS (1)
- 负载并发、性能 (4)
- 数据结构与算法 (1)
最新评论
-
世界尽头没有你:
Java并发编程与高并发解决方案网盘地址:https://pa ...
java处理高并发高负载类网站的优化方法 -
叮咚可乐名:
Java并发编程与高并发解决方案网盘地址:https://pa ...
java处理高并发高负载类网站的优化方法 -
叮咚可乐名:
Java并发编程和高并发解决方案视频课程网盘地址:https: ...
java处理高并发高负载类网站的优化方法 -
putonyuer:
如果不是转载 , 要点总结的非常好 , 牛逼。
生产者消费者模式浅析 -
daxun1983:
爱得发疯
java判断是否为汉字和是否有汉字的方法
<!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=utf-8" />
<title>e宝账--帮助中心</title>
<script type="text/javascript">
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) {
cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssPub + ('right:'+p.r+'px;');
} else {
o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');
}
if(p.f&&ie6){
cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssRight + cssTop;
} else {
o.style.cssText += cssTop;
}
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)
}
}
}
}
}
</script>
</head>
<body>
<div style="width:700px; margin:0 auto; height:1000px; background:#ccc">
<div id="float_father">相对固定</div>
<div id="float_father_2">相对固定(动)</div>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div id="float_left">左侧固定</div>
<div id="float_right">右侧固定</div>
<script type="text/javascript">
//左右侧固定浮动的div建议放在html的最低部
//右侧固定
scrollx({id:'float_right', r:0, t:200, f:1});
//左侧固定
scrollx({id:'float_left', t:200, f:1});
//相对父级相定固定
scrollx({id:'float_father', l:300, t:200, f:1});
//页面滚动同时滚动固定对像
scrollx({id:'float_father_2', l:500, t:300, f:0});
/*
scrollx参数说明
id:浮动对象的id
r:右边距(窗口右边距,不写为靠左浮动)
l:左边距(距离父级对象的左边距) “r”和“l”只能有其中一个参数
t:上边距(默认贴着底边,0是贴着顶边)
f:1表示固定(不写或者0表示滚动)
*/
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e宝账--帮助中心</title>
<script type="text/javascript">
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) {
cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssPub + ('right:'+p.r+'px;');
} else {
o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');
}
if(p.f&&ie6){
cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssRight + cssTop;
} else {
o.style.cssText += cssTop;
}
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)
}
}
}
}
}
</script>
</head>
<body>
<div style="width:700px; margin:0 auto; height:1000px; background:#ccc">
<div id="float_father">相对固定</div>
<div id="float_father_2">相对固定(动)</div>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div id="float_left">左侧固定</div>
<div id="float_right">右侧固定</div>
<script type="text/javascript">
//左右侧固定浮动的div建议放在html的最低部
//右侧固定
scrollx({id:'float_right', r:0, t:200, f:1});
//左侧固定
scrollx({id:'float_left', t:200, f:1});
//相对父级相定固定
scrollx({id:'float_father', l:300, t:200, f:1});
//页面滚动同时滚动固定对像
scrollx({id:'float_father_2', l:500, t:300, f:0});
/*
scrollx参数说明
id:浮动对象的id
r:右边距(窗口右边距,不写为靠左浮动)
l:左边距(距离父级对象的左边距) “r”和“l”只能有其中一个参数
t:上边距(默认贴着底边,0是贴着顶边)
f:1表示固定(不写或者0表示滚动)
*/
</script>
</body>
</html>
发表评论
-
jquery 选择器,模糊匹配
2015-04-18 14:58 1839按姓名匹配 1,name前缀为aa的所有div的jquery ... -
window.addEventListener来解决让一个js事件执行多个函数
2015-01-12 15:57 1263可能你也碰到过这种情况,就是在js的代码中用了window. ... -
javascript中ie8/ie9不支持Array.indexOf解决办法
2015-01-12 15:26 1323场景:js中判断一个string是否在一个js的数组中。方法 ... -
实时Javascript开发框架Clouda、Meteor、Firebase对比
2014-05-21 10:57 1113什么是实时Javascript开发框架? 自从2009年N ... -
select边框颜色修改兼容样式
2013-10-28 10:55 5347<!DOCTYPE html PUBLIC " ... -
任意美化你的文件域 <input type="file" /> 兼容各浏览器
2013-08-31 16:23 3609样式: .fileInput{width:10 ... -
JS判断页面是否出现滚动条
2013-08-23 23:04 1377当可视区域小于页面的实际高度时,判定为出现滚动条,即: ... -
JavaScript 图片切割效果
2013-04-01 10:13 894序一(08/07/21) 很久之 ... -
显示输入剩余字数
2013-02-21 15:25 967<!DOCTYPE html PUBLIC " ... -
用js显示google地图总结
2012-11-26 15:37 2761功能较全的一个,可 ... -
js 计算浏览器宽度和高度
2012-11-23 11:42 2956<!DOCTYPE html PUBLIC &qu ... -
怎么样让弹出的DIV显示在网页的中间?
2012-09-05 18:30 1098怎么样让弹出的DIV显示在网页的中间? ... -
DIV固定在屏幕的中间/两侧,不随滚动条移动而改变位置
2012-09-04 18:00 7557<!DOCTYPE html PUBLIC " ... -
图片大小 图片尺寸 计算
2012-08-28 15:05 1126<!DOCTYPE HTML PUBLIC " ... -
enctype="multipart/form-data"中Form参数的获取
2012-08-22 17:40 3020enctype="multipar ... -
js动态增加删除 Table 行
2012-08-07 10:59 1351<html> <head> ... -
JS动态控制鼠标位置,DIV由隐藏显示时控制画面控制
2012-06-29 16:24 6907<!DOCTYPE html PUBLIC " ... -
CSS代替bordercolorlight与bordercolordark
2012-06-11 15:51 2823CSS代替bordercolorlight与bordercol ... -
Javscript Json数据操作(数据增,删,改,查)
2012-06-02 23:30 8104<!DOCTYPE html PUBLIC " ... -
jquery 导航代码,兼容IE6,IE7,FF,OPREA,谷歌
2012-06-02 23:04 1526jquery 导航代码,兼容IE6,IE7,FF,OPREA, ...
相关推荐
悬浮固定DIV_demo,http://blog.csdn.net/ymruseuse/article/details/78589480
DIV滚动悬浮层,页面滚动条滚动,悬浮层保持位置不变!
div悬浮在canvas之上
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
这是一款使用jQuery制作的可以使某个div固定的某个位置的页面布局特效插件。该div固定位置插件可以使侧边栏固定,也可以使顶部div缩小后固定在顶部或使某些按钮固定在页面上,非常实用。
jquery.floatdiv 浮动层固定位置 /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置...
绝对支持IE6 IE7 IE8 和 FF的div层在页面左边固定不动,右边的div层超过页面高度正常滚动。
这个例子是把div固定在设定的地方,不跟着滚动条滚动!
div 悬浮层 类似广告 右下方渐渐弹出
div悬浮实例
四种悬浮DIV提示效果四种悬浮DIV提示效果四种悬浮DIV提示效果四种悬浮DIV提示效果四种悬浮DIV提示效果
jquery实现div悬浮中央的效果(原创)
当页面滚动条滚动到某个高度时,div开始悬浮,当页面滚动到底部时停止浮动,高度记录为最后的浮动高度.
蓝色的jquery固定div悬浮在线客服代码
div+css模板布局 右侧固定,左侧自适应
相对鼠标位置定义div漂浮层,相对鼠标位置定义div漂浮层
div跟随固定在浏览器左边,上下拉动浏览器滚动条时div固定在左边,横向拉动滚动条时DIV会跟随主体而改变位置。
纯CSS实现的DIV悬浮效果,兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。
在页面固定div位置实示例,两种方法比较
简单的div在页面任意拖拽的效果,可以把div放到任意一个地方!