代码实例：

<!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. php array_sum()函数 语法

    php array_sum()函数 语法 作用:返回数组中所有值的和.大理石构件价格 语法:array_sum(arra) 参数: 参数 描述 array  必需.规定数组. 说明:如果所有值都是整数 ...

  2. 【HDOJ6687】Rikka with Stable Marriage（Trie树，贪心）

    题意:给定两个长均为n的序列a和b,要求两两配对,a[i]和b[j]配对的值为a[i]^b[j],求配对后的值之和的最大值 n<=1e5,a[i],b[i]<=1e9 思路:和字典序最大的 ...

  3. sqlserver备份和恢复-5

    视图备份和恢复 备份 1. 2. 恢复 1. 2. 3.勾选覆盖现有数据库. 4. bat备份恢复 原文: https://www.cnblogs.com/lonelyxmas/p/7958649.h ...

  4. 获取系统的documents路径

    获取路径 https://superuser.com/questions/1132288/windows-command-prompt-get-relocated-users-documents-fo ...

  5. 史上最全USB HID开发资料

    史上最全USB HID开发资料 史上最全USB HID开发资料,悉心整理一个月,亲自测试. 涉及STM32 C51 8051F例子都有源码,VC上位机例子以及源码,USB协议,HID协议,USB抓包工 ...

  6. Microsoft Office Word

    快捷键 选区 选择块:[Shift]+click,光标放到块的一端,然后按住Shift,然后光标放到块的另一端. 更新域: F9 右键没有更新域选项时可以使用,如更新全部域先Ctrl + A然后F9 ...

  7. jenkins展示html测试报告（不使用html publisher）

     最终效果: 点击『测试报告』,查看测试报告: 一开始的思路是: jenkins上展示html报告[转载] jenkins使用HTML Publisher Plugin插件 拉取报告样式缺失问题解决 ...

  8. PyTestReport使用

    PyTestReport详细介绍: https://testerhome.com/opensource_projects/78 示例代码 #coding:utf-8 import os,unittes ...

  9. ubuntu搭建jdk+jenkins

    第一步,安装jdk(如果已安装,直接进行第二步) 1.下载 jdk-8u172-linux-x64.tar.gz       点此下载   2.解压 tar -zxvf jdk-8u172-linux ...

  10. 从有状态应用（Session）到无状态应用（JWT），以及 SSO 和 OAuth2

    不管用哪种方式认证用户,都可能被中间人攻击窃取 SessionID 或 Token,从而发生 CSRF 攻击.解决方式就是全站 HTTPS.现在 Let's Encrypt 已经支持免费的通配符 HT ...