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)文章
JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
以下是JavaScript容易犯錯(cuò)的九個(gè)陷阱。雖然不是什么很高深的技術(shù)問(wèn)題,但注意一下,會(huì)使您的編程輕松些,即所謂make life easier. 筆者對(duì)某些陷阱會(huì)混雜一些評(píng)點(diǎn)。2008-05-05
js對(duì)數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼
對(duì)數(shù)組中的數(shù)字從小到大排序,很多時(shí)候需要用的多,需要的朋友可以參考下2012-09-09
Javascript 靜態(tài)頁(yè)面實(shí)現(xiàn)隨機(jī)顯示廣告的辦法
最近在做私服發(fā)布站時(shí),客戶要求實(shí)現(xiàn)廣告隨機(jī)排序,而且要求在html頁(yè)面實(shí)現(xiàn),也就是說(shuō)必須使用javascript來(lái)完成了。2010-11-11
javascript中傳統(tǒng)事件與現(xiàn)代事件
本文給大家介紹的是使用傳統(tǒng)事件的方法來(lái)模擬現(xiàn)代事件,十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-06-06
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能,涉及微信小程序事件綁定及setData動(dòng)態(tài)修改Page頁(yè)面data數(shù)據(jù),進(jìn)而控制頁(yè)面元素屬性動(dòng)態(tài)改變的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
使用ECharts實(shí)現(xiàn)狀態(tài)區(qū)間圖
這篇文章主要為大家詳細(xì)介紹了使用ECharts實(shí)現(xiàn)狀態(tài)區(qū)間圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10

