代码实例：

<!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. OC + RAC (三) 信号中的信号

    -(void)_test3{ RACSubject *signalofsignal = [RACSubject subject]; //信号中的信号(也就是发送的数据是信号) RACSubject * ...

  2. iview之——table中嵌套input、select等

    使用iview在table中嵌入button是比较常见的需求,但是在table中嵌入input或者select你是否考虑过呢?本文用实例介绍input和select在table中的嵌套. 理解tabl ...

  3. C#通过文件头判断文件的类型(不是后缀名)

    FileStream fs=new FileStream(@"D:\6",FileMode.Open,FileAccess.Read); BinaryReader reader= ...

  4. tomcat配置解决乱码问题

    在服务器上,如果项目是Tomcat启动的,可以用以下方式的设置解决乱码问题: 方法1.在Tomcat的catalina.sh(或者catalina.bat)文件中,开头加入: set JAVA_OPT ...

  5. php7新特性的理解和比较

    1. null合并运算符(??) ??语法: 如果变量存在且值不为NULL,它就会返回自身的值,否则返回它的第二个操作数. //php7以前 if判断 if(empty($_GET['param']) ...

  6. LintCode之左填充

    题目描述: 分析:由样例可知,第二个参数表示要返回的字符串的最小长度,所以当给定字符串的长度小于规定字符串最小长度时就在左边填充空格,另外还有一个重载方法leftpad的第三个参数指定左边填充的字符. ...

  7. LintCode之在O(1)时间复杂度删除链表

    题目描述: 分析:因为题目要求不能用循环,而且只给了要删除的节点,并没有给链表.所以我无法取得要删除节点的前一个节点,只能在待删除的节点以及下一个节点上做文章.我的思路是:将待删除的节点的下一个节点的 ...

  8. grammar_action

    w ll = [] for i in range(0, 10, 1): ll.append(i) print(ll) for i in ll: if i < 6: print(i) index_ ...

  9. thread_process_action

    import math import random import re import sys import threading from time import ctime, sleep from l ...

  10. ruby在类中访问@，类外访问调用方法

    class Box def initialize(w,h) @width,@height=w,h end def printWidth puts @width end def printHeight ...