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

最新推荐文章于 2023-06-09 09:50:33 发布
最新推荐文章于 2023-06-09 09:50:33 发布
阅读量3.2k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mz_shenbian/article/details/8815668
版权
<!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="images/img_3.jpg" alt=""></div>
  <div class="frame" title=""><img   src="images/img_5.jpg" alt=""></div>
  <div class="frame" title=""><img  src="images/img_6.jpg" alt=""></div>
  <div class="frame" title=""><img  src="images/img_12.jpg" alt=""></div>
  <div class="frame" title=""><img  src="images/img_4.jpg" alt=""></div>
  <div class="frame" title=""><img  src="images/img_9.jpg" alt=""></div>
  <div class="frame" title=""><img src="images/img_2.jpg" alt=""></div>
  <div class="frame" title=""><img src="images/img_7.jpg" alt=""></div>
  <div class="frame" title=""><img src="images/img_8.jpg" alt=""></div>
 </div>
</div>


<script type="text/javascript">
 /* ==== start script ==== */
 sP.init();
 onresize = sP.resize;
</script>


 
mz_shenbian
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超酷js弹性效果的图片展示画廊特效特效代码
03-20
这一款使用纯js制作的弹性效果的图片展示画廊特效。该图片展示特效中，图片在鼠标滑过时带有炫酷的弹性晃动效果，并且图片会跟随鼠标移动，整体效果非常的酷。
jQuery图片墙飞来动画3djs特效
ICode联盟
02-07 302
一款炫酷的jQuery图片墙网页特效，飞来动画3d效果，从远到近的动效。
非常有趣的Javascript特效，能让网页上的图片飞起来
ningyb
10-26 1012
随便打开一个网站，网页上必须有图片，否则没效果，页面打开后清除地址栏中的地址，复制如下代码到地址栏中然后按回车： javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=
js图片飞出切换动画js特效
ICode联盟
09-07 424
js图片飞出切换动画特效，基于jquery实现的图片轮播效果，点击图片出现飞出效果。
html5立体照片墙效果,js实现3D照片墙效果
weixin_30091863的博客
06-03 2660
聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦效果：1、点击Start View进入照片墙2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦3、点击上面的导航条，可以让对应的图片在中间显示4、点击中间的图片该照片翻转，显示...
12款超酷图片展示JS代码(特效实例)
05-16
12款超酷图片展示JS代码、网页特效实例
JS超酷图片翻动展示效果.zip
07-11
JS超酷图片翻动展示效果，根据鼠标进出图片的方向来控制图片进出的方式，效果超炫，兼容主流浏览器。 使用方法： 1、head区域引用文件 lrtk.css，animation.css 2、在文件中加入!-- 代码 开始 --!-- 代码 结束 --...
超酷js弹性效果的图片展示画廊特效.zip
07-04
这一款使用纯js制作的弹性效果的图片展示画廊特效。该图片展示特效中，图片在鼠标滑过时带有炫酷的弹性晃动效果，并且图片会跟随鼠标移动，整体效果非常的酷。
js特效脚本含源码和说明JS超酷图片翻动展示效果
最新发布
03-31
js特效脚本含源码和说明JS超酷图片翻动展示效果本资源系百度网盘分享地址
利用js实现动态图片切换
07-14
利用js实现动态图片切换
js实现动态图形
10-23
js实现动态图形，通过js以及CSS实现各种炫酷的动态图形。
原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞？程序员就是可以为所欲为！
编程界明世隐的博客
01-04 3239
目录 先看效果图： 实现思路： 代码： 欢迎指正，整理不易给个三连吧，谢谢拉！！ 先看效果图： 单飞： 双飞： 完成后的页面： 实现思路： 1.切图：用 background:url('+url+') no-repeat -60px -60px 这种语法，将图片切成一张张小图，添加到一个数组item里面。 2.在上一步中同步用数组keys存取小图的下标，9张小图的话（keys就输数字0-8的数组），同时用另外一个数组存下每个小图的坐标。 3.点击开始 用Math.rand
js实现照片墙效果
qq_41429765的博客
08-12 785
js实现照片墙效果 <script src="underScore.js"></script> <style> *{ margin: 0; padding: 0; border: 0; list-style: none; } html, body,ul{ width: 100%;
js实现在可视区内，文字图片动画效果
jingde528的博客
06-30 1135
js实现在可视区内，文字图片动画效果
非常有趣的Javascript特效，能让网页上的图片飞起来：）
webdiyer的专栏
01-15 6013
无意中digg上看到的，执行如下步骤就能看到效果：随便打开一个网站，网页上必须有图片，否则没效果，页面打开后清除地址栏中的地址，复制如下代码到地址栏中然后按回车：javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images;
js实现图片的飞入样式换图
qq_44004011的博客
01-27 869
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js"></script> <style> *{ margin: 0px; padding: 0px; } /*设置css动画效果 让每张小图大下1
非常有趣的Javascript特效，能让网页上的图片飞起来：
idoit0204的专栏
02-05 1019
 随便打开一个网站，网页上必须有图片，否则没效果，页面打开后清除地址栏中的地址，复制如下代码到地址栏中然后按回车：javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300;y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function
JS 页面动态图片：定时器的应用
weixin_50784508的博客
06-09 127
【代码】JS 页面动态图片：定时器的应用。
Go语言中有哪些超酷的语法
07-24
Go语言有许多超酷的语法，以下是其中一些： 1. 声明和初始化变量的简洁方式：可以使用短变量声明来同时声明和初始化变量，例如：`age := 20`。 2. 匿名函数和闭包：Go语言支持匿名函数和闭包的使用，可以在函数内部...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值