基础 - 运动框架

function  funStyle(obj,attr){    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];}function funStartMove(obj,json,fnFinish,time){    funStopMove(obj);    funMove(obj,json,fnFinish);    obj.timer = setInterval(function(){        funMove(obj,json,fnFinish);    },time);}function funStopMove(obj){    clearInterval(obj.timer);}function funMove(obj,json,fnFinish){    obj.bStop = true;    for (var attr in json) {        funPartMove(obj,attr,json[attr]);    }    if (obj.bStop) {        funStopMove(obj);        if (fnFinish) fnFinish();    }}function funPartMove(obj,attr,iTarget){    if (attr=="opacity") {        obj.myValue = Math.round(parseFloat(funStyle(obj,attr))*100);    }else{        obj.myValue = parseInt(funStyle(obj,attr));    }    if (obj.myValue!=iTarget) {        // 匀速运动        obj.iSpeed = obj.myValue<iTarget?1:-1;        //缓冲运动        // obj.iSpeed = (iTarget-obj.myValue)/30;        // obj.iSpeed =obj.iSpeed>0?Math.ceil(obj.iSpeed):Math.floor(obj.iSpeed);        obj.myValue += obj.iSpeed;        if (attr=="opacity") {            obj.style.filter = "alpha(opacity:"+obj.myValue+")";            obj.style.opacity = obj.myValue*0.01;        }else{            obj.style[attr] = obj.myValue+"px";        }        if (obj.myValue!=iTarget) obj.bStop = false;    }}
时间: 2024-11-10 17:18:45

基础 - 运动框架的相关文章

运动框架基础

运动基础 •让Div运动起来 •速度——物体运动的快慢 •运动中的Bug –不会停止 –速度取某些值会无法停止 <!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&q

JavaScript 基础入门11 - 运动框架的封装

目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 JavaScript 运动原理 运动基础 在JavaScript中,如何让一个页面元素动起来? 首先,我们需要了解的是,在JavaScript中如何让一个页面元素动起来. 我们先来实现一个简单的功能,当我们点击按钮之后,让一个元素动起来.并且到达500的边界之后立刻停止下来. <!DOCTYPE html> <html> &l

简易运动框架

简易的运动框架可以用来控制长宽高.位置.透明度,结合定时器可以实现简单的动画. 其中最主要也是最基础的就是获得元素的属性,我们先来看一下给元素添加样式的三种方法:行内样式.嵌入式样式.外链样式表 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 &l

Web3D编程入门总结——面向对象的基础Web3D框架

本篇主要通过分析Tony Parisi的sim.js库(原版代码托管于:https://github.com/tparisi/WebGLBook/tree/master/sim),总结基础Web3D框架的编写方法.在上一篇的基础上,要求读者具有简短英文阅读或者查字典的能力. 限于水平和时间,本文难免出现错误与遗漏,您在阅读过程中如果遇到错误或者疑问请在评论区中指出,我将尽快回复. 为提高JavaScript编程效率,建议使用WebStorm工具进行网页程序编写,WebStorm官网:http:/

js运动框架逐渐递进版

运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动. 任意值变化. 链式运动. 同时运动 (第一部分):匀速运动 运动基础 思考:如何让div动起来?如下: 设置元素为绝对定位,只有绝对定位后,left,top等值才生效. 定时器的使用(动态改变值),这里使用setInterval()每隔指定的时间执行代码. 计时器setInterval(函数,交

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

封装运动框架单个属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>封装运动框架的单个属性</title> <style> div{ width: 100px; height: 100px; font-weight:bold;">pink; position: absolute; left: 10px

带无缝滚动的轮播图(含JS运动框架)

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

JS 之完美运动框架

完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseover=function(){ move(this,{width:200,height:200}); } } function getStyle(obj,attr){ if (obj.currentStyle) { r