您的位置:首页技术文章
文章详情页

javascript实现简单滚动窗口

浏览:73日期:2023-06-01 09:36:54

本文实例为大家分享了javascript实现滚动窗口的具体代码,供大家参考,具体内容如下

一.实现的效果图

javascript实现简单滚动窗口

二.涉及到的知识点

window.open();方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

moveTo():方法可把窗口的左上角移动到一个指定的坐标。

window.screen.height:屏幕像素的高度

window.screen.width:屏幕像素的宽度

window.screenLeft;左边距离屏幕的距离

window.screenTop;上面距离屏幕的距离

setTimeout:方法用于在指定的毫秒数后调用函数或计算表达式,setTimeout(function, milliseconds)。

三.代码实现

<!DOCTYPE html><html lang='utf-8'><head> <meta charset='UTF-8'> <title>滚动窗口</title> <script> var w ;//页面的宽度var h;//页面的高度var x;//距离屏幕水平位置var y;//距离屏幕垂直的位置var v = 5;//每次水平移动的位置var s = 8;//每次垂直移动的位置 function windowOpen(){mywindow =window.open(’’,’’,’width=200px,height=100px’);mywindow.document.write('这个是打开的窗口'); 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='打开窗口' onclick='windowOpen()'></body></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好吧啦网。

标签: JavaScript
相关文章: