<!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. 常用的比较器：实现方式Compareable和Comparator

    class Dog{ int size; int weight; public Dog(int s, int w){ size = s; weight = w; } } 目的:对于Dog对象作为元素所 ...

  2. 关于“问吧APP”问卷调查报告分析与体会

         上周根据我们走廊奔跑队的“问吧APP”项目对本校范围内的学生发放了上百份调查问卷,并对此作出了统计和整理.针对我们项目所提出的问题涉及到的用户信息有性别.年龄.学历.职业.平时上网途径以及对 ...

  3. JavaScript设计模式学习之路——继承

    早在学习java的时候,就已经接触了继承,在java中因为有extends关键字,因此继承就比较简单.但是在JavaScript中,只能通过灵活的办法实现类的继承. 下面是我昨天在学习过程中,了解到的 ...

  4. UserAgent 设置 php 抓取网页

    转载:http://www.webkaka.com/tutorial/php/2013/111846/ hp抓取网页,可谓轻而易举,几行代码就可以搞定.不过,如果你有所疏忽,程序写得不够严密,就会出现 ...

  5. Java web 强制301跳转

    response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY); response.setHeader("Location" ...

  6. shell脚本中调用其他脚本的三种方法

    方法一:使用 .     #. ./sub.sh 方法二:使用 source    #source ./sub.sh 方法三:使用 sh    #sh ./sub.sh 注意: 1.两个点之间,要有空 ...

  7. 查看apk包名和Activity名

    今天遇到一个bug,比较有意思. 情景: 测试一个钻石提现功能,条件是账户里必须有价值等于或者超过50美元的钻石,才允许提现,否则无法进行下一步. 测试步骤: 提现页面输入一个小于50美元的提现金额, ...

  8. 【Django】Django—Form两种解决表单数据无法动态刷新的方法

    一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为“多对多” from django.db import models class Classes(models. ...

  9. Python网络编程socket

    网络编程之socket 看到本篇文章的题目是不是很疑惑,what is this?,不要着急,但是记住一说网络编程,你就想socket,socket是实现网络编程的工具,那么什么是socket,什么是 ...

  10. python 锁 信号量 事件 队列

    什么是python 进程锁? #同步效率低,但是保证了数据安全  重点 很多时候,我们需要在多个进程中同时写一个文件,如果不加锁机制,就会导致写文件错乱 这个时候,我们可以使用multiprocess ...