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


    方法一: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 }
  • 相关阅读:
    Java日志体系(1) —— 那些年那些事,那些日志的历史
    直播工作原理
    【PAT乙级 】1003. 我要通过!
    [牛客网刷题]被3整除
    [牛客网刷题]牛牛找工作
    Mybatis的简单分析
    数位DP
    正则表达式
    能量球
    从此,我们相伴,不离不弃
  • 原文地址:https://www.cnblogs.com/xiaoerlang90/p/4723399.html
Copyright © 2020-2023  润新知