网页右下角固定图片（不随滚动条滑动，始终在固定位置）

您所在的位置：网站首页 › html图片跟随滚动 › 网页右下角固定图片（不随滚动条滑动，始终在固定位置）

网页右下角固定图片（不随滚动条滑动，始终在固定位置）

2023-10-31 23:27| 来源: 网络整理| 查看: 265

方法一：CSS实现：

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

缺点：没有滑动效果，不支持IE6

Html代码：

1 2 3

方法二：CSS实现：

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

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

1 2 3

方法三：JS实现：

优点：会有滑动效果。

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

web页面Html代码：

1 2 3

Js代码：

1 var MarginLeft = 50; //浮动层离浏览器右侧的距离 2 var MarginTop = 500'; //浮动层离浏览器顶部的距离 3 var Width = 105; //浮动层宽度 4 var Heigth = 105; //浮动层高度 5 6 //设置浮动层宽、高 7 function Set() { 8 document.getElementById("FloatDIV").style.width = Width + 'px'; 9 document.getElementById("FloatDIV").style.height = Heigth + 'px'; 10 } 11 12 //实时设置浮动层的位置 13 function Move() { 14 var b_top = window.pageYOffset 15 || document.documentElement.scrollTop 16 || document.body.scrollTop 17 || 0; 18 var b_width = document.body.clientWidth; 19 document.getElementById("FloatDIV").style.top = b_top + MarginTop; 20 document.getElementById("FloatDIV").style.left = b_width - Width - MarginLeft + 'px'; 21 setTimeout("Move();", 100); 22 }

【本文地址】

网页右下角固定图片（不随滚动条滑动，始终在固定位置）

网页右下角固定图片（不随滚动条滑动，始终在固定位置）

今日新闻

推荐新闻