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

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. HiveQL(HiveSQL)跟普通SQL最大区别一直使用PIG，而今也需要兼顾HIVE

    HiveQL(Hive SQL)跟普通SQL最大区别 一直使用PIG,而今也需要兼顾HIVE.网上搜了点资料,感觉挺有用,这里翻译过来.翻译估计不太准确,待自己熟悉HIVE后再慢慢总结. * No t ...

  2. fck编辑器漏洞想到的--目录的执行权限

    结合近来我遇到的问题,转一篇关于目录的执行权限问题.来解决fck编辑器的漏洞.漏洞就是给人家上传了文件,而且还遍历目录或者直接执行文件,,非常大大的危险. 解决方法如下. 1,首先要删除fckedit ...

  3. goldengate 12.2中通过restful查看OGG状态

    安装ogg 12.2之后 GGSCI>create datestore 然后重启mgr 和其它进程, 通过浏览器http://ogg-server-ip:mgr-port/groups 可以看到 ...

  4. goldengate 12c 12.2 新特性(updated)

    GoldenGate 12.2已经提供下载,增加了不少新特性 1. 异构配置加强不在需要sourceDefs和AssumeTargetDefs文件,在队列文件中已经包含metadata信息,比如tab ...

  5. Java中的泛型

    1:泛型(掌握) (1)泛型概述 是一种把明确类型的工作推迟到创建对象或者调用方法的时候才去明确的特殊的类型. (2)格式: <数据类型> 注意:该数据类型只能是引用类型. (3)好处: ...

  6. Windows Squid 安装配置

    squid 可以做反向代理将系统中相对静态的页面进行缓存和负责均衡,提高网站访问速度,增强网站可用性.安全性.用户访问Squid 反向代理服务器的 IP 地址,这样客户端的 URL 请求将被发送到反向 ...

  7. OpenSSL - RSA非对称加密实现

    非对称加密:即两端使用一对不同的密钥进行加密. 在非对称加密中,需要两对密钥,公钥和私钥. 公钥个私钥属于对立关系,一把加密后,只有另一把才可以进行解密. 公钥数据加密 数字证书内包含了公钥,在进行会 ...

  8. OpenSSL - 文件和字符MD5加密实现

    OpenSSL安装: 1.github下载最新的OpenSSL:https://github.com/openssl/openssl 2.在linux解压压缩包 3.安装OpenSSL ./confi ...

  9. linux命令基础学习

    谨慎使用 rm -rf /* 命令 谨慎在SSH执行“rm -rf /*”,若不了解这个命令,可能导致整个Linux系统文件全部被删除. 这个删除命令只有 “root” 权限的帐号才可以执行,其它未取 ...

  10. 解决ListView和ScrollView同时使用时滑动的冲突问题

    ScrollView外面包裹了一个ListView,解决其滑动冲突问题: 只需自定义ListView,命名MyListView: public class MyListView extends Lis ...