javascript实现简单滚动窗口

2022-04-15 0 322

本文实例为大家分享了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="打开窗口" id="windowOpen" onclick="windowOpen()">
</body>
</html>

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

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript javascript实现简单滚动窗口 https://www.niceym.com/29031.html