js运动-匀速运动、透明度、多物体的运动、多属性运动

最新推荐文章于 2022-01-16 19:06:30 发布
最新推荐文章于 2022-01-16 19:06:30 发布
阅读量655 收藏
点赞数
分类专栏： JavaScript 文章标签： 运动 透明度 多物体运动 多属性运动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Della_UI/article/details/53089600
版权

1、匀速运动

例子1：分享到

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 200px;
                background: olive;
                position: absolute;
                left: -100px;
                top: 100px;
            }
            #div2{
                width: 30px;
                height: 60px;
                background: olivedrab;
                position: absolute;
                top: 70px;
                right: -30px;
                text-align: center;
                color: #fff;
                display: table;
            }
            #div2 p{
                display: table-cell;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <p>分享到</p>
            </div>
        </div>
        <script type="text/javascript">
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var iTimer=null;

            oDiv1.onmouseover=function(){
                startMove(this,0,10)
            }

            oDiv1.onmouseout=function(){
                startMove(this,-100,-10)
            }

            function startMove(obj,target,ispeed){
                clearInterval(iTimer);//先清定时器，防止连续多次点击，速度叠加
                iTimer=setInterval(function(){
                    if (obj.offsetLeft==target) {//运动停止的条件
                        clearInterval(iTimer);
                    }else{
                        obj.style.left=obj.offsetLeft+ispeed+'px';//开始运动
                    }
                },30)
            }

        </script>
    </body>
</html>

2、透明度

例子2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #img1{
                opacity: 0.3;
                filter: alpha(opacity=30);
            }
        </style>
    </head>
    <body>
        <img src="img/1.jpg" id="img1" />
        <script type="text/javascript">
            var oImg=document.getElementById("img1");
            var iTimer=null;

            oImg.onmouseover=function(){
                startMove2(this,100,10);
            }

            oImg.onmouseout=function(){
                startMove2(this,30,-10);
            }

            function startMove2(obj,target,ispeed){
                clearInterval(iTimer);
                var iCur=0;//定义一个代表透明度的变量

                iTimer=setInterval(function(){
                    iCur=Math.round(css(obj,'opacity')*100);  //非标准ie同样能取到opacity的值，同时解决小数精度问题

                    if (iCur==target) {  
                        clearInterval(iTimer);
                    }else{
                        obj.style.opacity=( iCur+ispeed )/100;  //分别给opacity和filter赋值
                        obj.style.filter='alpha(opacity='+(iCur+ispeed)+')';
                    }
                },30)
            }

            function css(obj,attr){
                if (obj.currentStyle) {
                    return obj.currentStyle;
                }else{
                    return getComputedStyle(obj,false)[attr];
                }
            }

        </script>
    </body>
</html>

3、多物体的运动

例子3：前面例子1和例子2的结合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 200px;
                background: olive;
                position: absolute;
                left: -100px;
                top: 100px;
            }
            #div2{
                width: 30px;
                height: 60px;
                background: olivedrab;
                position: absolute;
                top: 70px;
                right: -30px;
                text-align: center;
                color: #fff;
                display: table;
            }
            #div2 p{
                display: table-cell;
                vertical-align: middle;
            }
            #img1{
                margin-left: 200px;
                opacity: 0.3;
                filter: alpha(opacity=30);
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <p>分享到</p>
            </div>
        </div>
        <img src="img/1.jpg" id="img1" />

        <script type="text/javascript">

            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var oImg=document.getElementById("img1");
            //var iTimer=null;

            oDiv1.onmouseover=function(){
                startMove(this,'left',0,10)
            }

            oDiv1.onmouseout=function(){
                startMove(this,'left',-100,-10)
            }

            oImg.onmouseover=function(){
                startMove(this,'opacity',100,10);
            }

            oImg.onmouseout=function(){
                startMove(this,'opacity',30,-10);
            }

            function startMove(obj,attr,target,ispeed){
                clearInterval(obj.iTimer);  //用obj.iTimer代替iTimer防止多个运动物体共用一个定时器而相互影响
                var iCur=0;

                obj.iTimer=setInterval(function(){
                    if (attr=='opacity') {
                        iCur=Math.round(css(obj,'opacity')*100);
                    }else{
                        iCur=parseInt( css(obj,attr) ); //css函数取出来带单位,所以要去掉单位
                    }

                    if (iCur==target) {  
                        clearInterval(obj.iTimer);
                    }else{
                        if (attr=='opacity') {
                            obj.style.opacity=( iCur+ispeed )/100;
                            obj.style.filter='alpha(opacity='+(iCur+ispeed)+')';
                        }else{
                            obj.style[attr]=iCur+ispeed+'px';
                        }

                    }
                },30)
            }

            function css(obj,attr){
                if (obj.currentStyle) {
                    return obj.currentStyle;
                }else{
                    return getComputedStyle(obj,false)[attr];
                }
            }
        </script>
    </body>
</html>

4、多属性同时运动

例子4：（注意物体的多个属性并非同时到达目标点）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: olive;
                position: absolute;
                left: 100px;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>

        <script type="text/javascript">
            var oDiv1=document.getElementById("div1");

            oDiv1.onclick=function(){
                startMove(this,{
                    width:200,
                    height:300
                },10);
            }

            function startMove(obj,json,ispeed){
                clearInterval(obj.iTimer);
                var iCur=0;

                obj.iTimer=setInterval(function(){
                    var iBtn=true;

                    for (var attr in json) {

                        if (attr=='opacity') {
                            iCur=Math.round(css(obj,'opacity')*100);
                        }else{
                            iCur=parseInt( css(obj,attr) );
                        }

                        var target=json[attr];

                        if (iCur!=target) {  
                            iBtn=false;
                            if (attr=='opacity') {
                                obj.style.opacity=( iCur+ispeed )/100;
                                obj.style.filter='alpha(opacity='+(iCur+ispeed)+')';
                            }else{
                                obj.style[attr]=iCur+ispeed+'px';
                            }
                        }   

                    }

                    if (iBtn) {
                        clearInterval(obj.iTimer);
                    }

                },30)
            }

            function css(obj,attr){
                if (obj.currentStyle) {
                    return obj.currentStyle;
                }else{
                    return getComputedStyle(obj,false)[attr];
                }
            }
        </script>
    </body>
</html>
della_uii
关注
专栏目录
JavaScript个人学习笔记---运动
JiangyeMx的博客
12-19 590
一，匀速运动 二，匀加速运动 三，缓冲运动 四，弹性运动 五，相关案例 一，匀速运动 即无加速度的运动；实现原理就是设置一个速度speed，利用定时器setInterval（）函数，在一定时间内让DOM元素的左边界（或者其他任意坐标）+上这个speed； <script> var div = document.getElementsByTagName('div')[0]; div.addEventListener('click',function(
js 运动相关属性
crazyzhanyue的博客
03-10 465
// 缓动公式     var leader = 0, target = 0;     setInterval(function(){         leader = leader +(target - leader ) / 10;        cloud.style.left = leader + "px"; } offsetWidth offsetHeight 得到对象的宽度
多属性运动(json)
vcxiaohan的博客
08-07 436
Demo *{margin:0;padding:0;} html,body{width:100%;height:100%;} body{height:1000px;} #div1{width:100px;height:100px;background-color:#660099;position:absolute;left:0px;top:0px;} #div2{width:
单属性运动函数封装
tianranran的博客
01-16 369
JS function $(selector, all) { if (all) { return document.querySelectorAll(selector) } return document.querySelector(selector) } <style> .box, .box2 { width: 100px; height: 100px; position: absolute; background-
js 封装多属性运动函数
web_Mike的博客
01-08 921
## **封装一个获取属性的函数** function getStyle(ele, property) { if (getComputedStyle) { return getComputedStyle(ele, null)[property] } else { return ele.currentStyle[property] } } ...
JS多物体透明度运动
chenmike1的博客
08-14 296
多物体不能有公用属性window.onload=function(){ var aDiv=document.getElementsByTagName('div'); for(var i=0;i&lt;aDiv.length;i++){ aDiv[i].alpha=30; aDiv[i].onmouseover=function(){ startMove(this,100); }; aD...
浅谈Javascript如何实现匀速运动
10-25
在网页编程中，利用JavaScript模拟匀速运动，通常用于制作动画效果，如元素的位置、透明度、大小等属性的变化。 通过给出的文件内容，我们可以总结出实现匀速运动需要涉及的几个关键知识点： 1. 事件监听：在...
构建通用匀速运动框架：支持多物体、同时与顺序运动
"打造通用的匀速运动框架(实例讲解)，讲解如何创建一个支持多物体、同时运动和顺序运动的通用动画框架，适用于匀速运动的场景。" 在本文中，我们将探讨如何构建一个通用的匀速运动框架，该框架不仅能够处理单个元素...
通用匀速运动框架：多物体、同步与顺序实例
例如，侧边栏淡入淡出效果通过改变`left`值实现平移，而淡入淡出则是通过调整`opacity`和`filter`属性来控制透明度。为了实现通用性，作者提出的关键在于区分像素单位（如`px`）的样式（如`margin`, `left`, `top`, ...
打造通用的匀速运动框架(实例讲解)
08-29
匀速运动框架的核心在于提供一个能够灵活处理不同类型的动画，包括同时运动、顺序运动以及对多个物体进行动画处理的能力。 首先，让我们回顾一下之前的基础版本的`animate`函数。这个函数主要处理两个实例：侧边栏...
js封装一个多物体多属性运动的函数
qq_45641978的博客
09-14 385
function startMove(node, cssObj, complete) { //complate = show; clearInterval(node.timer); node.timer = setInterval(function () { var isEnd = false; //假设都到目的值了 (质数那里一样) 如果只有一个到达目的值不效果 全都到达目的值才执行 for (var attr in cssObj) { var iTarget = cssObj[attr]; //通过g
js动画之匀速运动、缓冲运动、弹性运动、碰撞运动、属性变化动画
wwyao
11-06 3687
源代码地址：github地址https://github.com/wwyao/wwy 效果如下：
javascript运动框架多物体运动---1
qiangD的博客
08-04 494
<head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; padding: 0; } textarea { position: fixed; right: 0; top: 50px;
多物体多属性维度的运动框架示例
请叫我二狗哥
08-23 289
让不同的div区块从宽度（width）、高度（height）、边框(border)、文字大小（font-size）、不透明度(opacity)等多个维度实现JS运动框架构建。 多物体多属性维度JavaScript运动框架示例HTML代码部分 &lt;div class='div1'&gt;变宽&lt;/div&gt; &lt;div class="div1"&gt;变高&lt;/div&gt...
JavaScript 高级课程之缓冲+多个DIV运动框架实现 + 透明度
骑着猪猪去拍拖
06-10 616
JavaScript 高级课程之缓冲+多个DIV运动框架实现透明度 div { width:100px ; height:100px; margin-top:10px; background-color:#FF0004; filter:alpha(opacity:30); opacity:0.3; } window.onload = function(){ var aDiv = docum
js运动技术--多物体运动框架（变宽、变高、改变字体、改变border、透明度）以及替换offset的使用
持之以恒
07-13 517
案例1：变宽、变高、改变字体、改变border #div1,#div2,#div4{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px; border: 10px solid black;} #div3{height: 200
DOM高级操作——多属性运动完美封装
crazyFlex的博客
12-18 143
//多属性同时运动封装(callback用于链式运动) function animate(obj,param,callback,speedTime = 20){ //callback是接收了一个回调函数。这个回调函数需要在属性到达目标值时执行 if(!!callback && !(callback instanceof Function)){//callback有值，并且又不是...
Javascript 匀速运动——应用案例：网站常用功能分享到
12-17 135
网站上会经常用到Javascript 中的运动，这次与大家分享一下一些运动的基本应用 。 方便大家在开发中能够直接使用。 代码简单易懂，适用于初学者。最后会一步一步整理出一套自己的运动框架。 应用案例效果图： 鼠标移动到分享上 ，左边的div就会显示出来。移开会自己恢复。相信这个大家都会用到 很实用，下面看看代码是如何实现的。 <style type="text/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值