图片滚动效果在网站应用中非常多见。 但光是普普通通的图片滚动，在视觉效果上往往显示比较单调。下面就介绍一个变速滚动的效果。
类代码如下：
JScript code
/// <summary>
/// 数值递减操作类
/// </summary>
/// <param name="count" datatypes="number">总数值。 当所有递减值之和等于此数值时， 停止操作</param>
function SpeedChange( count ) {
var interVal = 30;
var self = this;
/// <summary>
/// 当速度变换时执行。30毫秒执行一次
/// </summary>
/// <param name="all" datatypes="number">递减过程中已经递减值的和</param>
/// <param name="count" datatypes="number">递减值</param>
this.onChange = function( all, current ) {}
/// <summary>
/// 当递减完成时执行
/// </summary>
this.onEnd = function() {}
/// <summary>
/// 开始一次速度递减。
/// </summary>
this.start = function() {
var distance = 0;
var timer = window.setInterval( function() {
var speed = ( count - distance ) / 8;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
distance += speed;
if( typeof( self.onChange ) == 'function' ) {
self.onChange( distance, speed );
}
if( distance >= count ) {
window.clearInterval( timer );
if( typeof( self.onEnd ) == 'function' ) {
self.onEnd();
}
}
},
interVal );
}}
这个类的接口比较简单，我们就拿图片滚动的示例来解释这个类。构造函数只需要传一个参数， 就是需要滚动的距离。方法start的调用可以让这个滚动效果开始执行， 它是一个递减的效果， 滚动的速度从大变小。事件onChange是在递减的过程中连续执行的事件， 它有两个参数， all指的是递减过程中递减值的和，current指的是当前的递减值。事件onEnd是在递减结束时执行， 当递减值的和大于等于构造函数传入的参数时，执行结束， 同时激发onEnd事件。
以下是调用代码：
HTML code
<!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>
<title>javascript变速滚动效果</title>
<style>
body, div, img{ margin:0;padding:0}
#outer{ width: 650px; height: 260px; overflow:hidden; position: relative;}
#inner{ width: 3900px; height: 260px;position: absolute;}
#inner img{ float: left;}
</style>
</head>
<body>
<script>
/// <summary>
/// 数值递减操作类
/// </summary>
/// <param name="count" datatypes="number">总数值。 当所有递减值之和等于此数值时， 停止操作</param>
function SpeedChange( count ) {
var interVal = 30; var self = this;
/// <summary>
/// 当速度变换时执行。30毫秒执行一次
/// </summary>
/// <param name="all" datatypes="number">递减过程中已经递减值的和</param>
/// <param name="count" datatypes="number">递减值</param>
this.onChange = function( all, current ) {}
/// <summary>
/// 当递减完成时执行
/// </summary>
this.onEnd = function() {}
/// <summary>
/// 开始一次速度递减。
/// </summary>
this.start = function() {
var distance = 0;
var timer = window.setInterval( function() {
var speed = ( count - distance ) / 8;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
distance += speed;
if( typeof( self.onChange ) == 'function' ) {
self.onChange( distance, speed );
}
if( distance >= count ) {
window.clearInterval( timer );
if( typeof( self.onEnd ) == 'function' ) {
self.onEnd();
}
}
}, interVal );
}}
</script>
<div id="debug">
</div>
<div id="outer">
<div id="inner" style="left:0;">
<img src="http://www.chhblog.com/upload/1/images/SpeedChangeImage/2e716679fcd74a45ad880b9f72d6198b.jpg"/>
<img src="http://www.chhblog.com/upload/1/images/SpeedChangeImage/3a2644c9fc9042879d0c6e9294b7b282.jpg"/>
<img src="http://www.chhblog.com/upload/1/images/SpeedChangeImage/753d4ea7b5654f278d7d58a0d32fd6bc.jpg"/>
<!-- 重复部份 -->
<img src="http://www.chhblog.com/upload/1/images/SpeedChangeImage/2e716679fcd74a45ad880b9f72d6198b.jpg"/>
<img src="http://www.chhblog.com/upload/1/images/SpeedChangeImage/3a2644c9fc9042879d0c6e9294b7b282.jpg"/>
<img src="http://www.chhblog.com/upload/1/images/SpeedChangeImage/753d4ea7b5654f278d7d58a0d32fd6bc.jpg"/>
</div>
</div>
<script>
//实例化对象。 指定总数值，此值每为每图片的宽度
var sc = new SpeedChange( 650 );
//添加onchange事件。
sc.onChange = function( all, current ) {
//通过事件的第二个参数设置图片的left值进行滚动
var left = parseFloat( document.getElementById( 'inner' ).style.left );
document.getElementById( 'inner' ).style.left = ( left - current ) + 'px' }
//添加onend事件.
sc.onEnd = function() {
//当移动超过三张图片时， 把图片外层的left值设为0.
if( parseFloat( document.getElementById( 'inner' ).style.left ) <= -1950 ) {
document.getElementById( 'inner' ).style.left = '0px'; }
//继续下一次滚动
window.setTimeout( function() {
//再次开始执行
sc.start();
}, 1000 )
}
//开始执行
sc.start();
</script>
</body>
</html>
2791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
