【记录】仅仅是复习下这个效果

原文地址:博客园IDCHE

很久以前写个这东西还很吃力。现在也变得那么容易了。进步了呵呵。仅仅是用博客记录一下。

 

  • #
  • #
  • #
  • #
  • #

1----------------------------------------------------------------------------------------------------

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul,li
{ margin:0; padding:0;}
ul
{ list-style:none;}
.pic_box
{width:610px;height:205px; overflow:hidden; position:relative;}
.show_pic
{width:5000px;}
.show_pic li
{float:left;}
.icon_num
{position:absolute; bottom:10px; right:10px;filter:alpha(opacity=80);opacity:.8}
.icon_num li
{float:left; margin:0 5px;}
.show_pic li img
{ display:block;}
.icon_num li a
{ display:block; line-height:1.5em; padding:0 10px; text-decoration:none; background:#eee;}
.icon_num .on a
{background:#ccc;}
</style>
</head>

<body>

<div class="pic_box">
<ul class="show_pic" id="photo">
<li><img title="#" src="http://inncache.soso.com/pc/images/manage.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/player.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/py.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/xf.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/TT.jpg" alt="#" width="610" height="205" /></li>
</ul>

<ul class="icon_num" id="btnList">
<li class="on"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

</div>




<script type="text/javascript">
(
function(){

function $(id){
return document.getElementById(id);
}

var Slide = function(){
this.config = {};
var self = this,
config
= self.config;
config.interval
= null;
config.auto
= null;
config.index
= 0;
config.speed
= 300; // 速度
config.elem = $('photo'); // 变化的HTMLElement
config.btnArr = $('btnList').getElementsByTagName('li'); //

self.init();
}

Slide.prototype
= {
init:
function(){
var self = this,
config
= self.config,
btnArr
= config.btnArr,
len
= btnArr.length,
i
= 0;

for(; i<len; i++){
btnArr[i].onmouseover
= (function(i){
return function(){
self.stop();
self.go(i);
}
})(i)
};

config.elem.onmouseover
= function(){
self.stop.apply(self);
};
config.elem.onmouseout
= function(){
self.play.apply(self);
};

},
tween:
function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b},
getStyle:function(a, b, c){
if(window.getComputedStyle){
b
= b.replace(/([A-Z])/g, "-$1");
b
= b.toLowerCase();
return window.getComputedStyle(a, null).getPropertyValue(b);
}
else{
if (a.currentStyle) {
if (b == "opacity") return a.style.filter.indexOf("opacity=") >= 0 ? parseFloat(a.style.filter.match(/opacity=([^)]*)/)[1]) / 100 : "1";
return a.currentStyle[b]
}
}
},
animate:
function(elem, style, val, time, px, fn){
var self = this;
var px = px || 'px';
var time = time || 300;
var b = parseFloat(self.getStyle(elem, style));
var st = new Date().getTime();
var a = setInterval(function(){
var t = new Date().getTime() - st;
if( t > time){t = time;clearInterval(a);fn&&fn();}
elem.style[style]
= parseInt(self.tween(t, b, val, time)) + px;
},
10);
return a;
},
stop:
function(){
var self = this;
self.clear(self.config.auto);
},
clear:
function(a){
a
&& clearInterval(a);
},
transform:
function(val, callBack){

var self = this,
config
= self.config;

self.clear(config.interval);
config.interval
= self.animate(config.elem, 'marginLeft', val, config.speed, 'px', callBack);

},
go:
function(index){
var self = this,
config
= self.config,
val
= -610;
self.clear(config.interval);
config.btnArr[config.index].className
= '';
self.config.index
= index;
config.btnArr[config.index].className
= 'on';
val
= index * val - parseFloat(self.getStyle(config.elem, 'marginLeft'));
self.transform(val);
},
play:
function(index){

var self = this,
config
= this.config;

self.clear(config.auto);
config.auto
= setInterval(auto, 1500);

function auto(){
var val = -610;
config.btnArr[config.index].className
= '';
if(++config.index > 4){
val
= -((config.index-1) * val);
config.index
= 0;
}
config.btnArr[config.index].className
= 'on';
self.go(config.index);
}
}
}

var a = new Slide().play();

})()
</script>


</body>
</html>

 

 

posted @ 2011-01-03 19:15  Jun.lu  阅读(467)  评论(3编辑  收藏  举报