<!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. BeanFactory

            Spring容器,最基本的接口就是BeanFactory 负责创建,配置,管理bean 它有一个子接口ApplicationContext并将功能扩展.         理论上bean ...

  2. struts复合类型传值（对象传值）

    01:导包,配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version ...

  3. 转 SSIS处理导入数据时, 存在的更新, 不存在的插入

    SSIS处理导入数据时, 存在的更新, 不存在的插入 分类: DTS/SSIS2006-09-10 12:43 18185人阅读 评论(22) 收藏 举报 ssissql servermicrosof ...

  4. paper 19 ：机器学习算法（简介）

    本来看了一天的分类器方面的代码,乱乱的,索性再把最基础的概念拿过来,现总结一下机器学习的算法吧! 1.机器学习算法简述 按照不同的分类标准,可以把机器学习的算法做不同的分类. 1.1 从机器学习问题角 ...

  5. 6. 星际争霸之php设计模式--建造器模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  6. mydetails-yii1

    1.yii验证码多余的get a new code ,即使在main.php中配置了中文也是出现获取新图片,影响效果 需要把 <?php $this->widget('CCaptcha') ...

  7. OpenStack fuel-web不可用解决办法

    Contents [hide] 1 为增加一台计算节点 2 磁盘清空 3 启动占用8001端口的进程 4 启动占用5432端口的进程 为增加一台计算节点 打开fuel-web,发现无法打开,弹出ngi ...

  8. YUI Reset CSS (学习摘抄)

    正在使用CSS的你,用过CSS Reset吗?当然,或许你用了,却不知道正在用,比如你可能用到: *{    margin: 0;    border: 0;    padding: 0;   } 这 ...

  9. Angularjs之directive指令学习笔记（二）

    1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...

  10. XMl的解析简单的方法

    首先需要jia包 xstream-1.4.7.jar Vo类 package com.zld.day06_03zk3demo.bean; import java.io.Serializable; im ...