<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        body, div { padding:0px; margin:0px; }

        #box{ height:300px; width:200px; background-color:#ccc; position:absolute;left:-200px; margin-top:200px;border:1px solid #ffd800; border-radius:6px;}

        #box span{ height:85px; width:40px; position:absolute;left:200px; top:103px; line-height:40px; font-size:20px; background-color:yellow; font-weight:bold; text-align:center; border-radius:6px; border:1px solid #ffd800;}

    </style>

    <script type="text/javascript">

        window.onload = function () {

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

            oDiv.onmouseover = function () {

                StarMove();

            }

            oDiv.onmouseout = function () {

                StarMove(-);

            }

        }

        var timer = null;

        function StarMove(Targer)

        {

            var iSpeed = ;

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

            clearInterval(timer);

            if (oDiv.offsetLeft < Targer) {

                iSpeed = ;

            } else {

                iSpeed = -;

            }

            timer = setInterval(function () {

                if (oDiv.offsetLeft == Targer) {

                    clearInterval(timer);

                }

                else {

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

                }

            }, );

        }

    </script>

</head>

<body>

    <div id="box">

        <span>分享</span>

    </div>

</body>

</html>

js笔记----(运动)分享 隐藏/显示的更多相关文章

  1. js, 树状菜单隐藏显示

    js写的不是很严谨~~~嘿嘿   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. [小问题笔记（七）] JS和 jQuery常用语句笔记（隐藏/显示/禁用标签 日期操作 跳转等）

    隐藏/显示标签 $("#div1").css("display", "none");$("#div2").css(&qu ...

  3. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  4. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  5. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  6. 【功能代码】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  7. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  8. angular学习笔记(八)-控制视图显示隐藏

    本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐 ...

  9. 02 - Unit07：显示笔记下拉菜单、笔记的分享功能、笔记的删除功能

    显示笔记下拉菜单 笔记的分享功能 发送Ajax请求 绑定事件:绑定分享按钮单击事件 参数获取:笔记ID 发送请求:/share/add.do 服务器处理 ShareController ShareSe ...

随机推荐

  1. redsocks 配合iptables设置全局sockts5代理

    参照:http://kuaile.in/archives/1370 架构图: 第一步,安装redsocks 1. 安装依赖 yum install libevent-devel 2. 下载编译 git ...

  2. GTA项目 三, 使用 bootstrap table展示界面,使得data和UI分离

    /** bootstrap-table - v1.5.0 - 2014-12-12* https://github.com/wenzhixin/bootstrap-table* Copyright ( ...

  3. 在xocde运行profile 遇到"Existing default base temp directory '/Library/Caches/com.apple.dt.instruments' has insufficient privileges for user id 505. Please have the owner delete this directory"

    找到这篇文章 http://stackoverflow.com/questions/34153795/xcode-7-unable-to-open-instruments-from-developer ...

  4. Dictionary中的结构体转出来

    CGRect keyBoardFrame = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

  5. Swift游戏实战-跑酷熊猫 12 与平台的碰撞

    这节主要实现熊猫和平台的碰撞,实现熊猫在平台上奔跑 要点 对平台进行物理属性设置 //设置物理体以及中心点 self.physicsBody = SKPhysicsBody(rectangleOfSi ...

  6. Leetcode: Nth Digit

    Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note: n i ...

  7. Codeforce Round #226 Div2

    这次CF虽然,但是- - 第一题看了很久的题目意思额,虽然慢了点- -,但还算没出错,还学会了hack了- -,还+了100- - 第二题想了很久- -...后来发现可以暴力- -,哎 第三题本来也应 ...

  8. Mac系统下控制鼠标移动

    CGEventSourceRef source = CGEventSourceCreate(kCGEventSourceStateCombinedSessionState); CGEventRef m ...

  9. 算法训练 Anagrams问题

    http://lx.lanqiao.org/problem.page?gpid=T223 算法训练 Anagrams问题   时间限制:1.0s   内存限制:512.0MB      问题描述 An ...

  10. Java基础(38):Calendar类的应用（优于Date类）

    Calendar 类的应用 Date 类最主要的作用就是获得当前时间,同时这个类里面也具有设置时间以及一些其他的功能,但是由于本身设计的问题,这些方法却遭到众多批评,不建议使用,更推荐使用 Calen ...