<!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. Redis中的GETBIT和SETBIT(转载)

    Redis是in-memery的数据库,其优势不言而喻.详细可以阅读一下官网的介绍.https://redis.io 其主要有五种数据类型:strings,lists,sets,hashes.在学习到 ...

  2. springmvc值传递

    1.页面向后台传值 A.HttpServletRequest方式: package com.rong.controller; import javax.annotation.Resource; imp ...

  3. Communications link failure--分析之（JDBC的多种超时情况）

    本文是针对特定的情景下的特定错误,不是所有Communications link failure错误都是这个引起的,重要的区分特点是:程序是不是在卡主后两个小时(服务器的设置)后程序才感知到,才抛出了 ...

  4. (windows下的)Apache无法启动解决 the requested operation has failed

     以下文章是转载别人的,这里只做学习用 ============================================================================== ...

  5. mysql中事务

    事务控制语言 什么叫做“事务”: 想象一个场景: 小明给小花 汇款 5000元 买 IPHONE,操作界面不用管,不管什么操作界面,最终都要落实到这样两条语句的执行: update  存款表  set ...

  6. 第113天：Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  7. hbase快速入门

    hbase 是什么? Apache HBase is an open-source, distributed, versioned, non-relational database modeled a ...

  8. BZOJ 1216 操作系统(堆)

    用堆模拟题目中的操作即可. # include <cstdio> # include <cstring> # include <cstdlib> # include ...

  9. CF765F Souvenirs 解题报告

    CF765F Souvenirs 题意翻译 给出\(n(2 \le n \le 10^5 )\) ,一个长为\(n\)的序列\(a(0 \le a_i \le 10^9 )\). 给出\(m(1\le ...

  10. 【bzoj4872】【shoi2017】分手即是祝愿

    4872: [Shoi2017]分手是祝愿 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 746  Solved: 513[Submit][Statu ...