超酷动态图片展示墙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技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

随机推荐

L1正则化与L2正则化的理解
1. 为什么要使用正则化我们先回顾一下房价预测的例子.以下是使用多项式回归来拟合房价预测的数据: 可以看出,左图拟合较为合适,而右图过拟合.如果想要解决右图中的过拟合问题,需要能够使得 $ ...
lintcode-422-最后一个单词的长度
422-最后一个单词的长度给定一个字符串, 包含大小写字母.空格' ',请返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 注意事项一个单词的界定是,由字母组成,但不包含任何的空 ...
敏捷冲刺DAY6
一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难对于可视控件,是能进行设计的,但是对于不可视组件,比如AdoConnection怎么才能设计.但是我看del ...
HDU 2154 跳舞毯
http://acm.hdu.edu.cn/showproblem.php?pid=2154 Problem Description 由于长期缺乏运动,小黑发现自己的身材臃肿了许多,于是他想健身,更准 ...
对象库（UI MAP）
目的:能够使用配置文件存储被测页面上元素的定位方式和定位表达式,做到定位数据和程序的分离. 测试程序写好以后,可以方便不具备编码能力的测试人员进行自定义修改和配置 : package dataDriv ...
linux下c/c++的文件操作
opendir,readdir,closedir, stat()查询文件状态 open(), O_TRUNC这个Flag会把打开的文件清零... 文件锁:fcntl, F_GETLK , F_SETL ...
LoadRunner脚本增强技巧之参数化（一）
参数化的方式有两种,一种通过File引入参数值,一种通过数据库引入参数值.本篇介绍File方式引入参数值. 一.File方式参数化过程 1.在脚本中找到需要做参数化的字符串,选中,右键点击,选择Rep ...
【bzoj4355】Play with sequence 线段树区间最值操作
题目描述维护一个长度为N的序列a,现在有三种操作: 1)给出参数U,V,C,将a[U],a[U+1],...,a[V-1],a[V]都赋值为C. 2)给出参数U,V,C,对于区间[U,V]里的每个数 ...
post方法的数据类型
form-data.x-www-form-urlencoded.raw.binary的区别 1. form-data 就是http请求中的multipart/form-data,它会将表单的数据处理为 ...
【比赛】HNOI2018 转盘
通过这题,我发现了我最大的缺陷,就是题目中重要的性质发现不了,所以导致后期根本做不了.还是要多做题,培养思维对于这道题,来发现性质吧对于每一条路线,因为它有用的就是最终的时刻,所以我们都可以把它变 ...

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

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

随机推荐

热门专题