javascript实现滚动窗口

最新推荐文章于 2024-08-05 18:09:11 发布

make sense

最新推荐文章于 2024-08-05 18:09:11 发布

阅读量3.2k

点赞数

分类专栏： js小实例

本文链接：https://blog.csdn.net/baidu_41861751/article/details/83828764

版权

js小实例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.实现的效果图

二.涉及到的知识点

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="打开窗口" id="windowOpen" onclick="windowOpen()">
</body>
</html>

make sense

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
javascript实现滚动窗口

一.实现的效果图二.涉及到的知识点 window.open();方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 moveTo():方法可把窗口的左上角移动到一个指定的坐标。 window.screen.height:屏幕像素的高度 window.screen.width：屏幕像素的宽度 window.screenLeft;左边距离屏幕...
复制链接

扫一扫

专栏目录