<!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. [Android Tips] 3. Launch CallLog Activity

    Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(android.provider.CallLog.Calls.CONTEN ...

  2. jQuery中的siblings

    所谓siblings,英文翻译就是兄弟节点.那么故名思意,就是拿到某元素的兄弟节点(不包括自己). <html> <head> <script type="te ...

  3. C# Enum Type

    class Program { public enum TimeOfDay { Morining, Afternoon, Evening } static void Main(string[] arg ...

  4. yii框架中应用jquery表单验证插件

    效果图: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. Thread create 创建进程

    #include "windows.h" #include "iostream" #include "stdio.h" void Start ...

  6. Struts2的Action名称搜索顺序：2014.12.30

    struts.xml配置: <struts> <package name="hw" namespace="/test" extends=&qu ...

  7. paper 24 ：matlab的cat函数

    cat:用来联结数组 用法:C = cat(dim, A, B)       按dim来联结A和B两个数组. C = cat(dim, A1, A2, A3, ...)    按dim联结所有输入的数 ...

  8. java 控制器向页面传值方式

    1.单个字符串 @RequestMapping(value = "list", method = RequestMethod.GET) public ModelAndView li ...

  9. LIKE 某个变量

    declare i ); n number; begin i:='%D0FC02EAR11005%'; select po_header_id into n from po_headers_all w ...

  10. HAVING用法详解

    HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 和 SELECT 的交互方式类似.WHERE 搜索条件在进行分组操作之前应用:而 HAVING 搜索条件在进行分组操作之后应用 ...