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

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. java string.format()

    String text=String.format("$%1$s 门市价:￥%2$s",18.6,22);$18.6 门市价:￥22

  2. java.lang.ClassNotFoundException: com.*.listener.ConfigInfoReader

    包的问题,删除掉了buildPath的包,再加上一个需要用的,问题搞定...不知道是为什么

  3. Java类与对象——几个课堂例子的总结及作业

    作业:使用类的静态字段和构造函数,我们可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”. 源代码: import java.util.Scanner; ...

  4. 安装生物信息学软件-Biopython

    其实好多东西装过好多次,然而每次都要翻文档,经常掉进前面掉进过的坑...所以这里重新写一份指南,以防下次再装又忘了(魂淡我并不想再装了啊不要立flag) 1. 安装biopython 1.1 因为bi ...

  5. 【three.js详解之二】渲染器篇

    [three.js详解之二]渲染器篇   本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRend ...

  6. .Net MVC框架 + WCF 搭建 集群开发

    http://www.cnblogs.com/zhijianliutang/archive/2012/01/28/2258844.html

  7. 监听调试web service的好工具TCPMon

    监听调试web service的好工具TCPMonhttp://ws.apache.org/commons/tcpmon/download.cgi TCPMon Tutorial Content In ...

  8. 关于char类型的连续输入

    这个忘了好久了 先回想吧 一 单字符 ①  char m; scanf("%d",&m); ② char m; m=getchar(); putchar(m); 二 字符数 ...

  9. 转：配置nodemanager启动weblogic服务器

    下面仅供参考,里面表格还有文件目录我是写的linux,刚刚看到原作者是windows, 后面我会把自己配置nodemanager的经过记录上来,我搞得是linux. (一)通过nodemanager本 ...

  10. mysql数据库 myisam数据存储引擎 表由于索引和数据导致的表损坏 的修复 和检查

    一.mysqlcheck 进行表的检查和修复 1.检查mysqlisam存储引擎表的状态 #mysqlcheck -uuser -ppassword database  table  -c  #检查单 ...