- 浏览: 38414 次
- 性别:
- 来自: 郑州
最近访客 更多访客>>
最新评论
-
ngn9999:
天下文章一大抄
让Flash乖乖躲到Div浮动层下去 -
cqujsjcyj:
先说声谢谢啊,
下了你的东西,但是这个QQ客服怎么点了,不出现 ...
qq客服随滚动条滚动 -
fighter-to:
这是csdn上的,请楼主表明出处。
杨澜告诫女孩
最近工作中遇到了随滚动条滚动的层,在网上查了下有很多关于这方面的内容,感觉有点麻烦,还是自己总结下的好,既简单又实用。代码如下:
<script type="text/javascript">
function FloatTop()
{
var startX1 =document.body.scrollLeft+document.body.offsetWidth-115 ,startY1 = document.documentElement.scrollTop+100;
var startX2 = 0,startY2 = document.documentElement.scrollTop+100;
var ns = (navigator.appName.indexOf("Microsoft") != -1);
var d = document;
function ml(id,startX,startY)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
el.y = startY;
return el;
}
window.stayTopLeft=function()
{
// var pY = ns ? document.documentElement.scrollTop : document.body.scrollTop;
var pY=document.documentElement.scrollTop;
ftlObj.y += (pY + startY1 - ftlObj.y)/8;
ftlObj1.y += (pY + startY2 - ftlObj1.y)/8;
ftlObj.sP(document.body.scrollLeft+document.body.offsetWidth-115, ftlObj.y);
ftlObj1.sP(ftlObj1.x, ftlObj1.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("rightaa",0,document.documentElement.scrollTop+100);
ftlObj1 = ml("leftaa",5,document.documentElement.scrollTop+100);
stayTopLeft();
}
FloatTop();
function closeDiv(objID)
{
document.getElementById(objID).style.display="none";
}
</script>
<div class="qq_box left" id="leftaa" name="leftaa" style="position:absolute; left:2px; top:107px;">ddd</div>
<div class="qq_box1 right" id="rightaa" name="rightaa" style="position:absolute; right:2px; top:107px;">ddd</div>
<a title="关闭窗口" href="javascript:void(0);" onclick="closeDiv('leftaa');">×</a>//关闭左侧窗口
<a title="关闭窗口" href="javascript:void(0);" onclick="closeDiv('rightaa');">×</a>//关闭右侧窗口
- div.rar (9.5 KB)
- 下载次数: 18
发表评论
-
图片无缝左右滚动
2010-11-09 12:38 1108<!DOCTYPE html PUBLIC " ... -
更换颜色点击不同的按钮
2010-03-24 16:48 869<link id="cssChange&quo ... -
更换图片
2010-03-24 16:40 1290<div id=oTransContainer ... -
点击按钮弹出层
2010-03-24 16:26 1797<script>function msg(in ... -
滑动导航二级菜单
2010-03-24 16:03 935//css样式 .blogNav{width:950px;m ... -
不同效果的图片更换
2010-03-24 15:44 1260//页面显示 <div id=imgADPlayer& ... -
单行多条信息滚动
2010-03-24 15:36 889//css样式 #shangfan{font-size: 1 ... -
css 之 ime-mode
2009-12-09 08:48 889css 之 ime-mode 语法: ime-mode : a ... -
IE7和Firefox中背景颜色的解决方法
2009-09-21 11:59 1370昨天制作页面的时候,遇到一问题:div外层定义的背景颜色不显示 ... -
网页设计趋势之:”勾引”用户的按钮
2009-09-07 09:03 731文章来自:http://www.68design.net/We ... -
ie6,ie7高度问题
2009-09-05 18:30 1149I hate IE6! 今天下午遇到一问题:ie6,ie7定 ... -
css实现渐变效果
2009-09-05 18:24 767<!DOCTYPE html PUBLIC " ... -
overflow与text-indent:-9999px 字体隐藏及input value偏移
2009-08-31 15:52 1561文章来自:http://hi.baidu.com/happya ... -
多层边框的css制作-火狐
2009-08-31 15:34 1253Mozilla -moz-outline CSS 有些时候 ... -
CSS3中的text-shadow属性:文字阴影
2009-08-25 15:32 1193经常会看到页面中文字阴影的效果,觉得很漂亮,一般做这样的效果都 ... -
七招帮你提高网页设计水平
2009-08-25 15:09 762文章来自:http://news.csdn.net/a/200 ... -
CSS hack:区分IE6,IE7,firefox
2009-07-02 08:42 751文章转自:http://www.div-css.com/htm ... -
实用代码片段
2009-05-26 11:01 6291.设为首页 收藏本站 <a href=# oncl ... -
qq客服随滚动条滚动
2009-05-20 08:41 913近段时间用到qq客服的内容比较多,在这总结一下。 -
CSS---竖着的文字导航菜单制
2009-04-29 17:13 1789来自走走停停看看的博客 网上目前两种方法竖排,一种是用 ...
相关推荐
- **取值**: `scroll`(随滚动条滚动)、`fixed`(固定位置)。 - **作用**: 创建固定的背景效果。 #### 五、可见性与溢出处理 **1. visibility** - **功能**: 设置元素的可见性。 - **取值**: `visible`(可见)...
4. `background-attachment`:决定背景图像是否随滚动条移动,`fixed` 为固定,`scroll` 为随滚动条移动。 5. `background-position`:设置图像位置,如 `background-position: left top;`。 6. 使用简写属性 `...
- `background-attachment`:定义背景图像是否随滚动条移动,`fixed`为固定,`scroll`为随内容滚动。 - `background-position`:设置背景图像的位置,可以使用百分比或像素值。 4. **区块属性**: - `text-align...
- **滚动条与槽轮**:每根滚动条末端都有一个槽轮,当轨迹球滚动时,槽轮随之旋转。 - **LED与光敏晶体管**:位于槽轮两侧,通过遮挡光线的方式计算槽轮的旋转次数,进而确定鼠标的位移量。 #### 四、硬件实现 文档...
4. **`background-attachment`**:设定背景图像是否随滚动条移动,`fixed`为固定,`scroll`为随页面滚动。 5. **`background-position`**:定义背景图像的位置,如`left top`表示左上角。 6. **简写方式**:`...
- `background-attachment`:指定背景图片是否随滚动条移动,`fixed` 表示固定,`scroll` 表示滚动。 - `background-position`:设置背景图片的位置,如 `background-position: left top;`。 - `background`:...
85:沪江英语网3图弹性广告下载 86:SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88:用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90:奥林匹克运动会焦点广告下载 91:一种选项卡样式...
85:沪江英语网3图弹性广告下载 86:SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88:用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90:奥林匹克运动会焦点广告下载 91:一种选项卡样式...
- `background-attachment`:设置背景图片是否随滚动而滚动,`fixed`表示固定,`scroll`表示跟随内容滚动。 - `background-position`:设定背景图片的位置,可以是水平和垂直的百分比或像素值。 - `background`:...
- `sticky`:粘性定位,基于用户滚动位置定位。 - **浮动**:通过`float`属性可以让元素脱离文档流,向左或向右移动。 #### 四、常见布局模式 ##### 4.1 水平居中布局 - **方法一**:使用`margin: auto`自动计算...
- `scroll`: 显示滚动条。 - `auto`: 自动处理。 ### 示例 ```css /* 示例CSS */ .color { color: #999999; /* 文字颜色 */ font-family: Arial, sans-serif; /* 字体 */ font-size: 9pt; /* 字体大小 */ ...