/*
* 运动函数
* 参数:
* elem 操作的元素节点
* obj 操作的元素节点上的css属性和css属性值
* attr 操作的元素节点上的css属性
* target 操作的元素节点上的css属性的目标值
* fn 运动结束后的所要执行的函数
*/
function startMove(elem, obj, fn){
// 开定时器
clearInterval(elem.timer);
elem.timer = setInterval(function(){
// 假设每一个属性都到达了目标值
var flag = true;
// 支持多属性同时运动
for( var attr in obj ){
// 目标值
var target = obj[attr];
// 获取元素当前值
var v;
if( attr == "opacity" ){
v = getStyle(elem, "opacity");
v = Math.round(v * 100);
}else{
v = parseInt(getStyle(elem, attr));
}
//console.log(v);
// 求目标值与当前值得差
var dist = target - v;
// 求步长
var speed = dist/6;
if( speed>0 ){
speed = Math.ceil(speed); // 向上取整,如果不取整,小数不是有效值,所以有可能无法到达目标值
}else{
speed = Math.floor(speed);
}
// 更新
if( attr == "opacity" ){
elem.style.opacity = (v+speed)/100;
if(/MSIE/.test(navigator.userAgent)){// 如果浏览器是IE,则执行兼容代码
elem.style.filter = "alpha(opacity:"+(v+speed)+")";
}
}else{
elem.style[attr] = v+speed+"px";
}
// 有某个属性没有达到目标值
if( v != target ){
flag = false;
}
}
// 如果已经到达目标值,则停止定时器
if( flag ){
clearInterval(elem.timer);
// 如果fn存在,则执行
if( fn ){
fn(); // 执行函数
}
}
}, 30);
}
JS-封装js让一个div或者img的移动
时间: 2024-09-28 22:23:31
JS-封装js让一个div或者img的移动的相关文章
js实现动态给一个div添加文本内容与简单的日历
js实现动态给一个div添加文本内容(即在文本框中输入一段文字,点击设置文字按钮实现将文本框中的文字添加到div中) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <style
js Ajax点击链接弹出一个DIV层窗口
下面是在实际项目中截取的部分代码,如果你想下载下来直接使用,可以点击这里点击文字弹出一个DIV层窗口代码. 效果图 HTML代码 <div class="cb pt10 mlf10"> <a href="__APP__/Article/chatpwd/value/7" onclick="verify(this);return false;" target="_blank" class="button
原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;back
【原创】使用JS封装的一个小型游戏引擎及源码分享
1 /** 2 * @description: 引擎的设计与实现 3 * @user: xiugang 4 * @time: 2018/10/01 5 */ 6 7 /* 8 * V1.0: 引擎实现的基本模块思路 9 * 1.创建一个游戏引擎对象及精灵对象 10 * 2.将精灵对象添加到引擎中去,并实现播放动画效果以及需要用到的回调方法 11 * 3.启动引擎 12 * */ 13 14 /* 15 * V2.0: 实现游戏循环模块 16 * 1.如果游戏暂停了,就跳过以下各步骤,并在100毫
原生js怎么删除一个 div
<!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> <meta http-equiv="Content-
原生JS封装运动框架
昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background
用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>
城市三级联动 AJAX-原生js封装
话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> <link rel="shortcut icon" href="../public/image/favi
自己封装js组件 - 初级
2天前抱着试试看的态度注册了此神博,心血来潮呕心沥血写了一篇关于vue 自定义组件的小文章 尼玛果然一个评论的没有!果然毫无人气!(当然了我这文章内容有限和大神们的比起来简直是粗制滥造...)索性我就把这个博客变成自己学习的笔记记录吧或许这个博客的初衷也是如此吧!奈何我这颗当网红的心啊... 话不多说进入正题,之前看到各种大神自己用js封装插件 然后到处自己用 真尼玛高大上 要说我这几年页没少学习啊 怎么写个组件都不会呢!就在这时我终于在某网站找到了一个非常适合新手上手自己写插件的教程 感觉受益
用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge