就是当鼠标移到上面的时候，他会出现，鼠标移出就消失。

nmouseover和nmouseout就能实现

<style>

*{padding:0;margin:0;}

    #s1{width:200px ;

            background:red;

             height:200px;

            position:absolute;

            top:50px;

            left:-200px;

            cursor:pointer;}

    #s1 span

{display:block;height:80px;width:20px;left:200px;background:blue;position:absolute;left:200px;top:50px;}

}

</style>

<body>

<div id="s1">

    <span>分享到</span>

</div>

</body>

js代码如下

<script>

    window.onload=function()

    {

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

       var span1=s1.getElementsByTagName("span")[0];   

       div1.onmouseover=function()

       {

        startMove(0);

       }

       div1.onmouseout=function()

       {

        startMove(-200);

       }

   };

    var timer=null;

    function startMove(ti)

    {

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

         clearInterval(timer);

         timer=setInterval(function()

            {

                var speed=null;

                if (div1.offsetLeft>ti)  //先判断他的速度是正的还是负的，如果offsetLeft大于0，速度为负

                {

                    speed=-10;

                }

                else   //否则速度为正，显示div要出来

                {

                    speed=10;

                }

                if (div1.offsetLeft==ti)  //相等，停止运动

                {

                    clearInterval(timer);

                }

                else  //不相等，做匀速运动

                {

                    div1.style.left=div1.offsetLeft+speed+'px';

                }

            },30);

    }

</script>

其实特别简单，只要收敲敲就会，

js实现右侧的分享效果的更多相关文章

  1. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  2. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...

  3. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  4. 带你使用JS-SDK自定义微信分享效果

    前言 想必各位在写wap端时都遇到过这样的场景吧 ----自定义分享标题.图片.描述 接下来小编给大家讲解下分享相关操作 预期效果 原始的分享效果: 使用微信JS-SDK的分享效果: 可以看出缩略图, ...

  5. weixinShare.js / 极简微信分享插件

    weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...

  6. 在vue中使用weixin-js-sdk自定义微信分享效果

    在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...

  7. 使用JS-SDK自定义微信分享效果

    前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案.值得注意的是一开始搜索到的解决方案全是调用微 ...

  8. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 二分查找C++

    #include <iostream> using namespace std; //二分查找:每次都从中间位置寻找,如果找到了就返回,如果没找到, //则分两种情况: //(1)中间元素 ...

  2. SAP web 开发 (第二篇 bsp 开发 mvc模式 Part1 )

    Model-View-Controller 简称MVC. 简单的说就是把数据处理,显示,页面事件及处理过程分离开来,企业应用多数都采用这种方式,多层架构的优缺点不再多言,google一下啥都知道. 在 ...

  3. Ubuntu远程连接windows

    一般情况下都是使用windows系统,通过mstsc远程连接linux系统,但对于一些linuxer来说,有时候需要远程连接一下windows,最后采用的是rdesktop,一个非常好用的工具 sud ...

  4. WPF学习笔记——认识XAML

    Extensible Application Markup Language,XAML是一种声明性标记语言. 一.XAML语法概述 1,与XML类似,用尖括号标记元素 <StackPanel&g ...

  5. 苹果IPhone手机由于更新了IOS7 Beta测试版导致“激活出错”后，如何还原电话本和照片方法

    苹果这狗日的,手段果然狠,因为用户提前升级了测试版又没有更新正式版,就突然把手机变砖头,既不让升级正式版,也不让备份手机中的信息,确实有必要这样吗? 我的手机是IPone4s,在看了6月Apple W ...

  6. 表单验证 jQuery Validate

    http://www.runoob.com/jquery/jquery-plugin-validate.html http://www.cnblogs.com/linjiqin/p/3431835.h ...

  7. poj 1185 （状压dp）

    Problem 炮兵阵地 题目大意 给你一张n*m的地图,一些地区是空地,一些地区是障碍. 可以在空地上布置炮兵部队,炮兵部队的攻击范围为上下左右各两格. 询问最多可以布置多少个炮兵部队,且互不伤害. ...

  8. html table动态合并单元格 js方法

    <script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...

  9. ubunut 14.04 将Caps Lock设置为Control

    入手了emacs,一直折腾想把caps Lock设置为control键. 网上看到一个用gnome里找到系统-首选项之类可以直接设置的.在14.04版的ub中是找不到的(新版设置太坑,只有那么几个选项 ...

  10. CentOS进程管理

    Linux系统中的基本运行单位是进程,通过对系统系统中的进程的管理能够对系统的实时运行状态进行了解和调度.Linux中提供了用于查看.调整和停止进程的命令.本文仍然以RHEL6说明Linux系统的进程 ...