<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type='text/javascript' src='http://drmcmm.baidu.com/js/m.js'></script>

<script type='text/javascript'>

BAIDU_CLB_addSlot('10305');

BAIDU_CLB_enableAllSlots();

</script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JS动态图片墙展示效果</title>

<style type="text/css">

 html {

  overflow: hidden;

 }

 body {

  margin: 0px;

  padding: 0px;

  background: #222;

  position: absolute;

  width: 100%;

  height: 100%;

 }

 #screen {

  position:absolute;

  left: 0%;

  top: 0%;

  width: 100%;

  height: 100%;

  background: #000;

  overflow: hidden;

  cursor: url("../cross_rm.cur"), auto;

 }

 #pan {

  position: absolute;

  height: 150%;

  width: 150%;

  padding: 5%;

  background: #000000 url("images/bumps2.gif");

 }

 #screen .frame {

  position: relative;

  float: left;

  width: 29%;

  height: 27%;

  margin: 2%;

  background: #000;

  overflow: hidden;

 }

 #screen .slider {

  position: absolute;

  width: 100%;

  height: 100%;

  background: #222 url("images/bumps3.gif");

  z-index: 1000;

 }

 #pan img {

  position: absolute;

  visibility: hidden;

 }

 #pan .legend {

  position: absolute;

  bottom: 0px;

  font-size: 1em;

  color: #FFF;

  width: 2000px;

  font-family: arial;

  font-weight: bold;

 }

</style>

<script type="text/javascript">

var xm = 0;

var ym = 0;

sP = {

 cx : 0,

 cy : 0,

 N  : 0,

 R  : [],

 I  : [],

 C  : [],

 L  : [],

 Id : 0,

 init : function ()

 {

  /* ==== init script ==== */

  this.scr = document.getElementById('screen');

  this.pan = document.getElementById('pan');

  this.div = this.pan.getElementsByTagName('div');

  this.scr.onselectstart = function () { return false; }

  this.scr.ondrag        = function () { return false; }

  /* ==== for each pane ==== */

  for (var i = 0, o; o = this.div[i]; i++)

  {

   if (o.className == 'frame')

   {

    /* ==== create legend ==== */

    o.l = document.createElement('div');

    o.l.className = 'legend';

    o.appendChild(o.l);

    /* ==== create flap ==== */

    o.r = document.createElement('div');

    o.r.className = 'slider';

    o.appendChild(o.r);

    o.r.x = 0;

    o.r.l = o.l;

    o.r.p = 0;

    o.r.s = 2;

    o.r.m = false;

    o.img = o.r.img = o.getElementsByTagName('img')[0];

    o.r.c = Math.random() * 100;

    o.r.o = o;

    sP.R[sP.N] = o.r;

    sP.I[sP.N] = o.img.src;

    sP.L[sP.N] = o.title;

    o.title = "";

    sP.N++;

    /* ==== flap mouse over event ==== */

    o.r.onmouseover = function ()

    {

     if (!this.m && this.img.complete)

     {

      /* ==== switch image ==== */

      if (sP.O != this && !this.n)

      {

       this.x = this.o.offsetWidth;

       this.l.innerHTML = sP.L[sP.Id];

       this.img.src = sP.I[sP.Id];

       this.resize();

       this.n = true;

       if(++sP.Id >= sP.N)

       {

        sP.Id = 0;

        for (var i = 0, o; o = sP.R[i]; i++) o.n = false;

       }

      }

      /* ==== up++ ==== */

      if (sP.O)

      {

       sP.O.s = 2;

       sP.C.push(sP.O);

      }

      this.m = true;

      sP.O = this;

      sP.Or = this;

     }

    }

    /* ==== resize image ==== */

    o.r.resize = function ()

    {

     var i = new Image();

     i.src = this.img.src;

     this.img.style.width  = (i.width  < this.offsetWidth) ? Math.round(this.offsetWidth  * 1.25) + 'px' : Math.round(i.width) + 'px';

     this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px';

     this.w = (this.img.offsetWidth  - this.offsetWidth)  * .5;

     this.h = (this.img.offsetHeight - this.offsetHeight) * .5;

     this.img.style.visibility = 'visible';

    }

   }

  }

  /* ==== start script ==== */

  sP.resize();

  sP.run();

 },

 resize : function () {

  /* ==== window resize ==== */

  var o = sP.scr;

  sP.nw = o.offsetWidth;

  sP.nh = o.offsetHeight;

  sP.iw = sP.pan.offsetWidth;

  sP.ih = sP.pan.offsetHeight;

  for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent)

  {

   sP.nx += o.offsetLeft;

   sP.ny += o.offsetTop;

  }

  for (var i = 0, o; o = sP.R[i]; i++) o.resize();

 },

 /* ==== main loop ==== */

 run : function ()

 {

  /* ==== scroll main frame ==== */

  sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * .1;

  sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * .1;

  sP.pan.style.left = Math.round(sP.cx) + 'px';

  sP.pan.style.top  = Math.round(sP.cy) + 'px';

  /* ==== lissajou ==== */

  if(sP.O) {

   sP.O.c += .015;

   sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px';

   sP.O.img.style.top  = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px';

   sP.O.l.style.left = Math.round(sP.O.x--) + 'px';

  }

  /* ==== up ==== */

  if (sP.Or)

  {

   sP.Or.p -= sP.Or.s;

   sP.Or.s *= 1.1;

   if (sP.Or.p < -sP.Or.offsetHeight)

   {

    sP.Or.p = -sP.Or.offsetHeight;

    sP.Or.s = 2;

    sP.Or.m = false;

    sP.Or = false;

   }

   sP.O.style.top = Math.round(sP.O.p) + 'px';

  }

  /* ==== down ==== */

  for (var i = 0, c; c = sP.C[i]; i++)

  {

   if (c != sP.Or)

   {

    c.p += c.s;

    c.s *= 1.2;

    if (c.p >= 0)

    {

     c.p = 0;

     c.s = 2;

     c.m = false;

     sP.C.splice(i, 1);

    }

    c.style.top = Math.round(c.p) + 'px';

   } else {

    c.s = 2;

    c.m = false;

    sP.C.splice(i, 1);

   }

  }

  setTimeout(sP.run, 16);

 }

}

/* ==== global mouse position ==== */

document.onmousemove = function(e)

{

 if (window.event) e = window.event;

 xm = e.clientX;

 ym = e.clientY;

 return false;

}

</script>

</head>

<body>

<div id="screen">

 <div id="pan">

  <div class="frame" title=""><img  src="data:images/img_3.jpg" alt=""></div>

  <div class="frame" title=""><img   src="data:images/img_5.jpg" alt=""></div>

  <div class="frame" title=""><img  src="data:images/img_6.jpg" alt=""></div>

  <div class="frame" title=""><img  src="data:images/img_12.jpg" alt=""></div>

  <div class="frame" title=""><img  src="data:images/img_4.jpg" alt=""></div>

  <div class="frame" title=""><img  src="data:images/img_9.jpg" alt=""></div>

  <div class="frame" title=""><img src="data:images/img_2.jpg" alt=""></div>

  <div class="frame" title=""><img src="data:images/img_7.jpg" alt=""></div>

  <div class="frame" title=""><img src="data:images/img_8.jpg" alt=""></div>

 </div>

</div>

<script type="text/javascript">

 /* ==== start script ==== */

 sP.init();

 onresize = sP.resize;

</script>

另存为HTML查看吧，有机会加上演示。主要是不会上传html，谁能教教我？

超酷动态图片展示墙JS特效制作方法的更多相关文章

  1. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  2. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  3. jquery动态加载js/css文件方法

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

  4. 图片展示js特效

    html 代码片段,做一个table表格 <table width="798" height="276" border="0" ali ...

  5. CSS3实现的超酷动态圆形悬浮效果

    在线演示 本地下载 了解代码是如何开发的? 请参考并且播放如下代码轻视频: http://www.gbtags.com/gb/rtreplayerpreview/151.htm

  6. wow.js特效使用方法

    wow.js 的官网特效地址; https://www.delac.io/wow/ 使用方式: new WOW().init(); 需要加的CSS: .ani{visibility: hidden;}

  7. 图片asp木马的制作方法[转]

    一个网站里面除了asp文件,再就数图片文件最多了,它让我们的网页"美丽动人"嘻嘻,但是你有没有想到过这里面暗藏的杀机,图片也可以是asp木马. 一个网站里面除了asp文件,再就数图 ...

  8. 9款HTML5实现的超酷特效

    之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...

  9. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

随机推荐

  1. Eclipse 如何安装反编译插件

    安装反编译插件 1.Help——Eclipse Marketplace 2.输入 Decompiler 搜索并安装此插件 3.根据提示无脑下一步,安装好,重启后(如果还是无法编译,需要把默认打开cla ...

  2. 【SSH框架】之Struts2系列（一）

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系 1.Struts2框架概述 (1).什么是Struts2 Struts2是一种基于MVC模式的轻量 ...

  3. TCP系列45—拥塞控制—8、SACK关闭的拥塞撤销与虚假快速重传

    一.概述 这篇文章介绍一下TCP从Recovery状态恢复到Open状态的时候cwnd的更新.我们在tcp重传部分的文章中曾经介绍过虚假重传的概念,Linux在探测到虚假重传的时候就会执行拥塞撤销操作 ...

  4. 蜗牛慢慢爬 LeetCode 3. Longest Substring Without Repeating Characters [Difficulty: Medium]

    题目 Given a string, find the length of the longest substring without repeating characters. Examples: ...

  5. sphinx配置 + php

    1.    为什么要使用Sphinx   假设你现在运营着一个论坛,论坛数据已经超过100W,很多用户都反映论坛搜索的速度非常慢,那么这时你就可以考虑使用Sphinx了(当然其他的全文检索程序或方法也 ...

  6. java之静态代理与动态代理

    先看看静态代理是如何操作的 定义接口: public interface Person { public void sayHello(String content, int age); public ...

  7. PHP中对象的传值方式

    对象的传值方式: 为什么对于对象,值传递和引用传递,这个情况下,他们似乎没有区别??? 这要从对象的数据的存储方式来理解: $o1 = new C1(); //这里创建一个对象o1,其存储结果如图所示 ...

  8. Fetch POST All in One

    Fetch POST All in One FPAIO "use strict"; /** * * @author xgqfrms * @license MIT * @copyri ...

  9. jmeter 配置元件之计数器Counter

    用jmeter生成数据 我用过几种以下几种方法 1.CSV Data Set Config  参数化 2.${_Random} ${_Random}是jmeter函数助手里面自带的一个函数,作用是返回 ...

  10. elsarticle模板 去掉摘要前后的两条横线

    参考:http://www.newsmth.net/nForum/#!article/TeX/316697?au=ericfire 如图:使用elsarticle模板修改PDF格式,去掉摘要前后的横线 ...