<!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. Java基础之创建窗口——向窗口中添加菜单（Sketcher）

    控制台程序. JMenuBar对象表示放在窗口顶部的菜单栏.可以为JMenuBar对象添加JMenu或JMenuItem对象,它们都显示在菜单栏上.JMenu对象是带有标签的菜单,单击就可以显示一列菜 ...

  2. PAT 解题报告 1052. Linked List Sorting (25)

    1052. Linked List Sorting (25) A linked list consists of a series of structures, which are not neces ...

  3. PAT 解题报告 1050. String Subtraction (20)

    1050. String Subtraction (20) Given two strings S1 and S2, S = S1 - S2 is defined to be the remainin ...

  4. SQL2008 R2 SP3中使用pivot实现行转列

    同事遇到一个问题,怎么实现行转列,参考了别人的示例,我是这样解决的. 创建数据源: create table #temp ( objectid int, sitename ), cities ), p ...

  5. JDK JVM

  6. Lintcode: Interval Minimum Number

    Given an integer array (index from 0 to n-1, where n is the size of this array), and an query list. ...

  7. fzuoj Problem 2182 水题

    http://acm.fzu.edu.cn/problem.php?pid=2182 Problem 2182 水题 Accept: 188    Submit: 277Time Limit: 100 ...

  8. 。。。Spring框架总结（一）。。。

    Spring框架已经学习了两遍了,第一遍基本上忘得差不多了,现在开始复习第二遍的,也复习的差不多了,比之前懂了很多东西,今天就写下来,记录一下我滴小成果! 首先,在Spring框架中有两个重要的概念: ...

  9. ASP.NET状态管理策略

    如果要想把信息存储在客户端那可以选择视图状态.控件状态.隐藏字段.cookie.和查询字符串. 1.web窗体页提供viewstate属性作为内置结构,在同一页的多个请求间自动保留值.他作为页面的隐藏 ...

  10. Openssl生成根证书、服务器证书并签核证书

    1.修改Openssl配置文件CA目录: cat /etc/pki/tls/openssl.cnf dir = /etc/pki/CA 2.生成根证书及私钥: #http://www.haiyun.m ...