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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
这篇文章主要介绍了JavaScript 变量,数据类型基础,结合实例形式详细分析了JavaScript变量声明、字符串、数组、对象等基本使用方法与操作注意事项,需要的朋友可以参考下2020-01-01UniApp使用vue.config.js进行配置的详细教程
这篇文章主要给大家介绍了关于UniApp使用vue.config.js进行配置的详细教程,uniapp是一套基于Vue语法的框架,同样也支持Vue.config.js配置,一般常用的莫过于路径的名称,需要的朋友可以参考下2023-10-10
最新评论