javascript动画效果_js动画效果animate

javascript动画效果_js动画效果animate此案例实现的是侧边栏的滑入与滑出,主要用定时器来实现物体滑动时速度的控制,从而实现滑入滑出效果,下面是效果图:下面是实现的js代码:window.onload=function(){varodiv=document.getElementById(“mydiv”);odiv.onmouseover=function(){

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

此案例实现的是侧边栏的滑入与滑出,主要用定时器来实现物体滑动时速度的控制,从而实现滑入滑出效果,下面是效果图:
这里写图片描述
下面是实现的js代码:

window.onload=function(){ 
   
                var odiv=document.getElementById("mydiv");
                odiv.onmouseover=function(){ 
   
                    startMove(0);
                }
                odiv.onmouseout=function(){ 
   
                    startMove(-200);
                }
            }
            var timer=null;
            function startMove(iTarget){ 
   
                clearInterval(timer);
                var odiv=document.getElementById("mydiv");
                timer=setInterval(function(){ 
   
                    var speed=0;
                    if(odiv.offsetLeft>iTarget){
                        speed=-10;
                    }else{
                        speed=10;
                    }
                    if(odiv.offsetLeft==iTarget){
                        clearInterval(timer);
                    }else{                      
                        odiv.style.left=odiv.offsetLeft+speed+"px";
                    }
                },30);
            }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/181752.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • makefile变量赋值

    在定义变量的值时,我们可以使用其它变量来构造变量的值,在Makefile中有两种方式来在用变量定义变量的值。先看第一种方式,也就是简单的使用“=”号,在“=”左侧是变量,右侧是变量的值,右侧变量的值可

    2021年12月25日
    55
  • 小程序父组件向子组件传值

    小程序父组件向子组件传值子组件:tabs1父组件:demo04先将子组件和父组件直接产生特定的联系,需要在demo04.json里面以键值对的方式添加。添加完毕后在父组件中就可以使用标签,就可以渲染出子组件内容。因为tabs1多次复用,所以数据不能在tabs1.js中写死。一般都是由父组件中data数据传到子组件。1.先在父组件data中添加list数据,data:{list:[{id:“2”,nam…

    2022年5月18日
    40
  • jsonp跨域原理解析

    jsonp跨域原理解析背景:由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。举个简单的例子:http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域(域名、端口相同但协议不同) http:/…

    2022年6月10日
    27
  • 没有备案的网站域名能解析吗

    没有备案的网站域名能解析吗

    2021年9月25日
    69
  • 【Lucene4.8教程之四】分析

    【Lucene4.8教程之四】分析

    2022年2月4日
    55
  • idea构建springboot_jsp项目搭建过程

    idea构建springboot_jsp项目搭建过程SpringBoot项目相对SpringMVC项目有搭建迅速,配置更少的优点。创建springboot项目有很多种方式,本文使用idea创建一个整合mongoDB和mysql数据库的简单的springboot项目。文章末尾附源码地址。搭建步骤:主要是以截图的方式介绍搭建过程。进入新建项目界面,按照下图操作经过以上步骤,基本项目框架就会搭建起来。因为项目中需要用到阿里的数据库连接池和jso

    2022年9月11日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号