简单的动画封装

最新推荐文章于 2023-12-27 10:09:20 发布
最新推荐文章于 2023-12-27 10:09:20 发布
阅读量71 收藏
点赞数
文章标签： 动画 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54089397/article/details/120917422
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: orchid;

            position: absolute;

            left: 0;

        }

        span{

            width: 150px;

            height: 150px;

            background-color: paleturquoise;

            display: block;

            position: absolute;

            left: 0;

            top: 200px;

        }

    </style>

</head>

<body>

    <div>

    </div>

    <span></span>

</body>

<script>

    // 简单动画函数封装ojb目标对象 target 目标位置

    function animate(ojb, target) {

        var timer = setInterval(function () {

            if (ojb.offsetLeft >= target) {

                // 停止动画 本质是停止定时器

                clearInterval(timer);

            }

            ojb.style.left = ojb.offsetLeft + 1 + 'px';

        }, 30);

    }

    var div = document.querySelector('div');

    var span = document.querySelector('span');

    // 调用函数

    animate(div, 500);

    animate(span, 200);

</script>

</html>

仓鼠吃肉肉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html css开关按钮样式,纯CSS实现开关按钮
weixin_42522953的博客
06-07 4581
上面这种开关按钮在现代网页UI设计中经常出现，代替了以前丑陋的checkbox。在很多UI框架中如elementUI都有组件可以直接使用。但是画出这样一个开关是十分简单的，不需要借助JS代码就可以实现。核心思路就是将原有input框进行隐藏，通过label标签(自带选中功能)和伪元素就可画出开关。画出开关后实现点击效果就很简单了，利用CSS3提供的伪类:checked，即选中checkbox的时候...
标准盒模型与怪异盒模的区别.html
02-23
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别，他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
标准盒模型与怪异盒模型的区别
热门推荐
blog
12-24 1万+
一. 清除浮动的方式。 使用overflow属性来清除浮动 (overflow: hidden) 二. visibility: hidden 与 display: none 的区别。 三. 谷歌浏览器的盒子与IE浏览器的盒子区别。 四. 让盒子垂直水平居中的方式。
标准盒模型和怪异盒模型的区别？
ProgrammingWhite的博客
02-23 5456
什么是怪异盒模型？今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里。 首先要知道，什么是盒模型？ 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区content、补白（填充）padding、边框border、边界(外边距)margin,这就是盒模型。 我的理解是将网页分为不同的区域，每...
CSS标准盒子模型和怪异盒子模型
最新发布
m0_61672533的博客
12-27 1037
CSS标准盒子模型和怪异盒子模型
标准盒模型与怪异盒模型的区别 及 box-sizing的应用
weixin_44806034的博客
01-21 268
1、盒子模型（box model） 在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin） 2、标准盒模型与怪异盒模型 对比两种模型的区别 1.标准盒模型 标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+bo
标准盒模型和怪异盒模型的区别
weixin_46386906的博客
02-23 214
标准盒模型和怪异盒模型的区别 标准盒模型 1、 标准盒模型的作用：规定了网页元素如何显示以及元素间相互关系 2、 盒模型的组成： Content(内容区) Padding(填充区) Border(边框区) Margin(外边界区) Content:元素的宽和高 Border：盒子的边缘 Padding:盒子边缘于内容之间的空白 padding： 作用...
JS简单动画封装浅析
10-28
JS动画，实质是对DOM样式的改变。只要把主流浏览器DOM元素的属性方法搞清楚，做JS动画并不算难
vue如何进行动画的封装
12-09
本文实例为大家分享了vue动画封装的具体代码，供大家参考，具体内容如下 <style> 　.v-enter,.v-leave-to{ 　opacity: 0; 　} 　.v-enter-active,.v-leave-active{ 　transition:opacity 1s; 　} </style...
popwindow的简单封装
08-10
本教程将详细介绍如何进行`PopupWindow`的简单封装，以便在项目中更方便地使用。 首先，我们来了解`PopupWindow`的基本结构。`PopupWindow`由三部分组成：内容视图（content view）、背景（background）和锚点...
分时显示不同图片，显示不同的问候语
weixin_43188011的博客
09-16 958
【案例】 分时显示不同图片，显示不同的问候语 要求： 根据不同的时间，页面显示不同的图片，同时显示不同的问候语。 1：如果是早上时间打开页面，显示上午好，显示上午图片； 2：如果是下午时间打开页面，显示下午好，显示 下午图片； 3：如果是晚上时间打开页面，显示晚上好，显示晚上图片； 分析 1：根据系统不同时间来判断，所以需要用到日期对象 2：利用多分支语句来设置不同的图片。 3：需要一个图片标签，并根据时间修改图片，就需要用到操作元素src属性 4：需要一个div元素，显示不同的问候语，修改元素内容即可。
HTML5/CSS3开关按钮 立体3D按钮
08-23
之前我介绍过几款漂亮的CSS3开关切换按钮，比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换按钮。今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。
js制作的开关灯小游戏
01-24
一个利用JavaScript制作的简单的开关灯小游戏，暂时没有得分
JS/jQuery实现简单的开关灯效果【案例】
01-19
本文实例讲述了JS/jQuery实现简单的开关灯效果。分享给大家供大家参考，具体如下： 实现效果: html结构只有两个button标签 <button id=left>开灯</button> <button id=right>关灯</button> 方法一:用原生js来做 [removed] //1.获取页面元素 var left=document.getElementById('left'); var right=document.getElementById('right'); //注意获取body的方式有两种 //第一种:直接使用document的点语
js实现简单鼠标跟随效果的方法
10-24
主要介绍了js实现简单鼠标跟随效果的方法,涉及javascript鼠标事件与坐标获取等相关技巧,非常具有实用价值,需要的朋友可以参考下
js特效——根据鼠标位置移动的图片
qq_52430605的博客
09-08 2072
看到别人的网站上有这种特效，便打算学习后自己做出来
Vue 学习笔记
予歌的博客
07-27 1097
一、创建一个界面 第一个标题没啥用处 故我删掉了 二、vue 关键字 2.1 v-if条件判断 <div id="app"> <label> <h2 v-if="isShow">test</h2> <h2 v-else>1010101 else</h2> </label> <button type="button" @click="btnClick">btn</button&gt
计算属性的使用
weixin_44432032的博客
09-18 1212
var vm=new Vue({ el:'#itany', data:{ //普通属性 msg:'welcome to itany', num1:8 }, computed:{ //计算属性 msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数 return '欢迎来到南京网博'; }, reverseMsg:function(){ //可以包含逻辑处理操作，同时reverseMsg依赖于m
vue中$event的使用
m0_49515138的博客
01-09 1366
console.log(aoe.srcElement): 即方法中的参数 $event的srcElement属性 ↓↓↓。$event此时是获取的dom元素 即 MouseEvent鼠标点击的这个按钮元素，(可理解为当前标签的属性)自定义组件（比如自定义父子组件或者elementui/iview组件）的$event。console.log(aoe): aoe即方法中的参数 $event ↓↓↓。代表的就是济南青岛这个选中的值，此时。html原生的$event。event就代表传参。
Android动画封装
06-13
以下是一个简单的动画封装示例： ```java public class AnimationUtil { public static void startScaleAnimation(View view) { Animation animation = new ScaleAnimation(1f, 1.2f, 1f, 1.2f, Animation....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值