JavaScript图形实例：蝴蝶结图案

如何在JavaScript中实现网页的动画和特效JavaScript是一种强大的编程语言，它可以用来为网页添加动画和特效。

在本文中，我们将学习如何使用JavaScript实现网页动画和特效。

1.使用CSS动画：JavaScript可以与CSS动画配合使用，通过控制CSS属性的变化来实现动画效果。

可以通过添加或移除类来触发CSS 动画，也可以使用JavaScript直接修改CSS属性的值。

以下是一些常见的CSS属性，可以用来实现动画效果：- transform：可以利用translate、scale、rotate等函数来改变元素的位置、尺寸和旋转角度。

- opacity：可以通过改变元素的不透明度来实现淡入淡出效果。

- transition：可以使用过渡效果来平滑地改变元素的属性值。

通过在JavaScript中创建类或直接操作元素的样式，可以通过移动、旋转和改变元素的透明度来实现各种动画效果。

2.使用setTimeout和setInterval函数：JavaScript中的setTimeout和setInterval函数可以用来设置定时器，通过定时器来触发函数的执行。

在动画和特效中，可以使用setTimeout函数来延迟执行某个函数，来实现延迟效果。

setInterval函数可以用来循环执行一个函数，从而实现连续播放的效果。

3.使用requestAnimationFrame函数：requestAnimationFrame是一个优化的浏览器API，它可以在每次浏览器重绘之前调用一个回调函数，通常用于执行动画。

与setTimeout和setInterval不同，requestAnimationFrame会根据浏览器的绘制能力来调整动画的帧率，保证动画的流畅性并减少浏览器的负载。

使用requestAnimationFrame函数来调用动画函数，可以使用递归的方式来循环播放动画，通过不断更新元素的位置、尺寸和样式来实现动画效果。

JavaScript实现动态网页特效JavaScript是一种常用的编程语言，可以用于实现动态网页特效。

通过JavaScript，开发者可以为网页添加各种交互效果，使用户体验更加丰富和吸引人。

以下是一些常见的JavaScript动态网页特效的实现方法：1. 鼠标悬停效果：通过JavaScript可以实现当鼠标悬停在某个区域上时，改变该区域的样式或显示隐藏的内容。

例如，当用户将鼠标悬停在一个按钮上时，可以让按钮的颜色变化或显示按钮下方的一段描述文字。

2. 幻灯片效果：通过JavaScript可以实现网页上的幻灯片效果，使多张图片自动轮播展示。

可以通过设置定时器和改变图片的显示状态来实现。

这种效果常用于图片展示、轮播广告等地方。

3. 下拉菜单效果：通过JavaScript可以实现网页上的下拉菜单效果，让用户点击或悬停在一个导航栏上时，下方显示出更多的选项。

可以通过设置事件监听和改变菜单的可见性来实现。

4. 表单验证效果：通过JavaScript可以实现网页上的表单验证效果，检查用户输入的内容是否符合要求。

可以通过设置事件监听和编写验证函数来实现。

例如，当用户提交表单时，可以检查是否所有的必填项都已填写，并给出相应的提示。

5. 动态加载内容效果：通过JavaScript可以实现动态加载内容的效果，当用户滚动网页到一定位置时，自动加载更多的内容。

可以通过监听滚动事件和设置ajax 请求来实现。

这种效果常用于博客、社交媒体等网站上。

6. 特效动画效果：通过JavaScript可以实现各种特效动画，如淡入淡出效果、滑动效果、旋转效果等。

可以通过改变元素的显示状态、设置定时器和改变元素的样式来实现。

这种效果常用于网页中的广告、特效展示等地方。

7. 音频视频播放效果：通过JavaScript可以实现网页上的音频和视频播放效果。

可以通过设置事件监听、控制播放状态和改变样式来实现。

例如，当用户点击一个按钮时，可以播放音频或视频，并显示相应的控制按钮。

如何使用JavaScript实现Canvas绘图和动画使用JavaScript来实现Canvas绘图和动画是一种常见的技术，它可以实现各种各样的图形效果和动态交互，非常适合用于创建各种类型的网页动画和游戏。

在本文中，我将详细介绍如何使用JavaScript来绘制图形、实现动画以及一些常用的绘图和动画效果。

一、构建Canvas元素为了开始绘制和动画，我们首先需要在HTML文档中创建一个Canvas元素。

Canvas是HTML5中新增的元素，它提供了一个绘制2D 图形的区域，我们可以通过JavaScript来操纵它。

在HTML文档的body标签中添加以下代码：```<canvas id="myCanvas" width="500" height="300"></canvas> ```上面的代码创建了一个id为myCanvas的Canvas元素，宽度为500像素，高度为300像素。

二、获取Canvas上下文要绘制图形或进行动画，我们需要获取Canvas的上下文对象。

在JavaScript中，我们可以使用`getContext()`方法来获取上下文对象。

在JavaScript中，使用以下代码获取Canvas上下文对象：```const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');```上面的代码通过`getElementById`方法获取了id为myCanvas的Canvas元素，然后通过`getContext`方法获取了2D上下文对象ctx。

三、绘制基本图形下面介绍如何使用JavaScript在Canvas上绘制一些基本图形，例如矩形、圆形和直线。

Canvas提供了一系列的API可以用于绘制图形。

js案例大全JavaScript（简称JS）是一种高级的、解释型的编程语言。

它是一种动态类型、弱类型、基于原型的语言，内建支持类型。

JavaScript是世界上最流行的编程语言之一，也是前端开发的核心技术之一。

在本文中，我们将为大家介绍一些常见的JavaScript案例，希望能够帮助大家更好地理解和运用JavaScript。

1. 表单验证。

表单验证是Web开发中常见的需求之一。

通过JavaScript，我们可以轻松实现对表单输入内容的验证，比如验证用户名、密码、邮箱、手机号等。

以下是一个简单的表单验证案例：```javascript。

function validateForm() {。

var username = document.forms["myForm"]["username"].value;var password = document.forms["myForm"]["password"].value;if (username == "" || password == "") {。

alert("用户名和密码不能为空");return false;}。

}。

```。

在上面的案例中，我们定义了一个validateForm函数来验证表单输入内容，如果用户名和密码为空，则弹出警告框，并且阻止表单提交。

这样可以有效地提高用户体验，避免用户输入不合法的内容。

2. 动态创建元素。

JavaScript可以帮助我们动态地创建、修改和删除HTML元素。

这在Web开发中非常有用，可以使页面更加灵活和动态。

以下是一个动态创建元素的案例：```javascript。

function addElement() {。

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello, World!");newDiv.appendChild(newContent);var currentDiv = document.getElementById("div1");document.body.insertBefore(newDiv, currentDiv);}。

JavaScript经典实例跨浏览器事件跨浏览器添加事件//跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }跨浏览器移除事件//跨浏览器移除事件function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); }}跨浏览器阻⽌默认⾏为//跨浏览器阻⽌默认⾏为 function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }跨浏览器获取⽬标对象//跨浏览器获取⽬标对象function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; }}跨浏览器获取滚动条位置//跨浏览器获取滚动条位置，sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.bo 跨浏览器获取可视窗⼝⼤⼩//跨浏览器获取可视窗⼝⼤⼩ function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight }} else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },js 对象冒充<script type = 'text/javascript'>function Person(name , age){ = name ; this.age = age ; this.say = function (){ return "name : "+ + " age: "+this.age ; } ; }var o = new Object() ;//可以简化为Object() Person.call(o , "zhangsan" , 20) ; console.log(o.say() );//name : zhangsan age: 20</script>js 异步加载和同步加载异步加载也叫⾮阻塞模式加载，浏览器在下载js的同时，同时还会执⾏后续的页⾯处理。

七个基于JavaScript实现的情⼈节表⽩特效⽬录七⼣情⼈节送花动画告⽩特效玫瑰花盛开动画告⽩特效3d旋转相册点击爱⼼散开动画告⽩特效雷电打出告⽩⽂字特效粒⼦组合告⽩⽂字特效⼩熊拉⼿CSS3情⼈节动画表⽩特效七⼣情⼈节送花动画告⽩特效效果展⽰代码展⽰:<div id='content'><ul class='content-wrap'><!-- 第⼀副画⾯ --><li><!-- 背景图 --><div class="a_background"><div class="a_background_top"></div><div class="a_background_middle"></div><div class="a_background_botton"></div></div><!-- 云 --><div class="cloudArea"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div><!-- 太阳 --><div id="sun"></div></li><!-- 第⼆副画⾯ --><li><!-- 背景图 --><div class="b_background"></div><div class="b_background_preload"></div><!-- 商店 --><div class="shop"><div class="door"><div class="door-left"></div><div class="door-right"></div></div><!-- 灯 --><div class="lamp"></div></div><!-- 鸟 --><div class="bird"></div></li><!-- 第三副画⾯ --><li><!-- 背景图 --><div class="c_background"><div class="c_background_top"></div><div class="c_background_middle"></div><div class="c_background_botton"></div></div><!-- ⼩⼥孩 --><div class="girl"></div><div class="bridge-bottom"><div class="water"><div id="water1" class="water_1"></div><div id="water2" class="water_2"></div><div id="water3" class="water_3"></div><div id="water4" class="water_4"></div></div></div><!-- 星星 --><ul class="stars"><li class="stars1"></li><li class="stars2"></li><li class="stars3"></li><li class="stars4"></li><li class="stars5"></li><li class="stars6"></li></ul><div class="logo">祝天下有情⼈终成眷属</div></li></ul><!-- 雪花 --><div id="snowflake"></div><!-- ⼩男孩 --><div id="boy" class="charector"></div></div>玫瑰花盛开动画告⽩特效效果展⽰:<radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)"> <stop offset="0" style="stop-color: rgb(255, 0, 0);"/><stop offset="1" style="stop-color: rgb(141, 41, 41);"/></radialGradient>var svg = document.getElementById('svg');var animation0 = document.getElementById('animate0');svg.addEventListener('mouseenter', function(){ animation0.beginElement(); });var animation1 = document.getElementById('animate1');svg.addEventListener('mouseenter', function(){ animation1.beginElement(); });var animation2 = document.getElementById('animate2');svg.addEventListener('mouseenter', function(){ animation2.beginElement(); });var animation3 = document.getElementById('animate3');svg.addEventListener('mouseenter', function(){ animation3.beginElement(); });var animation4 = document.getElementById('animate4');svg.addEventListener('mouseenter', function(){ animation4.beginElement(); });var animation5 = document.getElementById('animate5');svg.addEventListener('mouseenter', function(){ animation5.beginElement(); });var animation6 = document.getElementById('animate6');svg.addEventListener('mouseenter', function(){ animation6.beginElement(); });var animation7 = document.getElementById('animate7');svg.addEventListener('mouseenter', function(){ animation7.beginElement(); });var animation8 = document.getElementById('animate8');svg.addEventListener('mouseenter', function(){ animation8.beginElement(); });var animation9 = document.getElementById('animate9');svg.addEventListener('mouseenter', function(){ animation9.beginElement(); });var animation10 = document.getElementById('animate10');svg.addEventListener('mouseenter', function(){ animation10.beginElement(); });var animation11 = document.getElementById('animate11');svg.addEventListener('mouseenter', function(){ animation11.beginElement(); });var animation12 = document.getElementById('animate12');svg.addEventListener('mouseenter', function(){ animation12.beginElement(); });var animation13 = document.getElementById('animate13');svg.addEventListener('mouseenter', function(){ animation13.beginElement(); });var animation14 = document.getElementById('animate14');svg.addEventListener('mouseenter', function(){ animation14.beginElement(); });3d旋转相册效果展⽰:代码展⽰:<div class="hovertreeinfo"><h2></h2></div><!-- 仅⾃动播放⾳乐 --><!--<audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不⽀持audio属性</audio>--><audio loop src="img\qianyuqianxun.mp3" id="audio" controls autoplay preload="auto">该浏览器不⽀持audio属性</audio><script type="text/javascript">//--创建页⾯监听，等待微信端页⾯加载完毕触发⾳频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();});//--创建触摸监听，当浏览器打开页⾯时，触摸屏幕触发事件，进⾏⾳频播放document.addEventListener('touchstart', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();}audioAutoPlay();});</script><!--/*外层最⼤容器*/--><div class="wrap"><!-- /*包裹所有元素的容器*/--><div class="cube"><!--前⾯图⽚ --><div class="out_front"><img src="img/img01.jpg " class="pic" /></div><!--后⾯图⽚ --><div class="out_back"><img src="img/img02.jpg" class="pic"/></div><!--左图⽚ --><div class="out_left"><img src="img/img03.jpg" class="pic" /></div><div class="out_right"><img src="img/img04.jpg" class="pic" /></div><div class="out_top"><img src="img/img05.jpg" class="pic" /></div><div class="out_bottom"><img src="img/img06.jpg" class="pic" /><!--⼩正⽅体 --><span class="in_front"><img src="img/img07.jpg" class="in_pic" /></span><span class="in_back"><img src="img/img08.jpg" class="in_pic" /></span><span class="in_left"><img src="img/img09.jpg" class="in_pic" /></span><span class="in_right"><img src="img/img10.jpg" class="in_pic" /></span><span class="in_top"><img src="img/img11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/img12.jpg" class="in_pic" /></span></div></div>点击爱⼼散开动画告⽩特效效果展⽰:代码展⽰:<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> <!-- 80 by 70 --> </svg><!-- DECORATIONS (quite a lot of them) --><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div>雷电打出告⽩⽂字特效效果展⽰:代码展⽰:<div class="page page-thunder-to-text"><input id="input" type="text" maxlength="24" placeholder="I love you!"><canvas id="canvas"></canvas></div><script>let canvas, ctx, w, h, thunder, text, particles, input;function Thunder(options) {options = options || {};this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10);this.maxlife = this.lifespan;this.color = options.color || '#fefefe';this.glow = options.glow || '#2323fe';this.x = options.x || Math.random() * w;this.y = options.y || Math.random() * h;this.width = options.width || 2;this.direct = options.direct || Math.random() * Math.PI * 2;this.max = options.max || Math.round(Math.random() * 10 + 20);this.segments = [...new Array(this.max)].map(() => {return {direct: this.direct + (Math.PI * Math.random() * 0.2 - 0.1),length: Math.random() * 20 + 80,change: Math.random() * 0.04 - 0.02};});this.update = function(index, array) {this.segments.forEach(s => { (s.direct += s.change) && Math.random() > 0.96 && (s.change *= -1) });(this.lifespan > 0 && this.lifespan--) || this.remove(index, array);}this.render = function(ctx) {if (this.lifespan <= 0) return;ctx.beginPath();ctx.globalAlpha = this.lifespan / this.maxlife;ctx.strokeStyle = this.color;ctx.lineWidth = this.width;ctx.shadowBlur = 32;ctx.shadowColor = this.glow;ctx.moveTo(this.x, this.y);let prev = { x: this.x, y: this.y };this.segments.forEach(s => {const x = prev.x + Math.cos(s.direct) * s.length;const y = prev.y + Math.sin(s.direct) * s.length;prev = { x: x, y: y };ctx.lineTo(x, y);});ctx.stroke();ctx.closePath();ctx.shadowBlur = 0;const strength = Math.random() * 80 + 40;const light = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, strength); light.addColorStop(0, 'rgba(250, 200, 50, 0.6)');light.addColorStop(0.1, 'rgba(250, 200, 50, 0.2)');light.addColorStop(0.4, 'rgba(250, 200, 50, 0.06)');light.addColorStop(0.65, 'rgba(250, 200, 50, 0.01)');light.addColorStop(0.8, 'rgba(250, 200, 50, 0)');ctx.beginPath();ctx.fillStyle = light;ctx.arc(this.x, this.y, strength, 0, Math.PI * 2);ctx.fill();ctx.closePath();}this.remove = function(index, array) {array.splice(index, 1);}}粒⼦组合告⽩⽂字特效效果展⽰:代码展⽰:;(function(main) {var args = {};window.onload = function() {main(args);};})(function(args) {'use strict';var Box = function(x, y, w, h, s) {this.x = x;this.y = y;this.w = w;this.h = h;this.s = s;this.a = Math.random() * Math.PI * 2;this.hue = Math.random() * 360;};Box.prototype = {constructor: Box,update: function() {this.a += Math.random() * 0.5 - 0.25;this.x += Math.cos(this.a) * this.s;this.y += Math.sin(this.a) * this.s;this.hue += 5;if(this.x > WIDTH) this.x = 0;else if(this.x < 0) this.x = WIDTH;if(this.y > HEIGHT) this.y = 0;else if(this.y < 0) this.y = HEIGHT;},render: function(ctx) {ctx.save();ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';ctx.translate(this.x, this.y);ctx.rotate(this.a);ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);ctx.restore();}};var Circle = function(x, y, tx, ty, r) {this.x = x;this.y = y;this.ox = x;this.oy = y;this.tx = tx;this.ty = ty;this.lx = x;this.ly = y;this.r = r;this.br = r;this.a = Math.random() * Math.PI * 2;this.sx = Math.random() * 0.5;this.sy = Math.random() * 0.5;this.o = Math.random() * 1;this.delay = Math.random() * 200;this.delayCtr = 0;this.hue = Math.random() * 360;};⼩熊拉⼿CSS3情⼈节动画表⽩特效效果展⽰:代码展⽰:<div class="stage"><div class="couple"><div class="heart floating"></div><div class="bear he"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="hand"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div><div class="bear she"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div></div></div>到此这篇关于七个基于JavaScript实现的情⼈节表⽩特效的⽂章就介绍到这了,更多相关JavaScript表⽩特效内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

JavaScript实现图像轮播特效教程章节一：引言在现代网页设计中，图像轮播特效是非常常见的元素之一。

通过图像轮播特效，可以使网页更加动态、吸引人，提升用户体验。

本教程将介绍如何使用JavaScript实现图像轮播特效，并提供详细的步骤和示例代码。

章节二：基本结构首先，我们需要准备好轮播图的基本结构。

在HTML文件中，创建一个容器元素，用于包裹轮播图的图片和导航按钮。

然后，给容器元素添加一个唯一的ID，方便在JavaScript中进行操作。

章节三：样式设计接下来，我们需要为轮播图的容器元素和其中的图片设置样式。

使用CSS，可以设置容器元素的宽度和高度，以及图片的显示方式和过渡效果。

通过设置适当的样式，可以使轮播图在页面中居中显示，并可以根据需要进行自定义的设计。

章节四：添加JavaScript代码再接下来，我们需要使用JavaScript编写轮播图的逻辑代码。

首先，使用DOM操作获取到容器元素和其中的图片元素。

然后，使用数组或者类数组对象保存每张图片的路径或地址。

接下来，定义一个变量来存储当前显示的图片的索引。

然后，编写一个函数来实现图像切换的效果。

在函数中，通过改变图片元素的样式或属性，实现图片的切换。

同时，更新当前显示的图片的索引，以便进行下一次切换。

章节五：自动轮播功能除了手动切换图片，我们还可以添加自动轮播的功能。

使用JavaScript的定时器函数，可以定期触发图片切换的函数。

通过设置合适的时间间隔，可以实现自动轮播的效果。

同时，需要添加鼠标移入和移出事件，以便在用户鼠标悬停在图片上时停止轮播，鼠标离开时继续轮播。

章节六：导航按钮如果希望用户可以通过导航按钮来手动控制轮播图的切换，我们还需要添加导航按钮的功能。

在HTML文件中，创建相应数量的导航按钮，并为每个按钮设置一个特定的类名或索引属性。

在JavaScript中，使用事件委托的方式，监听导航按钮的点击事件。

当用户点击某个导航按钮时，获取该按钮的索引，然后调用图片切换函数，显示对应索引的图片。

js案例大全JavaScript（简称JS）是一种高级的、解释型的编程语言，它主要用于在网页上实现动态交互效果。

在网页开发中，JavaScript扮演着非常重要的角色，它可以帮助我们实现各种各样的功能和效果。

在本文中，我将为大家介绍一些常见的JavaScript案例，希望能够对大家的学习和工作有所帮助。

首先，我们来看一个简单的JavaScript案例，实现一个简单的计算器。

在这个案例中，我们可以使用JavaScript来编写一个简单的计算器，用户可以在网页上输入数字和运算符，然后点击“计算”按钮，就可以得到计算结果。

这个案例可以帮助我们了解如何使用JavaScript来处理用户的输入，并进行简单的数学运算。

接下来，我们可以看一个更加复杂的案例，实现一个图片轮播效果。

在这个案例中，我们可以使用JavaScript和CSS来实现一个图片轮播效果，用户可以在网页上点击“上一张”和“下一张”按钮来切换图片，也可以自动播放图片。

这个案例可以帮助我们了解如何使用JavaScript来操作DOM元素，以及如何结合CSS来实现动态效果。

除此之外，JavaScript还可以用来实现表单验证、动态加载数据、实现动画效果等等。

在网页开发中，JavaScript的应用非常广泛，它可以帮助我们实现各种各样的交互效果，让网页变得更加生动和有趣。

总的来说，JavaScript是一种非常强大的编程语言，它可以帮助我们实现各种各样的功能和效果。

通过学习和掌握JavaScript，我们可以为网页添加更多的交互效果，让用户体验变得更加丰富和多样化。

希望本文介绍的JavaScript案例能够对大家有所帮助，也希望大家能够在日常的网页开发中多多运用JavaScript，为用户带来更好的体验。

5个有趣的js代码很多⼈认为编程语⾔只是⽤于⼯作，没有什么乐趣，其实，只要我们发挥奇思妙想，再死板的东西也有有趣的⼀⾯。

这篇⽂章告诉⼤家：使⽤JavaScript，可以做很多很多有趣的事情。

以下代码拷贝到地址栏回车即可运⾏，赶紧试试吧。

1. ⽹页射击游戏这个游戏可以在任何⽹页⾥⾯玩，把下⾯代码粘贴到地址栏回车，按空格键进⾏射击，W键可前进，A、D键或者⽅向键可改变射击⽅向。

javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='';void(0);2. 让图⽚飞起来只要把下⾯的代码贴到浏览器的地址栏⾥然后按Enter键，当前⽹页的所有图⽚都将动起来。

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute';DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval('A()',5);document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI[i].style.position="static";}}; void(0)3. 让⽹页可编辑此JavaScript代码，可以让你实时修改任何的⽹页，在Firefox中，你甚⾄可以把修改的⽹页保存到起来，对于⽹页设计者来说，这个功能可以辅助完善页⾯效果。

javaScript系列---【js动画特效--案例汇总】案例1:⾃定义右击菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#menu {width: 200px;height: 217px;background: tomato;/* 添加定位 */position: absolute;/* 默认隐藏 */display: none;}li {list-style: none;width: 200px;height: 30px;border-bottom: 1px solid white;}li:hover {background: skyblue;}body {height: 2000px;}</style></head><body><div id="menu"><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Node.js</li><li>Vue</li><li>React</li><li>⼩程序</li></ul></div><script>var menu = document.getElementById('menu');// 右击事件,取消默认事件document.oncontextmenu = function (e) {// 获取⿏标的位置, 赋值给菜单的定位e = e || window.event;// console.log(e.clientX, e.clientY); // 相对于可视区// console.log(e.pageX, e.pageY); // 相对于页⾯menu.style.left = e.pageX + 'px';menu.style.top = e.pageY + 'px';// 让⾃定义菜单显⽰menu.style.display = 'block';// 取消默认事件(默认的右击菜单不显⽰)return false;}// 点击页⾯,隐藏⾃定义菜单document.onclick = function () {menu.style.display = 'none';}</script></body></html>案例2:键盘控制元素移动<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background: tomato;position: absolute;top: 300px;left: 300px;}</style></head><body><div id="box"></div><script>var box = document.getElementById('box');// 获取box的位置var l = parseInt(getStyle(box, 'left'));var t = parseInt(getStyle(box, 'top'));// console.log(l, t);// 监听键盘的按下document.onkeydown = function (e) {e = e || window.event;// console.log(e.keyCode);switch (e.keyCode) {case37:l--;break;case38:t--;break;case39:l++;break;case40:t++;break;}// 赋值box.style.left = l + 'px';box.style.top = t + 'px';}// 获取经过浏览器渲染的样式（⾏内样式内部样式外部样式）function getStyle(ele, attr) {return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr]; }</script></body></html>案例3:根据滚轮控制元素⼤⼩<body><div class="box"></div><script>var box = document.querySelector('.box');var h = 300; // box的⾼度// Chromebox.onmousewheel = wheel;// firefoxbox.addEventListener('DOMMouseScroll', wheel);function wheel(e) {var direction; // 表⽰⽅向 1表⽰向下 -1表⽰向上e = e || window.event;if (e.wheelDelta) { // chromeif (e.wheelDelta > 0) {// console.log('chrome--up');direction = -1;} else {// console.log('chrome--down');direction = 1;}} else { // firefoxif (e.detail > 0) {// console.log('firefox--down');direction = 1;} else {// console.log('firefox--up');direction = -1;}}// 根据⽅向修改box的⼤⼩h += direction;box.style.height = h + 'px';}</script></body>案例4:拖拽元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background: tomato;position: absolute;top: 100px;left: 100px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><script>var box = document.querySelector('.box');var box1 = document.querySelector('.box1');drag(box);drag(box1);function drag(ele) {// ⿏标在box上按下ele.onmousedown = function (e) {e = e || window.event;// 按下瞬间,计算误差var deltaX = e.clientX - ele.offsetLeft;var deltaY = e.clientY - ele.offsetTop;// console.log(deltaX, deltaY);// ⿏标在页⾯上移动document.onmousemove = function (e) {e = e || window.event;// console.log(e.clientX, e.clientY);// 计算当前的位置var l = e.clientX - deltaX;var t = e.clientY - deltaY;// 验收,限制范围if (l <= 0) l = 0;if (t <= 0) t = 0;// 获取屏幕的宽⾼var screenW = document.documentElement.clientWidth;var screenH = document.documentElement.clientHeight;if (l >= screenW - ele.offsetWidth) l = screenW - ele.offsetWidth;if (t >= screenH - ele.offsetHeight) t = screenH - ele.offsetHeight;// 赋值ele.style.left = l + 'px';ele.style.top = t + 'px';}}// ⿏标抬起, 取消移动事件document.onmouseup = function () {document.onmousemove = null;}}</script></body></html>案例5:碰撞检测<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background: orange;position: absolute;top: 200px;left: 200px;}.move {width: 100px;height: 100px;background: orange;position: absolute;top: 0;left: 0;}</style></head><body><div class="box">box</div><div class="move">move</div><script>var box = document.querySelector('.box');var move = document.querySelector('.move');// ⿏标在box上按下move.onmousedown = function (e) {e = e || window.event;// 按下瞬间,计算误差var deltaX = e.clientX - move.offsetLeft;var deltaY = e.clientY - move.offsetTop;// ⿏标在页⾯上移动document.onmousemove = function (e) {e = e || window.event;// 计算当前的位置var l = e.clientX - deltaX;var t = e.clientY - deltaY;// 验收,限制范围if (l <= 0) l = 0;if (t <= 0) t = 0;// 获取屏幕的宽⾼var screenW = document.documentElement.clientWidth;var screenH = document.documentElement.clientHeight;if (l >= screenW - move.offsetWidth) l = screenW - move.offsetWidth;if (t >= screenH - move.offsetHeight) t = screenH - move.offsetHeight;// 赋值,移动move.style.left = l + 'px';move.style.top = t + 'px';// 移动的过程中进⾏判断碰撞if (move.offsetLeft + move.offsetWidth >= box.offsetLeft && move.offsetTop + move.offsetHeight >= box.offsetTop && box.offsetLeft + box.offsetWidth >= move.offsetLeft && box.offsetTop + box.offsetHeight >= move.offsetTop) move.style.background = 'blue';} else {move.style.background = 'orange';}}return false;}// ⿏标抬起, 取消移动事件document.onmouseup = function () {document.onmousemove = null;}</script></body></html>案例6:改变元素多个任意属性(透明度左/右等属性)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 100px;height: 100px;position: absolute;top: 0;left: 0;background: blue;}</style></head><body><div class="box1"></div><script> //获取元素var box1 = document.querySelector('.box1');box1.onclick = function () {bufferMove(box1, { 'left': 500, 'top': 100 });}// 缓冲运动函数// ele: 元素 targetJson: ⽬标json值// 约定opacity在传参时⼿动放⼤100倍function bufferMove(ele, targetJson) {// 清除定时器clearInterval(ele.timer);// 把定时器作为⾃定属性绑定在元素上,多个不同元素之间不会相互影响ele.timer = setInterval(function () {// 假定已经到了终点(声明变量为true), 在forin中每次⾛完⼀步, 对当前位置进⾏判断, 如果有任意属性未到终点(变量变为false), 直到有⼀次全部都到达终点, 变量在forin执⾏完毕后仍为true, 停⽌定时器var tag = true;// 遍历targetJsonfor (var attr in targetJson) {if (attr == 'opacity') {// 获取元素当前透明度(放⼤100倍)var nowattr = parseInt(getStyle(ele, attr) * 100);} else {var nowattr = parseInt(getStyle(ele, attr));}// 计算步长: (⽬标值-当前值)/⽐例var step = (targetJson[attr] - nowattr) / 10;// 对步长进⾏判断,如果是正⽅向运⾏向上取整,如果是负⽅向运⾏向下取整step = step > 0 ? Math.ceil(step) : Math.floor(step);// console.log(step);// 加上步长nowattr += step;// 赋值if (attr == 'opacity') {// 赋值(透明度缩⼩100倍)ele.style[attr] = nowattr / 100;} else { ele.style[attr] = nowattr + 'px';}// 有属性未到终点,变量变成falseif (nowattr != targetJson[attr]) {tag = false;}}// 如果forin执⾏完毕tag仍未true,表⽰全部到达终点if (tag) {clearInterval(ele.timer);}}, 50);}// 获取计算后样式function getStyle(ele, attr) {return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : el e.currentStyle[attr];}</script></body></html>案例7:运动函数添加回调函数<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 100px;height: 100px;position: absolute;top: 0;left: 0;background: blue;}</style></head><body><div class="box1"></div><script src="../ujiuye.js"></script><script>var box1 = document.querySelector('.box1');box1.onclick = function () {bufferMove(box1, { 'left': 500, 'top': 1 }, function () {box1.style.background = 'pink';});}</script></body></html>。