【JavaScript】用原生js来实现链式运动以及同时执行多种运动

最新推荐文章于 2022-02-27 21:02:42 发布
最新推荐文章于 2022-02-27 21:02:42 发布
阅读量170 收藏
点赞数
分类专栏： JS实例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meichaoWen/article/details/112853957
版权

链式运动框架

function getStyle(obj, name) {
	if (obj.currentStyle) {
		return obj.currentStyle[name]
	} else {
		return getComputedStyle(obj, false)[name]
	}
}

function startMove(obj, attr, iTarget, fnEnd) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function () {
		var cur = 0
		if (attr == 'opacity') {
			cur = Math.round(parseFloat(getStyle(obj, attr)) * 100)
		} else {
			cur = parseInt(getStyle(obj, attr))
		}
		var speed = (iTarget - cur) / 3
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
		if (cur == iTarget) {
			clearInterval(obj.timer)
			if(fnEnd)fnEnd() //如果有回调函数，执行
		} else {
			if (attr == 'opacity') {
				obj.style.opacity = (cur + speed) / 100
			} else {
				obj.style[attr] = cur + speed + 'px'
			}
		}
	}, 30)
}

实例：鼠标移入先变宽、变高、改变透明度，鼠标移出，改变透明度、变矮、变窄

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px; height: 100px; background-color: #000; opacity: 0.3;}
    </style>
</head>

<body>
    <div id="div1"></div>
    <script src="move.js"></script>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1')
            oDiv.onmouseover = function () {
                startMove(oDiv, 'width', 300, function () {
                    startMove(oDiv, 'height', 300, function () {
                        startMove(oDiv, 'opacity', 100)
                    })
                })
            }
            oDiv.onmouseout = function(){
                startMove(oDiv, 'opacity', 30, function(){
                    startMove(oDiv, 'height', 200, function(){
                        startMove(oDiv, 'width', 200)
                    })
                })
            }

        }
    </script>
</body>

完美运动框架

function getStyle(obj, name) {
	if (obj.currentStyle) {
		return obj.currentStyle[name]
	} else {
		return getComputedStyle(obj, false)[name]
	}
}

function startMove(obj, json, fnEnd) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function () {
		var bStop = true
		for (var attr in json) {
			var cur = 0
			if (attr == 'opacity') {
				cur = Math.round(parseFloat(getStyle(obj, attr)) * 100)
			} else {
				cur = parseInt(getStyle(obj, attr))
			}
			var speed = (json[attr] - cur) / 3
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
			if (cur != json[attr]) //如果运动为执行完毕，将 bStop 设置为 false
			{
				bStop = false
			}
			if (attr == 'opacity') {
				obj.style.opacity = (cur + speed) / 100
			} else {
				obj.style[attr] = cur + speed + 'px'
			}
		}
		if (bStop) { //只有当所有运动执行完毕时，才会清除定时器
			clearInterval(obj.timer)
			if (fnEnd) fnEnd()
		}
	}, 30)
}

 

meichaoWen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析Javascript ES6中的原生Promise
01-19
一个 Promise 对象可以理解为一次将要执行的操作（常常被用于异步操作），使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观。而且由于 Promise.all 这样的方法存在，可以让同时执行多个...
js实现链式操作
weixin_44230693的博客
01-27 763
js实现链式操作 前言：前不久阿里远程面试时问了我一个问题，如下： function Person(){}; var person = new Person(); //实现person.set(10).get()返回20 当时正在问我原型链的问题，所以面试官直接用我写的person问的，我当时是这么实现的： function Person(){}; var person = new Person(); person.set = function(n){ return { get:funct
Android开发笔记（六十四）网页加载与JS调用
aqi00的博客
02-15 3956
内置浏览器 网页视图WebView 如果一个网站已经有现成的网页及业务逻辑，那么使用WebView将其内嵌到app中，省去了app重画页面与http通信的事情，无疑是更经济的做法。WebView就是Android上的一个浏览器内核，可自动展示web页面，并且实现js代码的相互调用。 下面是WebView的常用方法： getSettings : 获取浏览器的web设置信息。 addJava
javascript运动基础——运动回调-链式运动
口耳戈是个生僻字
03-05 170
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style&gt; #div1 {widt
javascript实例自学手册光盘源码_JavaScript中的链式操作
weixin_29133151的博客
12-03 135
阅读本文，要求熟悉JQ并具备一定的JS基本功，对原型有所了解。说到javascript的链式编程,相信很多前端开发者就不由大脑的想到jquery的链式操作.很多人最早开始接触链式操作，就是从这开始的。实例代码一:$(".box").height(200).width(200);这段代码就是给一个类名称为.box的元素 设置高度,又设置宽度;实例代码二:$(".box").height().widt...
【Javascript】入门之点击多个盒子展开收起案例
qq_37086980的博客
11-26 652
描述:点击每一个div,如果当前高是100px变成300如果高是300px变成100px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击多个展开收起&lt...
dmc:一个用于学习的小型 JavaScript 库
07-05
dmc对3个原生JavaScript方法有相同的实现，分别是Function.bind、Array.forEach、String.trim。 如果浏览器不支持以上3个方法，则dmc会对原生对象进行扩充；支持的话，则不扩充。 $("#test").addCl
ThinDOM:使用链式快速创建 DOM 元素的简单库
06-15
受 jQuery 的启发，这个简单的库让您可以非常快速地创建 DOM 元素，其表现力明显高于原生 DOM 方法。 用法 一个完整的例子在。 var captionDOM = new ThinDOM('div').attr('class', 'caption') .append(new ThinDOM...
js-anotherdialog:一个独立于库的对话框以及一个 jQuery 插件版本
06-04
除了这一次，我通过公开的方法使用了原生 Promise。 这意味着只要您返回一个 Promise，您就可以根据需要进行任意数量的异步调用，并且链式方法将按顺序触发。 作为第一轮，我用 jQuery.Deferred 测试了这个想法。 ...
JavaScript类库D
12-10
同时通过对应包装器的包装我们可以通过链式方法来操作对象，最后每个包装器都提供了拆箱(即还原为原生对象)方法。故包装器提供的实质是一个装箱、操作、拆箱的过程。 命名空间： 代码如下: var D = {}; 部分功能如下...
js实现左右来回运动效果实例
qq_64353584的博客
02-27 1586
实现js基础运动那么一定要了解css的定位方式position分为固定定位fixed 、relative 、absolute fixed 固定元素在页面上 relative 绝对定位 不会脱标 absolute 会脱标，不占位置 实现div元素从左边走到右边，就是根据目标值与实际div的左边距进行逻辑运算，这里就会分为两种情况，一种情况就是目标值比div左边距大，另一种就是目标值比div左边距小。 当目标值比div元素的左边距大，这说明div是从左边向右边运动，将div看作一个物体，通过不断的增大l
$(html) 原生js,原生js和jquery能同时用吗？
weixin_29421565的博客
05-31 677
原生js和jquery能同时用吗？原生js和jquery可以同时用。jquery是为了简化开发而被创造的，如果原生js的实现方式更简单，可以使用原生js。但是jquery会为我们做兼容性处理，你不用担心代码的兼容性问题，而自己写的原生js代码就需要考虑兼容性问题。下面是js和jquery结合的使用案例：$('#app')[0].style.display = 'inline-block';$('#...
几种方式实现JS链式操作。
chensulong
09-28 390
jQuery太大了，觉得挺实用的，但是我水平很菜，用不到那么多的功能，只需要用几个简单的功能：设置样式，设置属性，添加元素。一直没有时间做，这次利用制作项目的机会，顺便写出来了。 做了一个简单的DOM对象的包装，增加了几个简单的方法，常用的。类似jQuery的链式操作。 没做错误处理。方法：attr,append,appendTo,html,css。 $c创建对象之后，就可以使用这些方法。 ...
【JavaScript】参数为Object，但传递过去却成了[object object]
Owen的博客
11-17 5934
一、问题描述 将 Array 数组数据，作为对象的 value，将该 Object 作为接口参数传递，却成了[object object] selectionChange(list) { //list为 Array 类型数据 this.uploadData = { data : list}; //将 list 数组，作为对象的值 console.log(this.uploadData); }, this.uploadData 打印结果 将 this.uplo
判断数组中元素全部为true
Owen的博客
06-08 5376
let result = newArr.map(item => { if(item.hasOwnProperty("taxRate") === false) { return false }else{ return true } }) console.log(result) //只有全部符合才会返...
【JS】对象数组根据某个属性求和
Owen的博客
12-20 3585
arrObj = [{ title: '序号', width:60, }, { title: '商品编码', width:80, }] //计算对象数组中某个属性合计 countTotal = (arr, keyName) => { let $total = 0; $total.
【JavaScript】原生js中DOM操作之元素创建、插入和移除
Owen的博客
01-09 1805
创建元素 <body> <input type="text" id="txt1"> <input type="button" id="btn1" value="创建"> <ul id="ul1"> </ul> <script> window.onload = function () { var oUl = document.getElementById(
【JS】map批量修改对象数组的键名
Owen的博客
03-04 1442
map 实例 let arr = [{ name: 'xiaoWang', number: '01' }, { name: 'xiaoZhao', number: '02' } ] let newArr = arr.map(item => { return { label: item.nam
shell.js实现原理
最新发布
05-23
Shell.js中的方法都支持链式调用，这是通过在每个方法中返回当前对象来实现的。这样，我们就可以在一行代码中实现多个DOM操作。 例如，我们可以这样使用Shell.js： ```javascript $('.box') .addClass('active') ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值