文档章节

javascript点击之后使元素e左右震动

激烈的海胆
 激烈的海胆
发布于 2016/06/08 17:04
字数 464
阅读 10
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
    <Script>
        window.onload = function(){
            //将e转化为相对定位的元素,使之左右“震动”
            //第一个参数可以是元素对象或者是元素的id
            //如果第二个参数是函数,以e为参数,它将在动画结束时候调用
            //第三个参数指定e震动的距离,默认是5毫米
            //第四个参数指定震动多久,默认是500毫秒
            function shake(e,oncomplete,distance,time){
                if(e==="string") e = document.getElementById(e);
                if(!distance) distance = 5;
                if(!time) time = 500;

                var originalStyle = e.style.cssText;            //保存e的原始style
                e.style.position = "relative";                  //使e相对定位
                var start = (new Date()).getTime();             //动画的开始时间
                animate();                                      //动画开始

                //函数检查消耗的时间,更新e的位置
                //动画完成将e还原成原始状态
                //否则,更新e的位置,安排它自身重新运作
                function animate(){
                    var now = (new Date()).getTime();           //得到当前时间
                    var elapsed = now - start;                  //从开始以来消耗了多长时间
                    var fraction = elapsed/time;                //是总时间的几分之几
                    if(fraction<1){
                        //作为动画完成比例的函数,计算e的x位置
                        //使用正玄函数将完成的比例乘以4PI
                        //所以它来回往复两次
                        var x = distance*Math.sin(fraction*4*Math.PI);
                        e.style.left = x +"px";

                        //在25毫秒后或者在总时间的最后再次尝试运行函数
                        //目的是为了产生每秒40帧的动画
                        setTimeout(animate,Math.min(25,time-elapsed));
                    }else{                  //否则动画完成
                        e.style.cssText = originalStyle;
                        if(oncomplete) oncomplete(e);           //调试完成后的回调函数

                    }
                }
            }
            var oBtn = document.getElementById('btn');
            var oDiv = document.getElementById('div1');
            oBtn.onclick =  function(){
                shake(div1)
            }

        } ;
    </Script>
</head>
<body>
    <input id="btn" type="button" value="抖动">
    <div id="div1"></div>


</body>
</html>

© 著作权归作者所有

激烈的海胆
粉丝 0
博文 25
码字总数 7600
作品 0
北京
前端工程师
私信 提问
div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

先上个图: 布局很简单,左右超过屏幕的部分自行滚动。 1. html 2.css .ce-container {background: white;width: 100%;position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding-top:......

站住,别跑
2018/07/12
0
0
要实现60FPS动画, 你需要了解这些

原文链接: github.com/yinxin630/b… 技术交流: fiora.suisuijiang.com/ 浏览器渲染过程 60FPS, 既每分钟渲染60帧, 每一帧的间隔时间为 1000ms / 60 = 16.666ms 在一次渲染过程中, 要经历一下...

碎碎酱
07/05
0
0
Javascript浏览器兼容性

JS <noscript>标签 早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript 时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript>元素,用以在不支持JavaScript ...

wersdffg
2015/07/23
802
1
右上角的快捷图片好有力度

更新下回复,都会在加载时整个页面都震动下,还以为是页面的JS特效 duang的一下,左右就动一下。 有图有真相

欣儿
2015/03/07
106
0
JavaScript MVC框架backbone.js初探

什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架。 主要提供了3个东西:1、models(模型) 2、collections(集合) 3、views(视图) backbone.js文件本身很小,压缩...

微一
2013/01/07
247
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部