JS 實現(xiàn)Div向上浮動的實現(xiàn)代碼
更新時間：2012年10月11日 23:10:53 作者：
用js實現(xiàn)的可以讓div慢慢上升效果實現(xiàn)代碼，喜歡的朋友可以參考下
Html 及 JS 代碼如下：
<div id="newsOne" onmouseover="CleartTimeInterVal();" onmouseout="resetInterVal();"
style="position: absolute; width: 100px;">
<a href="http://www.dbjr.com.cn" target="_blank">腳本之家</a>
</div>
<script type='text/javascript'>
var newsOne = document.getElementById("newsOne");
newsOne.style.bottom = 0;
newsOne.style.left = window.screen.availWidth - 100;
var bottom = 0;
function newsScroll() {
if (bottom > (window.screen.availHeight - window.screenTop)) {
bottom = 0;
newsOne.style.bottom = 0;
}
else {
bottom = bottom + 15;
newsOne.style.bottom = bottom;
}
}
var timeid = setInterval(newsScroll, 300);
function CleartTimeInterVal() {
clearInterval(timeid);
}
function resetInterVal() {
timeid = setInterval(newsScroll, 300);
}
</script>
在線運行：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<div id="newsOne" onmouseover="CleartTimeInterVal();" onmouseout="resetInterVal();"
style="position: absolute; width: 100px;">
<a href="http://www.dbjr.com.cn" target="_blank">腳本之家</a>
</div>
<script type='text/javascript'>
var newsOne = document.getElementById("newsOne");
newsOne.style.bottom = 0;
newsOne.style.left = window.screen.availWidth - 100;
var bottom = 0;
function newsScroll() {
if (bottom > (window.screen.availHeight - window.screenTop)) {
bottom = 0;
newsOne.style.bottom = 0;
}
else {
bottom = bottom + 15;
newsOne.style.bottom = bottom;
}
}
var timeid = setInterval(newsScroll, 300);
function CleartTimeInterVal() {
clearInterval(timeid);
}
function resetInterVal() {
timeid = setInterval(newsScroll, 300);
}
</script>
在線運行：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JavaScript利用虛擬列表實現(xiàn)高性能渲染數(shù)據(jù)詳解
在前文中我們提到可以使用時間分片的方式來對長列表進(jìn)行渲染，但這種方式更適用于列表項的DOM結(jié)構(gòu)十分簡單的情況，所以本文來講講如何使用虛擬列表的方式，來同時加載大量數(shù)據(jù)吧2023-05-05
JS數(shù)組的遍歷方式for循環(huán)與for...in
本節(jié)主要介紹了JS數(shù)組的遍歷方式for循環(huán)與for...in,需要的朋友可以參考下2014-07-07
今天小編就為大家分享一篇關(guān)于js中數(shù)組對象去重的兩種方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了JS實現(xiàn)的圖片自動輪換效果，有具體的實現(xiàn)思路及截圖，希望對大家學(xué)習(xí)有所幫助2014-04-04
這篇文章主要介紹了百度小程序自定義通用toast組件,百度小程序的toast僅支持在頁中展示，不能自定義位置、字體大小、在單個文本中增加icon等需求；因此自定義一個全局可通用的Toast,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JS組件Bootstrap實現(xiàn)彈出框效果代碼的相關(guān)資料，對彈出框感興趣的小伙伴們可以參考一下2016-04-04
如何將一個String和多個String值進(jìn)行比較思路分析
開發(fā)中我們經(jīng)常需要將一個String和多個String值進(jìn)行比較。直覺反應(yīng)是使用||符號連接多個===完成，感興趣的朋友可以了解下哈2013-04-04
javascript實現(xiàn)導(dǎo)航欄分頁效果
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)導(dǎo)航欄分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
JavaScript中關(guān)于Object.create()的用法
這篇文章主要介紹了JavaScript中關(guān)于Object.create()的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
JS建造者模式是一種創(chuàng)建型設(shè)計模式,它可以用于構(gòu)建復(fù)雜對象的創(chuàng)建過程,將對象的構(gòu)建步驟和表示分離,以便能夠靈活地構(gòu)建不同的對象,本文將通過代碼示例給大家詳細(xì)的介紹一下JS建造者模式的用法,需要的朋友可以參考下2023-08-08