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

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. jQueryUI 之控件们

    总结:总的来说,这些控件可以在官网找到列子, 部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工 <!DOCTYPE html> <html> < ...

  2. Java Web项目 配置 ueditor心得

    近期的JAVA项目,由于客户要求需要引入富文本编辑器. 参考了两款插件,一款是ckeditor,一款是ueditor. ckeditor在上传文件的时候必须配合ckfinder使用,而ckfinder ...

  3. HTML编码规则、CSS属性声明顺序--简介

    From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...

  4. LeetCode 笔记系列 20 Interleaving String [动态规划的抽象]

    题目: Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given: ...

  5. Python 基礎 - if else流程判斷

    hmm~前面講了那麼多,終於可以稍稍的正式進入另一個階段,沒錯,要開始寫判斷式了 這次先從最簡單的判斷式開始,if else 開始- Go 首先,之前有寫有一個簡單的互動式 用戶輸入 的代碼,忘記了嗎 ...

  6. mongodb,redis,hbase 三者都是nosql数据库，他们的最大区别和不同定位是什么？

      不严谨地讲,Redis定位在"快",HBase定位于"大",mongodb定位在"灵活". NoSQL的优点正好就是SQL的软肋,而其弱 ...

  7. Java-->利用URL类下载图片

    --> 通过get 请求访问图片地址,将通过服务器响应的数据(即图片数据)存到本地文件中... --> HttpURLConnectionUtil 工具类 package com.drag ...

  8. c++标准模板库algorithm头文件中accumulate算法的代码

    template <typename T>T algorithm(T* start, T* end, T total)//把[start, end)标记范围内所有元素累加到total中{  ...

  9. linux项目-之系统安装部署-cobbler

    http://cobbler.github.io/manuals/2.6.0/1/1_-_Release_Notes.html http://www.osyunwei.com/archives/760 ...

  10. Node调试之道-----JSHint

    Node调试之道-----JSHint Node的优势我就不再乱吹捧了,它让javascript统一web的前后台成为了可能.但是对于新手来说,server端的JS代码可能不像client端的代码那么 ...