在我们打开页面的时候我们看到的大部分页面都是动态的,曾经学习VB的时候要实现一些动态的画面第一个想到的就是用Flash,如今学习了BS的东西,才算是开眼界了,刚刚学习了一个动画的效果,给大家展示一下。一个小小的函数,却实现了让页面动起来的效果。

在非常多的时候。我们为了实现一一些效果,比方渐变。移动。假设用Flash的画,无疑为浏览器加入了太大的负载,假设用多张图片一张一张显示的画。这样做又太死板了,不利于我们的变化,所以最好的方法还是封装一个方法,让我们的图片依据我们想要的效果移动。同一时候运用面向对象的方法来实现。也就是分装一个方法。我们仅仅须要设置參数就能够实现我们想要的方法的移动,是不是非常方便了,废话不多说,代码加上

//设置动画
Base.prototype.animate = function (obj) {
for (var i = 0; i < this.elements.length; i ++) {
var element = this.elements[i];
//长高变换动画。仅仅要增加 width 和 height 值就可以。
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : 'left'; var start = obj['start'] != undefined ? obj['start'] : getStyle(element, attr); //可选,默认是CSS的起始位置
var t = obj['t'] != undefined ? obj['t'] : 30; //可选,默认30毫秒运行一次
var step = obj['step'] != undefined ? obj['step'] : 10; //可选。每次运行10像素 //提供 alter 增量和 target 目标量两种方案
var alter = obj['alter'];
var target = obj['target']; //缓冲运动
var speed = obj['speed'] != undefined ? obj['speed'] : 6; //可选,默认缓冲速度为6
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer'; //可选,0表示匀速,1表示缓冲,默认缓冲 if (alter != undefined && target == undefined) {
target = alter + start;
} else if (alter == undefined && target == undefined) {
throw new Error('alter增量或target目标量必须传一个!');
} if (start > target) step = -step;
element.style[attr] = start + 'px';
clearInterval(window.timer);
timer = setInterval(function () {
//正值的使用 Math.ceil 取整,小数部分进一位。 负值的时候使用 Math.floor,小数部分进一位。 这样就不会导致结束运动的时候不流畅突兀的感觉。
if (type == 'buffer') {
step = (target - getStyle(element, attr)) / speed;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
} */
//更好的解决多出几个像素或少出几个像素的方法
if (step == 0) {
setTarget();
} else if (step > 0 && Math.abs(getStyle(element, attr) - target) <= step) {
setTarget();
} else if (step < 0 && (getStyle(element, attr) - target) <= Math.abs(step)) {
setTarget();
} else {
//放在else永远不会和停止运动通知运行,就不会出现303同一时候剪到300的问题
//可是会出现不同一时候剪到300的问题,导致突兀
element.style[attr] = getStyle(element, attr) + step + 'px';
} document.getElementById('aaa').innerHTML += getStyle(element, attr) + '<br />';
}, t); function setTarget() {
element.style[attr] = target + 'px';
clearInterval(timer);
}
}
return this;
};
<span style="white-space:pre">	</span>函数调用
$(function () {
$('#button').click(function () {
$('#box').animate({
'attr' : 'x',
'start' : 100,
'alter' : 50,
'target' : 0,
'step' : 7
});
});
});

HTML代码。我们仅仅须要设置一个ID就能够了,也就是在body找那个加入例如以下代码就可以

<div id="box">box</div>

<input type="button" id="button" value="按钮" />
<div id="aaa"></div>

初次学习javaScript,感觉他真非常的奇妙。曾经学习HTML的时候。静态的网页是能够的,可是小相对于JavaScript,他更像是一个面向过程,须要什么,都是一步一步的来结局,而JavaScript更像是面向对象,把一些方法非常好的进行封装,从而更好的运用。难怪会叫JavaScript。有个Java的单词还真有点面向对象的意思。

JavaScript初探之——图片移动的更多相关文章

  1. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. 用javascript协助导入图片

    用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...

  3. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. JavaScript修改Canvas图片

    用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...

  5. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  6. JavaScript实现判断图片是否加载完成的3种方法整理

    JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...

  7. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JavaScript初探 五

    JavaScript 初探 七 JavaScript 数据类型 基本的值类型 字符串(String) 数 字(Number) 布尔值(Boolean) 对 象(Object) 函 数(Function ...

  9. JavaScript初探 三 (学习js数组)

    JavaScript初探 (三) JavaScript数组 定义 创建数组 var 数组名 = [元素0,元素1,元素2,--] ; var arr = ["Huawei",&qu ...

随机推荐

  1. 揭开WebService的神秘面纱

    一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...

  2. Linux学习笔记之Linux命令

    1. blkid  查看当前系统中所有已挂载文件系统的类型

  3. Android O 通知栏的"running in the background"

    Android O新增的一个特性,系统会在通知栏显示当前在后台运行的应用,其实际是显示启动了前台服务的应用,并且当前应用的Activity不在前台.具体我们看下源码是怎么实现的. 1 APP调用sta ...

  4. 基于Crypto++的aes 字符串加解密实现

    esaes.h: #ifndef ESAES_H #define ESAES_H #include <cryptopp/aes.h> #include <iostream> # ...

  5. Call stack-函数调用栈

    https://en.wikipedia.org/wiki/Call_stack#STACK-FRAME In computer science, a call stack is a stack da ...

  6. LTTng

    Waiting for dig... http://frederic-wou.net/lttng/

  7. JavaScript--小白入门篇2

    一.布尔值和关系运算符.逻辑运算符 1.1 布尔值   我们上篇文章说了,学习了两种变量的类型数值型.字符串型.   实际上,还有很多变量的类型.我们今天再学习一种,叫做“布尔类型”. 数值型里面的值 ...

  8. Python学习-变量

    什么是变量? 概念:变量就是会变化的量,主要是“变”与“量”二字.变即是“变化”. 特点:与其他编程语言相同,变量是最基本的存储单位,是用来存放数据的容器.可以引用一个具体的数值,进而直接去改变这个引 ...

  9. C++异常:exception

    基本知识 下图表示了标准异常的继承关系 exception是所有标准异常的基类,自定义异常也需要继承exception,如下例: #include "pch.h" #include ...

  10. TestNG分组测试

    分为方法的分组和类的分组: GroupsOnMethod类: package com.janson.groups; import org.testng.annotations.Test; public ...