對(duì)聯(lián)懸浮框原生js寫法

還是直接上代碼比較實(shí)在

html:

<img src ="" ?id="erwei" >

css:

body{

height:5000px

}

#erwei{

position:absolute;

right:30px;

}

js:

vardiv=document.getElementById('erwei')

window.onscroll=function() {

//兼容

varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;

Move(parseInt((document.documentElement.clientHeight-div.offsetHeight) /2+scrollTop))

}

vartimer

function Move(target) {

clearInterval(timer)

timer=setInterval(function() {

varspeed= (target-div.offsetTop)/4;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(div.offsetTop==target) {

clearInterval(timer)

}else{

div.style.top=div.offsetTop+speed+'px';

}

},30)

}


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 我們首先要明白,我們給頁面添加效果用到的js到底是什么?js其實(shí)包含三部分:dom 文檔對(duì)象模型 bom 瀏覽...
    一直以來都很好閱讀 868評(píng)論 0 0
  • 1.第一種方式:錨鏈接 優(yōu)點(diǎn):簡單快速,沒有兼容性問題 缺點(diǎn): 視覺上不夠直觀,用戶體驗(yàn)不太好 2.js的方式: ...
    love2013閱讀 852評(píng)論 0 0
  • 一、client家族 1.1 clientWidth和clientHeight 網(wǎng)頁可見區(qū)域?qū)挘?document...
    LIT樂言閱讀 190評(píng)論 0 2
  • 以下是常用的代碼收集,學(xué)習(xí)用。轉(zhuǎn)自豪情博客園 1. PC - js 返回指定范圍的隨機(jī)數(shù)(m-n之間)的公式 re...
    自由加咖啡閱讀 1,104評(píng)論 0 1
  • 《無題》 空懷寶劍篇, 躊躇逝華年。 欲飲新豐酒, 還愁舊囊錢。 子在陳蔡間, 寂然調(diào)琴弦。 弘毅守中道, 篤志向...
    賽德傳播閱讀 372評(píng)論 0 0

友情鏈接更多精彩內(nèi)容