JavaScript制作网页动画
代码如下
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>window对象</title><script type="text/javascript">//定义几个全局变量var w;//页面的宽度var img;//图像对象var imgLeft;//图像左边的位置var imgWidth;//图像的宽度var delta=5;//每次移动的距离window.onload=function(){//对四个变量赋初值w=window.innerWidth;img=document.getElementById("img");imgLeft=img.offsetLeft;imgWidth=img.width;//调用move()方法,改变图片位置move();};function move(){//判断图像是否越界(超出页面的宽度)if(imgLeft<0||imgLeft+imgWidth>w){delta=-delta;//变号}img.style.left=imgLeft+delta+"px";//移动位置后,需要重新修改左边的位置imgLeft=img.offsetLeft;//重复不断的调用次函数setTimeout(move,5);}</script><style type="text/css">#img{position: absolute;left: 0;top: 50%;}</style></head><body><img src="img/img6.jpg" id="img" /></div></body>
</html>
素材:
JavaScript制作网页动画相关推荐
- JavaScript制作网页计算器
JavaScript制作网页计算器 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
- 【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发 八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
- 动画网页制作html_CSS制作网页动画
一.transition定义动画过度效果 /*transition: 第一个参数:过渡效果生效的样式属性,all代表所有属性变化都可以有设置的过度效果 第二个参数:过渡时间 第三个参数:过渡效果样式 ...
- HTML学习笔记9——CSS3制作网页动画
CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 transform:[tr ...
- JavaScript制作网页时钟
javascript 运用时间戳实现时间获取并换算成时分秒,并结合css相关属性实现时钟转动 效果图-实现网页版时钟 <!DOCTYPE html> <html lang=&quo ...
- js-DOM offsetLeft 属性与 offsetTop 属性,制作网页动画等必学知识!
目录 前言 一.offsetLeft与offsetTop属性 1.offsetLeft的定义和用法 2.offsetTop的定义和用法 结束语 前言 在制作动画的时候,我们常常需要用到offsetLe ...
- 利用Javascript制作网页特效(图像特效)
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...
- 利用Javascript制作网页特效(其他常见特效)
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)';this. ...
- 利用Javascript制作网页特效(时间特效)
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
- CSS3,JS制作网页动画(时空穿梭,魔方,坠落星星,全屏樱花特效)
目录 1.整体效果三个页面 2.P1时空穿梭 3.P2主页 4.P3樱花 1.整体效果三个页面 初衷是做一个祝福生日的模板,从第一张到最后一张是三个页面点击跳转依次显示,用gif图制作一些动画效果还是 ...
最新文章
- 女性程序员大会ghc_在女性科技大会上成为男人的感觉
- K Balanced Teams
- android 3d渲染动画效果吗,Android如何实现3D效果
- KVM--安装及初步使用
- micopython 18b20_[MicroPython]stm32f407控制DS18B20检测温度
- Java 并发(生产者/消费者 模式)
- EDA实验课课程笔记(四)——TCL脚本语言的学习2
- 如何在恢复模式下启动 Mac?
- CSS实现限制字数功能
- java语言特点概述
- C++11/14的新特性——更简洁
- linux用ping命令测试网速,怎么用ping命令测试网速
- 配合字体图标的搜索框
- 城市数据大脑:小汽车儿堵成翔?NONONO!
- SequoiaDB分布式数据库2022.1月刊
- 华三模拟器之OSPF实验
- ue4生成粒子发射器
- 神经网络原理的简单介绍,神经网络几何原理图
- win11、10下安装eNSP最新版(1.3.00.200T)并完美运行(转载)
- html 筛选车型框,展厅对应车型.html
热门文章
- 麻省理工学院计算机科学与工程博士,2020年麻省理工学院博士读几年
- 必杀VI、VIM编辑器命令
- Android 在导航栏上添加一个截屏按键,点击进行截屏
- html图片闪光效果,CSS3实现一个效果酷炫的闪光特效代码
- java实现将PDF文件拆分成图片
- VM ware下载教程
- Python3,4行代码给图片加美颜,拍照再也不需要开美颜滤镜了。
- 武田宣布就拟收购Shire plc签署优先短期贷款工具协议及次级银团贷款协议和过桥信贷协议第二次修订
- android app开机启动画面,Android-如何设置APP开机启动(图文)
- Android学习笔记(四十):Preference的使用