代码实例：

<!DOCTYPE html>

<html>

	<head>

	    <style>

		body,html{

		padding:0;margin:0;width:100%;height:100%;

		overflow:hidden;

		}

		</style>

		<title>图片墙</title>

		<meta charset="utf-8">

		<link rel="stylesheet" href="">

		<script>

			window.onload=function  () {

			  var canvas=document.getElementById("canvas");

			  canvas.width=document.documentElement.clientWidth;

			  canvas.height=document.documentElement.clientHeight;

			  canvas.style.background="#000";

			  var imgs=document.getElementsByTagName("img");

			  var video=document.getElementById("video");

			  var cobj=canvas.getContext("2d");

			  var spring=0.8;

		      var friction=0.6;

              var t;

              cobj.beginPath();

                cobj.shadowBlur=1.5;

                cobj.shadowColor="green";

                cobj.shadowOffsetX=1;

                cobj.shadowOffsetY=2.5;

			  cobj.fillStyle="blue";

			  cobj.rect(0,0,40,40);

			  cobj.fill();

             canvas.onclick=function  (e) {

              var mx=e.layerX;

			  var my=e.layerY;

			  if(cobj.isPointInPath(mx,my)){

			   clearInterval(t);

			    cobj.clearRect(0,0,canvas.width,canvas.height);

				var arr=create ();

				t=setInterval(function  () {

				  cobj.clearRect(0,0,canvas.width,canvas.height);

				  for (var i=0; i<arr.length; i++) {

				    moves(arr[i])

				  }

                    cobj.beginPath();

                    cobj.shadowBlur=1.5;

                    cobj.shadowColor="green";

                    cobj.shadowOffsetX=1;

                    cobj.shadowOffsetY=2.5;

                    cobj.fillStyle="blue";

                    cobj.rect(0,0,100,40);

                    cobj.fill();

                    video.play();

				},60)

			  }

			 }

               function moves (obj) {

				obj.vx+= (obj.targetx-obj.changex)*spring;

				obj.vy+= (obj.targety-obj.changey)*spring;

				obj.changex+= (obj.vx *= friction);//frictionΪĦ����

				obj.changey += (obj.vy *=friction);

				cobj.beginPath();

				cobj.lineWidth=5;

				cobj.strokeStyle="#fff";

				cobj.moveTo(obj.startx,obj.starty);

				cobj.lineTo(obj.changex,obj.changey);

				cobj.stroke();

				cobj.drawImage(obj.src,obj.changex-obj.width/2,obj.changey,obj.width,obj.height);

               }

			   function create () {

			      var imgArr=[];

				  for (var i=0; i<5; i++) {

					var srcObj;

					if(i<4){

					 srcObj=imgs[i];

					}else{

					 srcObj=video;

					}

					var imgObj={src:srcObj,vx:0,vy:0,width:220,height:220,startx:220*(i+1)+150,starty:-100,targetx:220*(i+1)+150,targety:180+200*Math.random(),changex:220*(i+1)+150,changey:-100}

					imgArr.push(imgObj);

				  }

				  return imgArr;

			   }

			}

		</script>

	</head>

	<body>

	 <canvas id="canvas">

	 </canvas>

	 <img src="不二.jpg" hidden>

	  <img src="不二2.jpg" hidden>

	   <img src="不二3.jpg" hidden>

	    <img src="不二4.jpg" hidden>

       <video src="陈奕迅 - 陪你度过漫长岁月.mp4" hidden id="video">

	   </video>

	</body>

</html>

图片：

效果：

html5 图片墙的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...

  3. 分享10款效果惊艳的HTML5图片特效【转】

    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...

  4. HTML5图片旋转

    HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...

  5. 基于CSS3和HTML5图片加工前后对比代码

    分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  6. html5 图片转base64预览显示

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  8. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  9. HTML5图片预览

    两种方式实现 URL FileReader <!DOCTYPE HTML><html>    <head>    <meta charset="ut ...

随机推荐

  1. 【大量干货】史上最完整的Tengine HTTPS原理解析、实践与调试

    本文邀请阿里云CDN HTTPS技术专家金九,分享Tengine的一些HTTPS实践经验.内容主要有四个方面:HTTPS趋势.HTTPS基础.HTTPS实践.HTTPS调试. 一.HTTPS趋势 这一 ...

  2. c#类的定义，c#中的关健字，C#标识符

    什么是类:一种数数据结构,存储数据成员,方法成员,和其它的内容,便 于方便 谳用C#语法: class 类名{ //TODO} C#中关键字(小写)不能作为方法名,类名,命名空间名等, static ...

  3. php prev()函数 语法

    php prev()函数 语法 作用:将内部指针指向数组中的上一个元素,并输出.直线电机选型 语法:prev(array) 参数: 参数 描述 array 必需.指定需要操作的数组. 说明:如果数组包 ...

  4. How to not show unnecessary zeros when given integers but still have float answers when needed

    NSString *str = [NSString stringWithFormat:@"%g",12.10]; NSLog(@"str = %@",str); ...

  5. 使用 localstorage 写入浏览器并获取

    写入:以字符串的形式写入 localStorage.setItem('data', JSON.stringify(arr)); 获取: 注意:一定要使JSON.parse转为对象才能取出来,不然是空的 ...

  6. HDU4405 Aeroplane chess (概率DP,转移)

    http://acm.hdu.edu.cn/showproblem.php?pid=4405 题意:在一个1×n的格子上掷色子,从0点出发,掷了多少前进几步,同时有些格点直接相连,即若a,b相连,当落 ...

  7. linux 复制到远程服务器

    scp 文件路径 root@192.168.0.1:文件夹路径 会提示你输入远程服务器密码

  8. 知道css有个content属性吗？有什么作用？有什么应用？

    css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { c ...

  9. Python中import的使用方法

    源文出处: "import"的本质参照: Python中import机制 python导入自定义模块和包

  10. 搭建maven本地仓库

    1. 需先配置java环境. 2. 下载nexus. https://www.sonatype.com/download-nexus-repo-oss?submissionGuid=a015a3db- ...