【分享】 自闭症儿童网络画展 - JS效果
2011-06-03 15:17
218 查看
超喜欢这些画，大爱。
http://show.baidu.com/
给孤独一个爱的抱抱。
其实，我们都挺孤单，在陌生的城市，上班、下班、挤公交。
下面附上 这个JS效果！（注意：没有测试IE9以下浏览器兼容性）
明天就放假了，同学们到哪里去玩？有女朋友陪吗？
<! DOCTYPE html>
<html>
<head>
<title></title>
<mce:style type="text/css"><!--
.box{ text-align:center; margin:20px 0; overflow:hidden;}
.images{height:325px;margin:0 auto; position:relative;}
.image{width:325px; height:300px;position:absolute; border:1px solid #ccc;padding:2px;background:#000;cursor:pointer}
.buttons{}
--></mce:style><style type="text/css" _mce_bogus="1"><!--
.box{ text-align:center; margin:20px 0; overflow:hidden;}
.images{height:325px;margin:0 auto; position:relative;}
.image{width:325px; height:300px;position:absolute; border:1px solid #ccc;padding:2px;background:#000;cursor:pointer}
.buttons{}
--></style>
</head>
<body>
<div class="box">
<div class="images" id="slideImages">
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_001.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_001.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_002.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_002.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_003.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_003.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_004.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_004.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_005.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_005.jpg" width="100%" height="100%"></div>
</div>
</div>
<div class="buttons">
<input type="button" value="幻灯片1" onclick="a.play(0)">
<input type="button" value="幻灯片2" onclick="a.play(1)">
<input type="button" value="幻灯片3" onclick="a.play(2)">
<input type="button" value="幻灯片4" onclick="a.play(3)">
<input type="button" value="幻灯片5" onclick="a.play(4)">
</div>
</body>
<mce:script type="text/javascript"><!--
function Slide(){
this.maxWidth = 425;
this.maxHeight = 300;
this.slideNumber = 5;// 幻灯片数量
this.stepMarginLeft = 100;//图片之间的距离
this.index = parseInt(this.slideNumber/2);//默认展示中间的图片
}
Slide.eain = function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b};
Slide.$ = function(id){ return document.getElementById(id);};
Slide.prototype = {
init:function(){
var step , i;
var _this = this;
this.slideNumber = this.slideNumber - 1;//程序需要计算称偶数
this.step = step = parseInt(this.slideNumber/2) + 1; //中间值
this.minWidth = parseInt(this.maxWidth / step);
this.minHeight = parseInt(this.maxHeight / step);
this.stepWidth = parseInt(this.minWidth / (step - 1));
this.stepHeight = parseInt(this.minHeight / (step - 1));
this.slideImgList = this.getSlideImages();//图片列表
for(i=0; i<this.slideImgList.length; i++){
this.slideImgList[i].onclick = (function(i){
return function(){
_this.play(i);
}
})(i);
}
this.go();
},
getSlideImages:function(){
return Slide.$("slideImages").getElementsByTagName("DIV");
},
go:function(){
var step = this.step
var minWidth = this.minWidth;
var minHeight = this.minHeight;
var stepWidth = this.stepWidth;
var stepHeight = this.stepHeight;
var imgList = this.slideImgList;
var stepMarginLeft = this.stepMarginLeft;
var slideNumber = this.slideNumber
var i = 0;
var j = parseInt(slideNumber/2 + 1);//中间值
var arr = this.calculationPosititon(this.index, slideNumber);
var w, h, t, l, z, ele;
while(i < slideNumber+1){
if( (i+1)< j ){
w = minWidth+( (i+1) * stepWidth);
h = minHeight+( (i+1) * stepHeight);
t = (this.maxHeight - h) / 2;
l = (i+1) * stepMarginLeft;
z = i+1;
}else if((i+1) == j){
w = this.maxWidth;
h = this.maxHeight;
t = 0;
l = (i+1) * stepMarginLeft;
z = i+1;
}else{
w = minWidth+( (slideNumber - i) * stepWidth);
h = minHeight+( (slideNumber - i) * stepHeight);
t = (this.maxHeight - h) / 2;
l = (i+1) * stepMarginLeft + this.maxWidth - w;
z = slideNumber - i;
}
ele = imgList[ arr[i] ];
this.animate(ele, 'width', w);
this.animate(ele, 'height', h);
this.animate(ele, 'top', t);
this.animate(ele, 'left', l);
ele.style.zIndex = z;
i++;
}
},
play:function(index){
this.index = index;
this.go();
},
calculationPosititon:function(index, z){
var arr = [];
var i = 0;
var step = z/2;
var d = index > step ? function(){
return index - step + i > z ? index - step + i - z - 1 : index - step + i;
}:function(){
return i+step+index+1 > z ? i+step+index - z : i+step+index+1;
}
for(i; i< z+1; i++){
arr[i] = d();
}
return arr;
},
css:function(elem, key, value){
if(elem.currentStyle){
return elem.currentStyle[key];
}else{
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(key);
}
},
animate:function(elem, style, val, callBack, time, px){
px = px || 'px';
time = time || 150;
var b = parseFloat(this.css(elem, style)) || 0;
val = val - b;
var st = new Date().getTime();
var a = setInterval(function(){
var t = new Date().getTime() - st;
if( t > time){t = time;clearInterval(a);callBack&&callBack();}
elem.style[style] = parseFloat(Slide.eain(t, b, val, time));// + px;
}, 10);
return a;
}
}
setTimeout(function(){
window.a = new Slide();
a.init();
},2000);
// --></mce:script>
</html>
http://show.baidu.com/
给孤独一个爱的抱抱。
其实，我们都挺孤单，在陌生的城市，上班、下班、挤公交。
下面附上 这个JS效果！（注意：没有测试IE9以下浏览器兼容性）
明天就放假了，同学们到哪里去玩？有女朋友陪吗？
<! DOCTYPE html>
<html>
<head>
<title></title>
<mce:style type="text/css"><!--
.box{ text-align:center; margin:20px 0; overflow:hidden;}
.images{height:325px;margin:0 auto; position:relative;}
.image{width:325px; height:300px;position:absolute; border:1px solid #ccc;padding:2px;background:#000;cursor:pointer}
.buttons{}
--></mce:style><style type="text/css" _mce_bogus="1"><!--
.box{ text-align:center; margin:20px 0; overflow:hidden;}
.images{height:325px;margin:0 auto; position:relative;}
.image{width:325px; height:300px;position:absolute; border:1px solid #ccc;padding:2px;background:#000;cursor:pointer}
.buttons{}
--></style>
</head>
<body>
<div class="box">
<div class="images" id="slideImages">
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_001.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_001.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_002.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_002.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_003.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_003.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_004.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_004.jpg" width="100%" height="100%"></div>
<div class="image"><img src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_005.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/idche/245996/r_images_2_005.jpg" width="100%" height="100%"></div>
</div>
</div>
<div class="buttons">
<input type="button" value="幻灯片1" onclick="a.play(0)">
<input type="button" value="幻灯片2" onclick="a.play(1)">
<input type="button" value="幻灯片3" onclick="a.play(2)">
<input type="button" value="幻灯片4" onclick="a.play(3)">
<input type="button" value="幻灯片5" onclick="a.play(4)">
</div>
</body>
<mce:script type="text/javascript"><!--
function Slide(){
this.maxWidth = 425;
this.maxHeight = 300;
this.slideNumber = 5;// 幻灯片数量
this.stepMarginLeft = 100;//图片之间的距离
this.index = parseInt(this.slideNumber/2);//默认展示中间的图片
}
Slide.eain = function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b};
Slide.$ = function(id){ return document.getElementById(id);};
Slide.prototype = {
init:function(){
var step , i;
var _this = this;
this.slideNumber = this.slideNumber - 1;//程序需要计算称偶数
this.step = step = parseInt(this.slideNumber/2) + 1; //中间值
this.minWidth = parseInt(this.maxWidth / step);
this.minHeight = parseInt(this.maxHeight / step);
this.stepWidth = parseInt(this.minWidth / (step - 1));
this.stepHeight = parseInt(this.minHeight / (step - 1));
this.slideImgList = this.getSlideImages();//图片列表
for(i=0; i<this.slideImgList.length; i++){
this.slideImgList[i].onclick = (function(i){
return function(){
_this.play(i);
}
})(i);
}
this.go();
},
getSlideImages:function(){
return Slide.$("slideImages").getElementsByTagName("DIV");
},
go:function(){
var step = this.step
var minWidth = this.minWidth;
var minHeight = this.minHeight;
var stepWidth = this.stepWidth;
var stepHeight = this.stepHeight;
var imgList = this.slideImgList;
var stepMarginLeft = this.stepMarginLeft;
var slideNumber = this.slideNumber
var i = 0;
var j = parseInt(slideNumber/2 + 1);//中间值
var arr = this.calculationPosititon(this.index, slideNumber);
var w, h, t, l, z, ele;
while(i < slideNumber+1){
if( (i+1)< j ){
w = minWidth+( (i+1) * stepWidth);
h = minHeight+( (i+1) * stepHeight);
t = (this.maxHeight - h) / 2;
l = (i+1) * stepMarginLeft;
z = i+1;
}else if((i+1) == j){
w = this.maxWidth;
h = this.maxHeight;
t = 0;
l = (i+1) * stepMarginLeft;
z = i+1;
}else{
w = minWidth+( (slideNumber - i) * stepWidth);
h = minHeight+( (slideNumber - i) * stepHeight);
t = (this.maxHeight - h) / 2;
l = (i+1) * stepMarginLeft + this.maxWidth - w;
z = slideNumber - i;
}
ele = imgList[ arr[i] ];
this.animate(ele, 'width', w);
this.animate(ele, 'height', h);
this.animate(ele, 'top', t);
this.animate(ele, 'left', l);
ele.style.zIndex = z;
i++;
}
},
play:function(index){
this.index = index;
this.go();
},
calculationPosititon:function(index, z){
var arr = [];
var i = 0;
var step = z/2;
var d = index > step ? function(){
return index - step + i > z ? index - step + i - z - 1 : index - step + i;
}:function(){
return i+step+index+1 > z ? i+step+index - z : i+step+index+1;
}
for(i; i< z+1; i++){
arr[i] = d();
}
return arr;
},
css:function(elem, key, value){
if(elem.currentStyle){
return elem.currentStyle[key];
}else{
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(key);
}
},
animate:function(elem, style, val, callBack, time, px){
px = px || 'px';
time = time || 150;
var b = parseFloat(this.css(elem, style)) || 0;
val = val - b;
var st = new Date().getTime();
var a = setInterval(function(){
var t = new Date().getTime() - st;
if( t > time){t = time;clearInterval(a);callBack&&callBack();}
elem.style[style] = parseFloat(Slide.eain(t, b, val, time));// + px;
}, 10);
return a;
}
}
setTimeout(function(){
window.a = new Slide();
a.init();
},2000);
// --></mce:script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 分享一个超酷的开源html5 canvas互动网络图形效果javascript类库 - sigma.js
- 分享10个Js的小型库，效果真的很棒
- js惊奇效果分享，和排序算法
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
- js实现的tab标签切换效果代码分享
- js游戏人物上下左右跑步效果代码分享
- js仿黑客帝国字母掉落效果代码分享
- JS文字球状放大效果代码分享
- JS打字效果的动态菜单代码分享
- js实现类似MSN提示的页面效果代码分享
- js鼠标点击图片切换效果代码分享
- js滑动提示效果代码分享
- JS文字球状放大效果代码分享
- js文本框走动跑马灯效果代码分享
- js实现省市级联效果分享
- 原生js一些常用流行代码分享、[很火的QQ空间长图效果代码]
- js带缩略图的图片轮播效果代码分享
- js钢琴按钮波浪式图片排列效果代码分享