1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         body, div { padding:0px; margin:0px; }
  8.         #box{ height:300px; width:200px; background-color:#ccc; position:absolute;left:-200px; margin-top:200px;border:1px solid #ffd800; border-radius:6px;}
  9.         #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;}
  10.     </style>
  11.     <script type="text/javascript">
  12.         window.onload = function () {
  13.             var oDiv = document.getElementById('box');
  14.             oDiv.onmouseover = function () {
  15.                 StarMove();
  16.             }
  17.             oDiv.onmouseout = function () {
  18.                 StarMove(-);
  19.             }
  20.         }
  21.         var timer = null;
  22.         function StarMove(Targer)
  23.         {
  24.             var iSpeed = ;
  25.             var oDiv = document.getElementById('box');
  26.             clearInterval(timer);
  27.             if (oDiv.offsetLeft < Targer) {
  28.                 iSpeed = ;
  29.             } else {
  30.                 iSpeed = -;
  31.             }
  32.  
  33.             timer = setInterval(function () {
  34.                 if (oDiv.offsetLeft == Targer) {
  35.                     clearInterval(timer);
  36.                 }
  37.                 else {
  38.                         oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  39.                 }
  40.  
  41.             }, );
  42.         }
  43.     </script>
  44. </head>
  45. <body>
  46.     <div id="box">
  47.         <span>分享</span>
  48.     </div>
  49. </body>
  50. </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. interblock corruption & intrablock corruption

    interblock corruption: corruption blocks rather than within the block itself. can only be logical co ...

  2. 使用 CSS 的 :before 和 :after 选择器做一个箭头样式

    对于 :before 和 :after 选择器,大家并不陌生,但是很少有人会主动去用它们.先解释下它们的定义和用法: :before 选择器在被选元素的内容前面插入内容,:after 选择器在被选元素 ...

  3. DB2数据库管理最佳实践（1）

    1.DB2 9的新特性 1)DB2 9.1:主要是增加了原生XML,表分区和表压缩功能.从构架上,总的进程模型和内存构架看,都和8没啥区别. DB2 中的 pureXML 支持为管理 XML 数据提供 ...

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

    12.7 处理故障转移和删除节点 在本节中,我们将看看故障切换如何处理.我们还将看看如何使用安全可靠的方法添加节点到Postgres-XC设置以及如何从Postgres-XC设置删除节点. 12.7. ...

  5. nyist 593 Take it easy

    http://acm.nyist.net/JudgeOnline/problem.php?pid=593 Take it easy 时间限制:1000 ms  |  内存限制:65535 KB 难度: ...

  6. 常见的appbug（转）

    移动App Bug的影响是用户体验差.App的商店评级下降.用户换用竞争对手的App,声誉和信誉损失.最后销售量减少,如果它是一个付费App的话. 移动App测试与传统台式机测试相比有一定的复杂性.这 ...

  7. mysql之触发器before和after的区别

    我们先做个测试: 接上篇日志建的商品表g和订单表o和触发器 假设:假设商品表有商品1,数量是10: 我们往订单表插入一条记录: insert into o(gid,much) values(1,20) ...

  8. Java Web项目里开发获取上个页面连接地址的问题

    近期做的项目有个问题,就是需要获取上个页面连接地址,我用的IE浏览器,在用location.href连接到新地址的时候,在新地址页面用document.referrer的方法获取不到原地址,我测试了下 ...

  9. ligerui_ligerTree_001_第一个“树”效果

    折叠.展开.有复选框.没有复选框: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: <%@ page languag ...

  10. 自建目录中jsp页面访问servlet路径出错404

    ---恢复内容开始--- 自建目录中jsp页面访问servlet路径出错404 使用eclipse建立的项目,总是会遇到路径问题,比如jsp页面访问servlet,jsp在默认的路径.jsp在自建目录 ...