图片减速滚动

来源：互联网发布：网络打印机关闭web打印编辑：程序博客网时间：2024/04/29 00:33

图片滚动效果在网站应用中非常多见。但光是普普通通的图片滚动，在视觉效果上往往显示比较单调。下面就介绍一个变速滚动的效果。

类代码如下：

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>

演示地址：http://www.chhblog.com/demo/46.html

0 0