zoukankan      html  css  js  c++  java
  • 网页右下角固定图片(不随滚动条滑动,始终在固定位置)

    方法一: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 }
  • 相关阅读:
    3D Bezier Curve, Matlab Code
    Matlab Bezier
    python与matlab混合编程
    Matlab P文件——加快Matlab程序,保护你的算法(z)
    Simens NX (原UG)内部代码逆向分析 / Inner code Reverse analysis of NX software
    Matlab扩展编程
    《数值分析及其MATLAB实现》(任玉杰)扫描版[PDF]
    NURBS Toolbox by D.M. Spink (matlab)
    贝塞尔曲线
    BSpline & NURBS (Matlab Code)
  • 原文地址:https://www.cnblogs.com/xiaoerlang90/p/4723399.html
Copyright © 2011-2022 走看看