文档章节

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

carolcoral
 carolcoral
发布于 2017/09/06 15:29
字数 207
阅读 3
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

AIX 系统 (资源)

AIX--zabbix agent的编译安装以及遇到的“坑” 荐 : http://blog.51cto.com/lythjq/2128354 AIX--操作系统安装(AIX 6.1) : http://blog.51cto.com/lythjq/2128119...

寰宇01
42分钟前
0
0
Spring 转换 model 为 json 时增加属性

缘起 目前的项目中有个需求是在附件对象转换成 json 时增加个 url 属性,以前的方式是在返回附件对象或列表时候做一次统一处理,这次想看看 spring 或者 jackson fasterxml 是否自带类似功能...

郁也风
42分钟前
1
0
10大PHP比特币开源项目

如果你是一个Phper,如果你希望学习区块链,那么本文列出的 10个开源的Php比特币项目,将有助于你了解在自己的应用中 如何加入对比特币的支持。 如果你希望快速掌握使用Php对接比特币钱包的方...

汇智网教程
今天
1
0
springclould feign客户端添加全局参数

用springclould feign作为调用服务的客户端,一般来说参数可以写在feignclient的方法参数里 有时需要所有feign请求都统一添加一些参数,例如token用于鉴权等,可以这样做: 添加一个配置类,...

canneljls
今天
1
0
win32截屏并rgb24转yuv420

//最终f的内存布局为BGRA格式,需要保证buf长度足够(>w*h*4)void ScreenCap(void* buf, int w, int h){ HWND hDesk = GetDesktopWindow(); HDC hScreen = GetDC(hDesk); ......

styleman
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部