javascript實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)窗口
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)滾動(dòng)窗口的具體代碼，供大家參考，具體內(nèi)容如下
一.實(shí)現(xiàn)的效果圖
二.涉及到的知識(shí)點(diǎn)
window.open();方法用于打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。
moveTo():方法可把窗口的左上角移動(dòng)到一個(gè)指定的坐標(biāo)。
window.screen.height:屏幕像素的高度
window.screen.width：屏幕像素的寬度
window.screenLeft;左邊距離屏幕的距離
window.screenTop;上面距離屏幕的距離
setTimeout：方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式，setTimeout(function, milliseconds）。
三.代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<title>滾動(dòng)窗口</title>
<script>
var w ;//頁(yè)面的寬度
var h;//頁(yè)面的高度
var x;//距離屏幕水平位置
var y;//距離屏幕垂直的位置
var v = 5;//每次水平移動(dòng)的位置
var s = 8;//每次垂直移動(dòng)的位置
function windowOpen(){
mywindow =window.open('','','width=200px,height=100px');
mywindow.document.write("這個(gè)是打開(kāi)的窗口");
w =window.screen.width;
h=window.screen.height;
x=window.screenLeft;
y=window.screenTop;
windowmove();
}
function windowmove(){
if(x<0||x>w){
s=-s;
}
x=x+s;
if(y<0||y>h){
v=-v;
}
y=y+v;
mywindow.moveTo(x,y);
setTimeout(windowmove,10);
}
</script>
</head>
<body>
<input type="submit" value="打開(kāi)窗口" id="windowOpen" onclick="windowOpen()">
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
zTree獲取當(dāng)前節(jié)點(diǎn)的下一級(jí)子節(jié)點(diǎn)數(shù)實(shí)例
下面小編就為大家?guī)?lái)一篇zTree獲取當(dāng)前節(jié)點(diǎn)的下一級(jí)子節(jié)點(diǎn)數(shù)實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Hutia 的 JS 代碼集...2006-10-10
JavaScript實(shí)現(xiàn)橫向滑出的多級(jí)菜單效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)橫向滑出的多級(jí)菜單效果,涉及JavaScript數(shù)學(xué)運(yùn)算及頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
一個(gè)挺有意思的Javascript小問(wèn)題說(shuō)明
目前為止,就我的猜測(cè),javascript執(zhí)行應(yīng)該是先做語(yǔ)法分析,然后順便分析完成了變量表(本地和全局)2011-09-09
一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)
一轉(zhuǎn)眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關(guān)于如何一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的相關(guān)資料,需要的朋友可以參考下2022-12-12
javascript 彈出的窗口返回值給父窗口具體實(shí)現(xiàn)
這篇文章主要介紹了javascript 彈出的窗口返回值給父窗口具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-11-11
JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果,結(jié)合實(shí)例形式分析了JS通過(guò)時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
viewer.js實(shí)現(xiàn)圖片預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了viewer.js實(shí)現(xiàn)圖片預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
js+html實(shí)現(xiàn)周歲年齡計(jì)算器
這篇文章主要為大家詳細(xì)介紹了js+html實(shí)現(xiàn)周歲年齡計(jì)算器的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
javascript操作table的特性，大家可以看下，發(fā)揮下，實(shí)現(xiàn)更多的功能。2009-09-09