<!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 type="text/css">

        #div1

        {

            width: 150px;

            height: 300px;

            background-color: green;

            position: absolute;

            left: -150px;

        }

            #div1 span

            {

                position: absolute;

                width: 20px;

                height: 60px;

                line-height: 20px;

                background-color: blue;

                right: -20px;

                top: 70px;

            }

    </style>

    <script type="text/javascript">

        var timer;

        window.onload = function () {

            var oDiv = document.getElementById("div1");

            oDiv.onmouseover = function () {

                StartMove(0);

                //StartMove(0,10);

            };

            oDiv.onmouseout = function () {

                //StartMove(-150, -10);

                StartMove(-150);

            };

        };

        //z找出不同的部分，当做参数穿进去

        function StartMove(target) {

            var speed = 0;

            var oDiv = document.getElementById("div1");

            if (oDiv.offsetLeft > target) {

                speed = -10;

            } else {

                speed = 10;

            }

            clearInterval(timer);

            timer = setInterval(function () {

                if (oDiv.offsetLeft == target) {

                    clearInterval(timer);

                } else {

                    oDiv.style.left = oDiv.offsetLeft + speed + "px";

                }

            }, 30);

        };

        //function StartMove2() {

        //    var oDiv = document.getElementById("div1");

        //    clearInterval(timer);

        //    timer = setInterval(function () {

        //        if (oDiv.offsetLeft ==-150) {

        //            clearInterval(timer);

        //        } else {

        //            oDiv.style.left = oDiv.offsetLeft-10 + "px";

        //        }

        //    }, 30);

        //};

    </script>

</head>

<body>

    <div id="div1">

        <span>分享到</span>

    </div>

</body>

</html>

　　

javascript分享到的源码的更多相关文章

  1. Omega System Trading and Development Club内部分享策略Easylanguage源码 （第二期）

    更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 我们曾经在前文(链接),为大家分享我们精心整理的私货:"System Trading and ...

  2. 【腾讯Bugly干货分享】深入源码探索 ReactNative 通信机制

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 本文从源码角度剖析 RNA 中 J ...

  3. 最近在研究电台类app，分享2个源码大家一起讨论

    好像去年有一阵,电台类的app特别火爆,喜马拉雅和蜻蜓FM互相还撕逼.听老罗,听好好说话,都得在电台app里,所以我想研究研究这些app.我没那么多资源,只好从app的开发架构方面去研究. 我看api ...

  4. 语音分享应用ios源码

    该源码是语音分享应用源码,本demo使用了科大讯飞语音识别作为分享内容的输入方式,同时也支持手动键盘输入分享内容,限制分享内容文字不能超过180个字符,分享内容输入完成后可以直接分享,分享SDK使用的 ...

  5. JavaScript 模块化及 SeaJs 源码分析

    网页的结构越来越复杂,简直可以看做一个简单APP,如果还像以前那样把所有的代码都放到一个文件里面会有一些问题: 全局变量互相影响 JavaScript文件变大,影响加载速度 结构混乱.很难维护 和后端 ...

  6. 客户端哈希加密（Javascript哈希加密，附源码）

    摘要 我们很难想象用户在什么样的网络环境使用我们开发的应用,如果用户所处的网络环境不是一个可信任的环境,那么用户的账户安全就可能有威胁,比如用户登陆时提交的账号密码被网络嗅探器窃取:客户端加密数据能有 ...

  7. 《分享》Koa2源码分析

    曾经在公司内部做的一起关于koa源码的分享,希望对你有帮助: koa2 源码分析整理 koa2(2.4.1版本)源码主要包含四个js,包括application.js, context.js, req ...

  8. Omega System Trading and Development Club内部分享策略Easylanguage源码

    更多精彩内容,欢迎关注公众号:数量技术宅.关于本期分享的任何问题,请加技术宅微信:sljsz01 关于 Omega System Trading and Development Club " ...

  9. 分享一个jdk源码链接

    请查看下面的链接:http://hg.openjdk.java.net/jdk7u/jdk7u/jdk/file/bcba89ce0a8c/src/share/classes/,进入页面后,点击列表中 ...

随机推荐

  1. Codevs 1669 运输装备

    时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 德国放松对英国的进攻后,把矛头指向了东北—— ...

  2. 纪念一下自己的第一篇cnblog

    2016-08-1016:33:22 // Netease.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iost ...

  3. 小米pad MI PAD 开发者选项、USB调试开启方式

    设置->关于平板->在MIUI版本一行连续点击7次. 之后就出现了开发者选项.可以开启USB调试等. 你能想到吗……??

  4. C指针赋值

    Node* p = A; Node* f = B; Node* t; t = p; t = f 本人试图让p指向B,但这样操作是不行的.如下图:只是改变了t的指向,p并没有变

  5. 全面解析SQL SERVER 的左右内连接

    SQL SERVER数据库的三种常用连接解析: 这里先给出一个官方的解释: left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右 ...

  6. html关于强制显示 隐藏浏览器的滚动条

    浏览器的滚动条在一些特殊的展示中,是不需要的,所以必须把它隐藏掉,文章主要介绍一些隐藏或者显示IE的水平或者垂直滚动条的实现代码,需要了解的朋友可以参考下: 相关css代码如下: //强制显示滚动条: ...

  7. Cookie与Session详解

    来源:<PHP核心技术与最佳实践> 列旭松 陈文 著 Cookie与Session详解读书笔记,从概念.操作.应用.注意事项以及区别等几方面详细阐述两者的基础知识,它们都是针对HTTP协议 ...

  8. 最初程序员的思维“修炼”之四——Android平台开发的“强制关闭”解决思路

    我和我的朋友参加一个比赛——物联网应用技能大赛,这个大赛所要求的技能有,硬件技术,Android平台开发技术,.NET平台开发技术,所以这是一个团队合作的比赛,基本上没有人能同时掌握这三种技术(在校生 ...

  9. php中session_start()相关问题分析与解决办法

    介绍下,在php中使用session时遇到的一些问题,与相关解决方法.1.错误提示Warning: Cannot send session cookie - headers already sentW ...

  10. 自动设置iframe大小的jQuery代码

    自动设置iframe的宽度,如何用jquery来实现呢? 代码: <iframe src="main_folder.aspx" class="global_main ...