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中不常见的运算符与操作符总结)
- JavaScriptSerializer对Json对象的序列化和反序列化
- Extjs msgTarget 提示位置
- docker前端项目(Docker部署Nuxt.js项目的实现)
- js中encodeURIComponent与C#中HttpUtility.UrlEncode
- js日期格式化
- js数组去重的十种方法(JavaScript常用数组去重实战源码)
- js中Document
- js防抖用法(JavaScript的防抖和节流案例)
- 原生js实现轮播图代码(js实现轮播图制作方法)
- js的三种使用方法(JS带你深入领略Proxy的世界)
- sqlserver字段说明(详解SQL Server 中 JSON_MODIFY 的使用)
- js的遍历数组方法(JS中数组常用的循环遍历你会几种)
- js中Math对象的用法
- javaweb购物车案例(js实现模拟购物商城案例)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
- 以家人之名广受好评,剧情生动引起观众共鸣,演员张新成圈粉无数(以家人之名广受好评)
- 三兄妹感情再遇波折,人设接连崩塌 《以家人之名》剧情猜不透(三兄妹感情再遇波折)
- 《小敏家》金波想要复婚 这只是他圈套的第1步,更可恶的在后面(小敏家金波想要复婚)
热门推荐
- 聚集索引和主键的区别
- docker管理工具选择(Docker可视化管理工具DockerUI的使用)
- mysql 索引使用总结(MySQL复合索引的深入探究)
- SQL SERVER中调用存储过程
- tensorflow自定义初始化(Tensorflow分类器项目自定义数据读入的实现)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- 超级小旋风asp服务器软件简单使用说明(超级小旋风asp服务器软件简单使用说明)
- python用于机器人(python控制nao机器人身体动作实例详解)
- css控制表格换行
- html5炫酷代码(HTML5超炫酷粒子效果的进度条的实现示例)