网页右下角固定图片(不随滚动条滑动,始终在固定位置)
2015-08-12 10:18
483 查看
方法一:CSS实现:
优点:不会由于屏幕分辨率不同出现问题
缺点:没有滑动效果,不支持IE6
Html代码:
方法二:CSS实现:
优点:不会由于屏幕分辨率不同出现问题
缺点:没有滑动效果,元素不会随着屏幕滚动而一直在右下角
方法三:JS实现:
优点:会有滑动效果。
缺点:实际应用中显示屏分辨率不同会出现滚动条无限下拉的情况,如果显示在屏幕中间应该不会出现问题
web页面Html代码:
Js代码:
优点:不会由于屏幕分辨率不同出现问题
缺点:没有滑动效果,不支持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); }
相关文章推荐
- 2015 Multi-University Training Contest 7 hdu 5371 Hotaru's problem
- c#委托
- FFmpeg
- leetcode_Roman to Integer
- hive中的NULL分析
- 在 Linux 下用 mkdir 命令来创建目录和子目录
- leetCode #26 Remove Duplicates from Sorted Array
- Linux学习笔记------服务器注意事项
- 日经春秋 20150812
- 在 Linux 下用 mkdir 命令来创建目录和子目录
- Vijos1008 篝火晚会
- Android Studio调试功能使用总结
- uvali5697(DP)
- 网络篇----解析xml
- [转]Nodejs开发框架Express4.x开发手记
- Linux 下挂载硬盘的 方法
- Python解释器
- Android Studio系列教程2--基本设置与运行
- linux下pthread_cancel无法取消线程的原因
- OS中常用的调度算法总结