超酷动态图片展示墙JS特效制作方法

<!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特效制作方法的更多相关文章

jquery动态加载js三种方法实例
这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...
纯CSS3超酷3D旋转立方体动画特效
简要教程这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
jquery动态加载js/css文件方法
先来看jquery自带的getSrcript文件方法代码如下复制代码 $.getScript(url,callback) 实例代码如下复制代码 var testVar = 'New JS l ...
图片展示js特效
html 代码片段,做一个table表格 <table width="798" height="276" border="0" ali ...
CSS3实现的超酷动态圆形悬浮效果
在线演示本地下载了解代码是如何开发的? 请参考并且播放如下代码轻视频: http://www.gbtags.com/gb/rtreplayerpreview/151.htm
wow.js特效使用方法
wow.js 的官网特效地址; https://www.delac.io/wow/ 使用方式: new WOW().init(); 需要加的CSS: .ani{visibility: hidden;}
图片asp木马的制作方法[转]
一个网站里面除了asp文件,再就数图片文件最多了,它让我们的网页"美丽动人"嘻嘻,但是你有没有想到过这里面暗藏的杀机,图片也可以是asp木马. 一个网站里面除了asp文件,再就数图 ...
9款HTML5实现的超酷特效
之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...
推荐9款使用CSS3实现的超酷动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

随机推荐

HDU 5285 wyh2000 and pupil 判二分图+贪心
题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5285 bc:http://bestcoder.hdu.edu.cn/contests/con ...
Java 数组转字符
public static String toString(int[] arr){ String temp = ""; for(int i = 0;i<arr.length; ...
c语言学习—图书搜索
请问下:你说的C四大圣经指那几本啊?——<C 陷阱与缺陷> && <C程序设计语言> && <C专家编程> && & ...
按照事务类型分析 DB2 事物的性能
概述事务是数据库系统中的核心概念之一.作为数据库系统的逻辑工作单元(Unit of Work),事务必须具有四个属性,即原子性.一致性.隔离性和持久性(ACID).数据库系统往往通过锁机制保证事务的 ...
Dsyy的第一篇博文~
2017-08-07 周一晴热热热热热咳咳,很多人看到dsyy第一反应是什么意思?当然是大神媛媛!显然不是些(diao)(si)yy.(da)(si)yy...的别义,咋有点此地无银三百两的感 ...
EasyUI中DataGrid构建复合表头
在使用easyui的DataGrid控件时,构建复合表头就显得非常简单了.只需要在使用columns属性时通过数组的方式编写列名即可.如我们需要构建成一个如下的表头: Columns的代码如下: co ...
flink ha zk集群迁移实践
flink为了保证线上作业的可用性,提供了ha机制,如果发现线上作业失败,则通过ha中存储的信息来实现作业的重新拉起. 我们在flink的线上环境使用了zk为flink的ha提供服务,但在初期,由于资 ...
SPOJ3713——Primitive Root
终于有一个SPOJ题目是我自己独立做出来的,ORZ,太感动了. 题目意思是给你一个素数,问你一个数r是否满足,r,r^2,r^3,……,r^p-1,全不相同. 以前做过这种类型的题目额.是这样的. 根 ...
Struts的xml包必须继承Struts-default 不然不能使用拦截器与返回类型的功能
Struts的xml包必须继承Struts-default 不然不能使用拦截器与返回类型的功能
【bzoj4027】[HEOI2015]兔子与樱花树形dp+贪心
题目描述很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接,我们可以把它 ...

超酷动态图片展示墙JS特效制作方法

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

随机推荐

热门专题