链式运动框架

最新推荐文章于 2019-08-28 17:27:47 发布
最新推荐文章于 2019-08-28 17:27:47 发布
阅读量192 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29592901/article/details/52200373
版权
<style>
    #div1{width:100px;height:100px;background: red;}
</style>
<script src="move.js"></script>
<script type="text/javascript">
    window.οnlοad=function(){
        var but1=document.getElementById('but1');
        var oDiv=document.getElementById('div1');
        but1.οnclick=function(){
            startMove(oDiv,'width',200,function(){
                startMove(oDiv,'height',200);
            });
        }
    }
</script>
</head>
<body>
<input id="but1" type="button" value="开始">
<div id="div1"></div>

</body>

Move.js链式运动增强版

/**
 * Created by Administrator on 2016/8/13.
 */
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}
function startMove(obj,attr,iTarget,fn){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var iCur=0;
        if(attr=='opacity'){
            iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
        }else{
            iCur=parseInt(getStyle(obj,attr));
        }
        var iSpeed=(iTarget-iCur)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(iTarget==iCur){
            clearInterval(obj.timer);
            if(fn){
               fn();
            }
        }else{
            if(attr=='opacity'){
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
                document.getElementById('txt1').value=obj.style.opacity;
            }else{
                obj.style[attr]=iCur+iSpeed+'px';
            }


        }
    },30);
};

大海和云朵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js - 链式运动、左右轮播（完美运动框架）
weixin_57135131的博客
11-15 145
【代码】js - 链式运动、左右轮播（完美运动框架）
JavaScript链式运动框架与案例
请叫我二狗哥
09-12 234
链式运动的框架 //链式运动，实现div的先变宽，再变高，再改变不透明度 function getStyle(obj,name) { if(getComputedStyle(obj,null)[name]) { return getComputedStyle(obj,null)[name]; //fireFox、chrome } else { return obj....
javascript链式运动框架
weixin_34364071的博客
08-31 90
前面介绍的运动都是一个物体运动之后就结束了，如果一个物体运动之后，还有其他的操作，比如一个div先变宽，然后变高、最后变透明度，我们前面的运动框架就不满足情况了。我们可以在运动框架的基础上，在加上一个fnEnd函数，当运动执行完成之后执行的操作。 链式运动框架 function getStyle(obj,name){ if(obj.c...
JavaScript运动框架 链式运动到完美运动（五）
10-19
本篇文章主要探讨的是JavaScript运动框架中的一个重要概念——链式运动，以及如何将其运用到完美运动中。 链式运动是指在一个动画完成之后无缝衔接另一个动画，形成连续的视觉效果。这种技术常见于网站设计中，例如...
多元素运动框架-链式运动的封装.html
02-21
多元素运动框架-链式运动的封装，详细讲解了运动的原理，及元素运动的方式，如何封装成函数，以及调用方式
JS高级运动实例分析
11-28
本文将深入分析两种常见的运动框架：链式运动框架和完美运动框架。 **链式运动框架** 链式运动框架允许我们串联多个动画效果，确保一个动画完成后才开始下一个。例如，我们可以先改变元素的宽度，接着改变其高度，...
深度讲解链式运动框架
weixin_44415461的博客
08-28 158
在改变单⼀任意值运动框架添加⼀个回调函数参数 链式运动顾名思义就是先运动完⼀个值再运动另⼀个 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>深度讲解链式运动框架</title> <style type="text/css"...
（43）JS运动之链式运动框架
虚心求学_一点一滴
07-25 1504
#div1 {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3}  window.onload=function () { var oDiv=document.getElementById('div1');//先获取div元素 oDiv.onmouseover=function (
完美运动（链式运动）JS框架
zyy_0725的博客
09-27 428
完美运动，链式运动
JS链式运动框架
simonmelon的专栏
03-20 723
链式运动框架在任意运动框架的基础上加了一个形参，一共四个形参  对象,属性,运动目标值,函数 obj,attr,iTarget,fnEnd function startMove(obj,attr,iTarget,fnEnd) { clearInterval(obj.timer); //清除当前对象的定时器 obj.timer=setInterval(function(){ //定义当前
js运动-链式运动
每天进步一点点
05-17 2476
接着上一篇《js运动-任意值运动》继续折腾 链式运动：一个运动接着一个运动。比如：鼠标移入div先让宽变大，接着在让高变大，接着在让透明度变化等等一系列运动连着做。废话不多说，上栗子！！     当鼠标移入div的时候，div先变宽，在变高，然后改变透明度；移出又逐次恢复到原样； 实现链式运动，需要对上一篇中的startMove() 函数继续做改进 function startMove
链式运动实例 运动框架应用 微博
都市桃源
04-25 881
源代码： 微博效果 *{ margin:0; padding:0; } #txt{ color:#090; } #oul{ width:700px; height:500px; display:block; border:1px solid #000; position:relative; left:700px; overflow:hidden;
html css js网页设计
07-12
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍： ### HTML (HyperText Markup Language) - **定义**：HTML是构建网页内容的标准标记语言。 - **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。 - **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。 ### CSS (Cascading Style Sheets) - **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。 - **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。 - **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。 ### JavaScript - **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。 - **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。 - **语法**：Java
2023年数字乡村建设解决方案PPT(34页).pptx
最新发布
07-12
数字乡村建设解决方案旨在通过数字化转型促进乡村振兴和农业农村现代化。该方案强调了数字乡村建设的战略机遇，以"1+3+5"工程为总体框架，即一个大数据中心、三大服务平台和五类主题应用。方案着重于乡村治理、产业发展和公共服务三大问题，通过完善治理体系、升级治理能力、强化产业链条和改善资源配置来推动乡村全面振兴。 方案中提出的数字乡村大数据中心是信息资源的集散地，依托大数据、AI、物联网等新技术，实现数据驱动的决策支持。三大服务平台包括产业服务、民生服务和治理服务，旨在提升农业生产智能化、经营网络化，同时优化乡村治理结构和提升服务效能。五类主题应用覆盖生产管理、流通营销、行业监管、公共服务和乡村治理，通过具体业务应用体系，实现农业全产业链的数字化管理和服务。 预期建设效益包括通过信息技术促进乡村优势产业发展，形成城郊融合型数字乡村治理新模式，以及创新服务方式，提升服务能力，保障农民权益。整体而言，该方案以数字化为手段，推动乡村经济、治理、文化等多方面的全面升级和发展。
mybatisplus链式
07-27
MyBatis-Plus是一个基于MyBatis的轻量级ORM框架，它提供了一系列增强的功能，其中包括链式查询。 链式查询是MyBatis-Plus的一个特性，它允许我们在查询条件中使用链式调用的方式来构建查询语句。通过链式查询，我们...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值