js 封装一个动画函数

//动画函数---任意一个元素移动到指定的目标位置
    //element为元素 target为位置
    function carToon(element, target) {
        //设置一个定时器让他循环去增加
         element.timeid = setInterval(function () {
            //拿到当前的位置(纯数字)
            var current = element.offsetLeft;
            //每次要移动的像素current
            var step = 10;
            //注意 这里是判断到底往那边走 如果当前的位置大于目标位置那么就往回走(往左边走 就是负的像素)
            //否则 当前位置小于目标地址 就继续往右走(正数的像素)
             step = current > target ? -step : step;
            //这里是移动之后的位置
             current += step;
            //判断目标位置-当前的位置是否大于每次走的像素
            if (Math.abs(target - current) > Math.abs(step)) {
                //继续移动
                element.style.left = current + ‘px‘;
            } else {
                //目标位置-当前的位置小于每次走的像素.清理定时器 然后让它直接移动到目标的位置
                clearInterval(element.timeid);
                element.style.left = target + ‘px‘;
            }
        }, 10)
    }

原文地址:https://www.cnblogs.com/wanguofeng/p/10600021.html

时间: 2024-08-25 03:46:52

js 封装一个动画函数的相关文章

JavaScript—封装animte动画函数

封装Animte 动画函数 虽然可能以后的开发中可能根本不需要自己写,Jquery 给我们封装好了,或者用CSS3的一些属性达到这样的效果可能更简单. 我比较喜欢底层的算法实现,万变不离其中,这个逻辑思路,也是需要锻炼的.也跟着做了一遍 ///动画函数 //element:元素 //target:最后停止的位置 function animte(element, target) { //只有一个Timeid定时器在执行 if (element,timerId) { clearInterval(el

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) {   var oDate=new Date();   oDate.setDate(oDate.getDate()+iDay);   document.cook

自己封装一个readline函数实现服务器客户端回射

实现的功能:一次只能读取一行,客户端输入之后,一回车,马上字符串传到服务器端并显示在终端,然后服务器端将字符串又传回给客户端. 服务器端可以接收多个客户端的连接请求,并fork一个子进程来进行服务. (1)封装一个只能访问套接字描述符的readline函数 (2)服务器端启动SO_REUSEADDR套接字选项,以便服务器端不必等待TIME_WAIT状态 这是服务器端代码: 1 #include<unistd.h> 2 #include<sys/types.h> 3 #include

封装一个运动函数

1 //支持 缓冲 + 多物体 + 链式 + 完美 2 //obj:运动的对象 3 //json:存储多个attr和target 4 //callback :回调函数 代表一个功能 当一个函数作为参数时,这样的函数叫做回调函数 5 function startMove(obj,json,callback){ 6 clearInterval( obj.timer );//在运动之前先清空定时器 7 obj.timer = setInterval( function(){ 8 var flag =

js【实践】用 js 封装java shuffle函数(打乱数组下标方法)

此方法返回的会是一个全新的数组 所以并不会像java里的shuffle函数一样返回一个引用一样的数组 思路如下: 1.新建一个函数传入需要打乱下标的数组 2.获取数组的长度 3.新建一个用来保存并且返回结果的数组 4.根据数组的长度新建一个随机数(随机数记得要向下取整不然会下标越界) 5.循环添加到结果数组里面 代码如下: <script type="text/javascript"> var testArr = new Array("中国","

使用原生JS封装一个ajax

function ajax(data){ //第一步,创建XHR对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//标准的浏览器 }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP');//万恶的IE浏览器 } //第二步,准备发送前的一些配置文件 var type = data.type == 'get' ? 'get' : 'post'; var

自己封装一个MySignal函数,方便以后直接copy.

传统的signal可能会有信号未决或者信号重入或多或少的问题,毕竟这个函数已经很多年了. 所以推荐使用sigaction函数,但是sigaction函数相对signal较为复杂,而且每次要写一大堆.因此对于习惯使用signal这种简单方便的函数我们不妨自己包一下sigaction! int MySigaction(int signo, void (*func)(int)) { struct sigaction act, oact; act.sa_handler = func; sigemptys

封装一个分页函数

<?php  /**   * 分页链接生成函数   * @param int $page 当前访问的页码   * @param int $total_page 总页数   * @return string 拼接好的url地址   */ function showPage($page,$total_page){  //拼接"首页"链接 $html = '<a href="?page=1">[首页]</a>';  //拼接"上一页

d3.js 封装一个方法更新柱状图,运用数据模板

<script> var width = 400; var height = 400; //创建画布 var svg = d3.select('body') .append('svg') .attr('width',width) .attr('height',height) var padding = {top:20,left:20,right:20,bottom:20} var rectstep = 35; //矩形的宽带偏白 var rectwidth = 30;//矩形的宽 var da