文档章节

Javascript物体运动(单物体运动)

carolcoral
 carolcoral
发布于 2017/09/06 15:29
字数 207
阅读 4
收藏 0

Javascript物体运动(单物体运动)

//侧边栏分享示例

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>运动动画效果</title>

        <style>

        *{margin:0px;padding: 0px;font-size: 14px;clear: both;}

        #div1{

            width: 200px;

            height: 200px;

            background-color: red;

            opacity: 0.3;

            filter:alpha(opacity:30);//设置图层透明度

            left: -200px;

            position: relative;

            top: 0px;

        }

        #share{

            width: 20px;

            height: 50px;

            background-color: blue;

            font-family: '微软雅黑';

            position: absolute;

            left: 200px;

            text-align: center;

            top: 75px;

        }

</style>

<script>

/**

 * 描述物体进行运动的状态

 * @return {startMove(itarget);} 运动函数

 */

window.onload = function(){

    var oDiv = document.getElementById('div1');

    oDiv.onmouseover = function(){

            startMove(0);

    }

    oDiv.onmouseout = function(){

            startMove(-200);

    }

}

//获取id

function getdiv(){

    var oDiv = document.getElementById('div1');

}

var timer = null;

function startMove(itarget,fn){

    var oDiv = document.getElementById('div1');

    // getdiv();

    clearInterval(timer);

    timer = setInterval(function(){

        var speed = 0;

        if(oDiv.offsetLeft > itarget){

            speed = -10;

        }else if(oDiv.offsetLeft < itarget){

            speed = 10;

        }else{

            speed = 0;

        }

        oDiv.style.left = oDiv.offsetLeft + speed +'px';

    }, 30);

}

</script>

</head>

<body>

<div id="div1"><span id='share'>分享</span></div>

</body>

</html>

 

 

© 著作权归作者所有

共有 人打赏支持
carolcoral
粉丝 0
博文 11
码字总数 6173
作品 0
成都
程序员
私信 提问
【three.js学习笔记】03 物体的运动

在上一章中,我们已经完成场景,物体的创建并且添加光影,在这一章中我们尝试让物体运动起来 众所周知动画是一帧帧的静态图像构成的,因此在浏览器中的3d绘制也是类似的,每一帧中物体位置、...

towrabbit
05/04
0
0
Android+Unity3D简单的物体运动

我们来了解一下Translate的使用 首先我们来看看场景的搭建:建一个立方体,加一个点光源。 我们要实现的就是让场景中的立方体延X轴嗖嗖的移动 那么我们在Project新建一个js脚本Creat->Javasc...

xiahuawuyu
2012/02/26
0
0
Cocos2d-js中Chipmunk引擎

我们先介绍轻量级的物理引擎——Chipmunk。Chipmunk物理引擎,由Howling Moon Software的Scott Lebcke开发,用纯C编写。Chipmunk的下载地址是http://code.google.com/p/chipmunk-physics/,技...

智捷课堂
2015/04/10
0
0
26、《每周一点canvas动画》——3D旋转与碰撞

各位同学实在不好意思,最近忙着面试找工作,耽搁了一个星期。由于前一篇文章的关注的量比较多,让我决定以后的文章尽量多加一些高质量的DEMO和配图。可能这比较耗费时间,但质量才是王道,希...

qq_39759115
04/17
0
0
JS操控CSS样式完成小球自由落体运动,和大家分享一下制作心得。

这篇心得本应该在一个月之前和大家一起分享的,由于本人比较懒,也几乎没有写博客的习惯,所以迟了一些。有一些内容只是一些个人的废话,可看可不看,毕竟在国内的应试教育下,大家基础物理知...

GPG_gogo
2013/07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊我怎么系统学习Linux技能并快速提高的

聊聊我怎么系统学习Linux技能并快速提高的 随着电子信息科技时代的发展,学会使用计算机在我们的生活中成为了必不可少的一项技能。而作为计算机中的三大操作系统之一的Linux更是饱受计算机爱...

linuxCool
48分钟前
3
0
Android/Java 获取一个byte[]的真实编码,用于解决乱码问题

来源地址:https://blog.csdn.net/qq_31384551/article/details/81627840 一个byte数组,byte[] buf,是由一个字符串转换来的,如何判断字符串使用的是什么编码? Mozilla的一个组件提供了相应...

她叫我小渝
56分钟前
6
0
使用spring-retry实现重试机制

我们经常会遇到一些场景,需要重试当前的操作,比如:文件上传失败,重新上传;微信accesstoken获取失败,重新获取等等的场景问题。那么今天就说一种可以实现此种机制的工具包:spring-retr...

哥本哈根的小哥
59分钟前
0
0
kubernetes notes

Error from server (ServerTimeout): error when creating "mysql.yaml": No API token found for service account "default", retry after the token is automatically created and added t......

kut
今天
2
0
代理模式---静态代理

package com.atguigu.java; //接口的应用:代理模式---静态代理。 public class ProxyTest { public static void main(String[] args) { NetWork work = new RealServer(); ProxyServer pro......

architect刘源源
今天
2
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部