<!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. SQL SERVER2005 的三种复制类型概述

    一.事务复制 事务性复制通常从发布数据库对象和数据的快照开始.创建了初始快照后,接着在发布服务器上所做的数据更改和架构修改通常在修改发生时(几乎实时)便传递给订阅服务器.数据更改将按照其在发布服务器上 ...

  2. IntelliJ IDEA 编译方式介绍

    编译方式介绍 相比较于 Eclipse 的实时自动编译,IntelliJ IDEA 的编译更加手动化,虽然 IntelliJ IDEA 也支持通过设置开启实时编译,但是不建议,因为太占资源了.Inte ...

  3. PostgreSQL Replication之第十二章 与Postgres-XC一起工作（6）

    12.6 添加节点 Postgres-XC允许您在那个过程中的任何一个时间点添加新的服务器到计划中.所有您需要做的是按照我们之前演示的设置一个节点,并在 控制器上调用CREATE NODE.然后,该系 ...

  4. PostgreSQL Replication之第十章 配置Slony（4）

    10.4 部署DDLs 对于生产性的应用程序来说,仅仅复制一个表明显是不够的.此外,通过没有办法保证数据从来不会发生改变.在某些时候,部署变化的数据结构(所谓的DDLs)是必要的. 现在的问题是,Sl ...

  5. Leetcode: Number of Islands II && Summary of Union Find

    A 2d grid map of m rows and n columns is initially filled with water. We may perform an addLand oper ...

  6. SQL 数据库备、还，附、分，数据查询，聚合函数

    认识数据库备份和事务日志备份 数据库备份与日志备份是数据库维护的日常工作,备份的目的是在于当数据库出现故障或者遭到破坏时可以根据备份的数据库及事务日志文件还原到最近的时间点将损失降到最低点. 数据库备 ...

  7. sort 树 hash 排序

    STL 中 sort 函数用法简介 做 ACM 题的时候,排序是一种经常要用到的操作.如果每次都自己写个冒泡之类的 O(n^2) 排序,不但程序容易超时,而且浪费宝贵的比赛时间,还很有可能写错. ST ...

  8. Java基础(40):Java中的集合介绍---Collection与Map

    集合类说明及区别Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap ...

  9. MyEclipse下如何安装和使用ibatis插件（网上的资料对于myeclipse8.5根本就是没有用的，所以我还是自己选择了装了一个eclipse，然后将插件装在了eclipse中）

    (1)myeclipse→help→Myeclipse configuration center:点击sofeware选项卡,在Browes Software 下有一个输入框,点击add site按钮 ...

  10. Spark K-Means

    K-Means(K均值) 介绍 K-Means是被应用的最广泛的基于划分的聚类算法,是一种硬聚类算法,属于典型的局域原型的目标函数聚类的代表.算法首先随机选择k个对象,每个对象初始地代表一个簇的平均值 ...