方法一:CSS实现:
优点:不会由于屏幕分辨率不同出现问题
缺点:没有滑动效果,不支持IE6
Html代码:
1 <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; "> 2 <img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" /> 3 </div>
方法二:CSS实现:
优点:不会由于屏幕分辨率不同出现问题
缺点:没有滑动效果,元素不会随着屏幕滚动而一直在右下角
1 <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; "> 2 <img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" /> 3 </div>
方法三:JS实现:
优点:会有滑动效果。
缺点:实际应用中显示屏分辨率不同会出现滚动条无限下拉的情况,如果显示在屏幕中间应该不会出现问题
web页面Html代码:
1 <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"> 2 <img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" /> 3 </div>
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 }