欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JS實(shí)現(xiàn)頁面懸浮框的實(shí)例代碼

 更新時(shí)間:2021年12月24日 10:17:49   作者:miaoying  
這篇文章主要介紹了基于JS實(shí)現(xiàn)頁面懸浮框的實(shí)例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

當(dāng)滾動(dòng)條下拉時(shí),懸浮框位置不變,主要是 position:fixed;樣式的作用.

當(dāng)下拉到一定程度,接近footer時(shí),我用js控制div消失,往上拉滾動(dòng)條時(shí)又顯示.

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<style type="text/css">
.div1 {
    height:2000px;
}
.div2 {
    width:100%;
    height:35px;
    background-color:#3399FF;
    margin-top:100px;
}
.div2_1{
    position:fixed;
    width:100%;
    height:35px;
    z-index:999;
    background-color:#3399FF;
    top:0px;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}
 .div2_2
    {
        display:none;
    }

 
</style>
<script type="text/javascript">
window.onscroll=function(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    var div2=document.getElementById("div2"); 
    if(t>= 100){ 
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    } 
}
</script>
</head>
<body>
<div class="div1">
    <div id="div2" class="div2"></div>
</div>
</body>
</html>

補(bǔ)充:JavaScript實(shí)現(xiàn)右側(cè)懸浮框

HTML代碼:

<body>
  <div id="div1">
  </div>
</body>

css代碼:

#div1{
    height:150px;
    width:100px;
    background:red;    
    position:absolute;
    right:0px;
    bottom:0px;
}
body{
    height:2000px;
}

javascript代碼

//當(dāng)窗體滾動(dòng)的時(shí)候滴呀
  window.onscroll=function (){
      var obj=document.getElementById("div1");
      //考慮到瀏覽器的兼容性滴呀(被卷去的高度)
      var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                    //瀏覽器可視區(qū)域的高度+物體自身的高度+被卷曲的高度
     // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
    //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
    //move(targetLen);
    //這樣我們就完成了基本的人物我滴
    //方式二:結(jié)果他是要抖動(dòng)滴呀
    //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
    //move(targetLen);
    var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
    move(targetLen);
    //這樣我們的基本功能算是實(shí)現(xiàn)了滴呀
  }
  //這里我們倆加上一個(gè)緩沖運(yùn)動(dòng)滴呀,這樣才方便我們?nèi)ミ@些事情滴呀
  var Timer=null;
  function move(iTarget){
      clearInterval(Timer);//先清除
      var obj=document.getElementById("div1");
      Timer=setInterval(function (){ //距離上面物體的距離滴呀
           var speed=(iTarget-obj.offsetTop)/4;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           //先獲取我們的速度滴呀
           if(obj.offsetTop==iTarget){
               clearInterval(timer); //到達(dá)目的之后,我們就清除元素滴呀
           }else{
               obj.style.top=obj.offsetTop+speed+'px';
           }
      },30)
      //來進(jìn)行我們餓緩沖運(yùn)動(dòng)滴呀
  }

到此這篇關(guān)于基于JS實(shí)現(xiàn)頁面懸浮框的實(shí)例代碼的文章就介紹到這了,更多相關(guān)js頁面懸浮框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js實(shí)現(xiàn)右下角窗口彈出窗口效果

    js實(shí)現(xiàn)右下角窗口彈出窗口效果

    好的朋友經(jīng)常需要彈出信息,這個(gè)功能不錯(cuò)
    2008-09-09
  • 淺談HBuilderX開發(fā)小程序的一些問題

    淺談HBuilderX開發(fā)小程序的一些問題

    本文主要介紹了HBuilderX開發(fā)小程序的一些問題,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作示例

    JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作示例

    這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作,結(jié)合實(shí)例形式分析了JS針對(duì)頁面ID、class、TAG元素獲取的函數(shù)與對(duì)象封裝操作實(shí)現(xiàn)方法,需要的朋友可以參考下
    2017-04-04
  • iOS微信H5頁面橡皮回彈效果的踩坑記錄

    iOS微信H5頁面橡皮回彈效果的踩坑記錄

    移動(dòng)端開發(fā)時(shí),H5長(zhǎng)頁面在iOS系統(tǒng)中滑動(dòng)時(shí),當(dāng)頁面滑動(dòng)到頂部或底部時(shí),頁面還能夠上滑或下滑,手指離開屏幕后回彈,這就時(shí)橡皮筋效果,這篇文章主要給大家介紹了關(guān)于iOS微信H5頁面橡皮回彈效果的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • Javascript?中AJAX的圖書管理代碼實(shí)例詳解

    Javascript?中AJAX的圖書管理代碼實(shí)例詳解

    這篇文章主要為大家詳細(xì)介紹了AJAX的圖書管理代碼實(shí)例,使用數(shù)據(jù)庫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • JavaScript實(shí)現(xiàn)tab欄切換效果

    JavaScript實(shí)現(xiàn)tab欄切換效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法示例

    JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法示例

    這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法,從數(shù)據(jù)結(jié)構(gòu)線性表的角度分析了數(shù)組的原理并結(jié)合實(shí)例形式分析了javascript數(shù)組的定義與使用方法,需要的朋友可以參考下
    2017-04-04
  • Javascript中for循環(huán)語句的幾種寫法總結(jié)對(duì)比

    Javascript中for循環(huán)語句的幾種寫法總結(jié)對(duì)比

    如果您希望一遍又一遍地運(yùn)行相同的代碼,并且每次的值都不同,那么使用循環(huán)是很方便的,javascript中for循環(huán)也是非常常用的,下面這篇文章主要介紹了Javascript中for循環(huán)的幾種寫法,需要的朋友可以參考借鑒,一起來看看吧。
    2017-01-01
  • js 原型對(duì)象和原型鏈理解

    js 原型對(duì)象和原型鏈理解

    本文主要介紹了js原型對(duì)象和原型鏈的相關(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法

    JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法

    這篇文章主要介紹了JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法,涉及javascript針對(duì)數(shù)組及隨機(jī)數(shù)的相關(guān)操作技巧,需要的朋友可以參考下
    2015-07-07

最新評(píng)論