javascript页面滚动窗口(javascript实现简单滚动窗口)
类别:编程学习 浏览量:643
时间:2021-10-24 10:01:43 javascript页面滚动窗口
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js对日期加减指定天、时、分、秒
- js的模块模式设计(JS实现单例模式的6种方案汇总)
- nodejs json文件读写(nodejs将JSON字符串转化为JSON对象报错的解决)
- extjs实现树形下拉框
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- nodejs八种命令(详细谈谈NodeJS进程是如何退出的)
- js弹出新窗口被拦截的解决方法
- mysql xml转换json(Mysql将查询结果集转换为JSON数据的实例代码)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- js简单小游戏代码(用JS实现飞机大战小游戏)
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- 自己做的弹珠小游戏(JS实现简单打砖块弹球小游戏)
- js获取上个月第一天和最后一天
- extjs column列布局
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- nodejs格式化教程(nodejs利用readline提示输入内容实例代码)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)