代码实例：

<!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. maven 几个命令的用法

    进入到项目目 前 cd E:\workspace\foen_api(如切换不了目录) 直接E:\workspace\foen_api mvn clean 清理 mvn install 安装 mvn t ...

  2. P2627 修剪草坪 (单调队列优化$dp$)

    题目链接 Solution 70分很简单的DP,复杂度 O(NK). 方程如下: \[f[i][1]=max(f[j][0]+sum[i]-sum[j])\]\[f[i][0]=max(f[i-1][ ...

  3. Xenu Link Sleuth 简单好用的链接测试工具

    XenuLink Sleuth 名词介绍 “Xenu链接检测侦探”是被广泛使用的死链接检测工具.可以检测到网页中的普通链接.图片.框架.插件.背景.样式表.脚本和java程序中的链接. 那么神马时候出 ...

  4. 【HDOJ6664】Andy and Maze（color coding）

    题意:给定一张n点m边的无向带权图,问从任意结点出发,不能走已经经过的点,共经过k个点的最长路径的值 n,m<=1e4,k<=6 思路:color coding算法 考虑每次给每个点随机编 ...

  5. JavaScript面向对象初步认识

    一.面向对象初步认识 1.什么是对象? 一句话解释: 万物皆对象 对象是有属性的:用{ }来写入! 2.对象的应用(接口) json 接口简单的说就是后台提供给前端提供数据的,让我们进行渲染! 请求接 ...

  6. LintCode之最长单词

    题目描述: 分析:先建一个数组s用来存储每个字符串的长度,然后遍历数组s得到最大的数max,这个数就是词典中的最长单词的长度,由于可能有多个长度相等的单词,所以要循环整个词典,当一个单词的长度等于ma ...

  7. 屏幕分辨率测试工具（舍弃）---chrome开发者工具devTools(强烈建议系统学习)

    2019-01-25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  8. 导航栏图标切换：click事件，hover事件

    最近再做一个基于angular6的项目,导航栏需求:1.hover切换图标 2.click切换图标 先用jquery实现功能,在在angular组件里面实现. demo如下: <!DOCTYPE ...

  9. PHP 中 Error 和 Exception 两种异常的特性及日志记录或显示

    PHP 文档: Error Exception 参考: 深入理解PHP原理之异常机制 我们什么时候应该使用异常 异常和错误 所有示例基于 PHP7. 应用中,关于错误的最佳实践是: 必须报告错误 开发 ...

  10. Grafana 下载与安装（v5.4.1）

    官网地址: https://grafana.com/grafana/download Linux Ubuntu & Debian(64 Bit) SHA256: 3ccbdba9e7429f5 ...