您的位置:首页 > 其它

网页右下角固定图片(不随滚动条滑动,始终在固定位置)

2015-08-12 10:18 441 查看
方法一:CSS实现:

优点:不会由于屏幕分辨率不同出现问题

缺点:没有滑动效果,不支持IE6

Html代码:

<div style="position: fixed; bottom: 60px; right: 20px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid; z-index: 9999; ">
<img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" />
</div>


方法二:CSS实现:

优点:不会由于屏幕分辨率不同出现问题

缺点:没有滑动效果,元素不会随着屏幕滚动而一直在右下角

<div style="position:absolute; bottom:60; right:20; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid; z-index: 9999; ">
<img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" />
</div>


方法三:JS实现:

优点:会有滑动效果。

缺点:实际应用中显示屏分辨率不同会出现滚动条无限下拉的情况,如果显示在屏幕中间应该不会出现问题

web页面Html代码:

<div id="FloatDIV" style="position: absolute;top: 0px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid; z-index:9999">
<img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" />
</div>


Js代码:

var MarginLeft = 50;    //浮动层离浏览器右侧的距离
var MarginTop = 500';   //浮动层离浏览器顶部的距离
var Width = 105;            //浮动层宽度
var Heigth = 105;           //浮动层高度

//设置浮动层宽、高
function Set() {
document.getElementById("FloatDIV").style.width = Width + 'px';
document.getElementById("FloatDIV").style.height = Heigth + 'px';
}

//实时设置浮动层的位置
function Move() {
var b_top = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
var b_width = document.body.clientWidth;
document.getElementById("FloatDIV").style.top = b_top + MarginTop;
document.getElementById("FloatDIV").style.left = b_width - Width - MarginLeft + 'px';
setTimeout("Move();", 100);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: