超酷动态图片展示墙JS特效制作方法
2013-04-17 19:58
671 查看
<!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=""&
9dc6
gt;</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>
<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=""&
9dc6
gt;</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 超酷动态图片展示墙JS特效制作方法
- 十个技术含量超高的JS图片展示特效
- JS实现动态图片展示效果
- js特效 图片展示放大、说明
- 利用JS进行图片的切换即特效展示图片
- js实现的图片滚动兼展示效果的特效
- JS中通过url动态获取图片大小的方法小结(两种方法)
- js特效.鼠标移上去，图片渐显的方法
- JS特效代码大全（九）超炫的js图片展示效果（一）
- JS选项卡动态替换banner图片路径的方法
- js图片展示特效2
- js实现图片和链接文字同步切换特效的方法
- js制作网站首页图片轮播特效代码
- JS动态修改图片的URL（src）的方法
- jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程
- 十个技术含量超高的JS图片展示特效
- 很酷的js图片展示特效
- JavaScript——12个超酷图片展示JS代码
- js图片展示特效3
- js实现按钮控制图片360度翻转特效的方法