文档章节

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

carolcoral
 carolcoral
发布于 2017/09/06 15:29
字数 207
阅读 3
收藏 0
点赞 0
评论 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
【Three.js】库_OrbitControls.js

控制视口(相机)的平移、缩放、旋转。 代码示例: world_controls = new THREE.OrbitControls(camera,renderer.domElement);world_controls.target.set(0,0,0);worldcontrols.update(); 这里......

騡月
2016/03/21
874
1
8个前沿的 HTML5 & CSS3 效果(附源码)

作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大...

wewelove
2014/08/08
0
0
【计算机视觉】结构光——格雷码模式捕获教程2(经典论文)

基于结构光投影的运动物体高速实时三维测量方法研究 _刘永久 1 系统概述 采用了一种基于高速视觉的投影和同步图像获取方法,将格雷码结构光编码方法应用于运动物体三维测量中,利用缩短帧间投...

kyjl888
2017/07/03
0
0
[译] JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能

原文地址:How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本文永久链接:git......

辣手摧花
05/15
0
0
pcDuino实现办公室监控

Motion 是一个用来检测移动物体的软件包。只需一块pcDuino一个普通usb接口的摄像头,你就可以对自己的办工桌或着卧室进行监控。 实验准备 一.安装 ubuntu的源里已经有了相应的软件包。所以安...

酸酸苹果汁
2014/03/01
754
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Iterm2安装Zsh + Oh My Zsh+Solarized

安装Oh My Zsh curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh 安装Zsh: 1.安装zsh brew install zsh 2.配置iterm2 sudo vim /etc/shells输入:......

孟飞阳
9分钟前
0
0
缓解ddos攻击的有效解决办法

因为防火墙无法处理所有类型的ddos攻击,下一代防火墙生成内置的DDoS防御,但是无法处理所有类型的攻击。对抗DDoS攻击的最佳做法是有专属的设备或者服务在攻击透过防火墙或者其他的IT基础设施...

上树的熊
9分钟前
0
0
Spark Streaming如何使用checkpoint容错

在互联网场景下,经常会有各种实时的数据处理,这种处理方式也就是流式计算,延迟通常也在毫秒级或者秒级,比较有代表性的几个开源框架,分别是Storm,Spark Streaming和Filnk。 伦理片 http...

刺猬一号
11分钟前
1
0
Xamarin Essentials教程地理定位Geolocation

Xamarin Essentials教程地理定位Geolocation 通过地理定位功能,应用程序可以获取用户的当前地理位置,如经纬度值。利用地理位置,可以在地图上定位,也可以转化物理位置,划分用户的归属地。...

大学霸
24分钟前
0
0
vue 编译警告 Compiled with 4 warnings

There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing.......

落雪飞声
28分钟前
0
0
开篇文章,长期记录安全情形

密码位置 密码位于注释中 密码位于服务器端文件中 通过访问根目录下.htaccess、robots.txt查看禁查路径 密码文件可能存在的路径:/、/extra/、/extras/ 密码加密 binary to base16 sha256 彩虹...

hirainn
41分钟前
0
0
mysql数据库设置root可以远程登录的方法

mysql数据库设置root可以远程登录的方法 Posted on 2018-02-21 21:08 sishuisufeng 阅读(161) 评论(0) 编辑 收藏 允许root用户在任何地方进行远程登录,并具有所有库任何操作权限,具体操作如...

rootliu
46分钟前
1
0
TensorFlow 图的基本操作

图的创建,一般只需要使用默认图就能满足大部分的需求了 # 1 创建图的方法# 在默认图中创建常量c = tf.constant(0.0)# 新建一个图g = tf.Graph()# 设置上下文管理器,标明操作...

阿豪boy
今天
0
0
git 忽略文件失效

git update-index --assume-unchanged */.project

林子大鸟
今天
1
0
实现验证码功能

1、实现验证码,并存储 import com.dtb.pc_enterprise.entity.EnterUserEntity;import com.dtb.pc_enterprise.service.AdminService;import com.dtb.pc_enterprise.util.RedisService;......

木九天
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部