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

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. springmvc跳转的几种方式

    1:spring mvc 是围绕着DispatcherServlet展开的 ,其底层还是servlet 跳转方式: ①request.getRequestDispatcher("../ind ...

  2. SVG 2D入门12 - SVG DOM

    使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为 ...

  3. （spring-第19回【AOP基础篇】）基于AspectJ和Schema的AOP

    基于AspectJ就是基于@AspectJ注解,基于Schema就是全部依靠配置文件.那么首先要了解Java注解. Java注解初探 在JDK5.0中,我们可以自定义标签,并通过Java语言的反射机制 ...

  4. 更新包地址安装新版node.js

    # apt-get update # apt-get install -y python-software-properties software-properties-common # add-ap ...

  5. 【LeetCode】Binary Tree Preorder Traversal

    Binary Tree Preorder Traversal Given a binary tree, return the preorder traversal of its nodes' valu ...

  6. SQL 函数集锦

    ..STUFF()用另一子串替换字符串指定位置.长度的子串.STUFF (<character_expression1>, <start_ position>, <len ...

  7. Python笔记 001

    #python版本:3.5.2 #for循环 for letter in ("xuyingke"): #默认循环 print ("当前字母:",letter) ...

  8. python 杨辉三角

    前提:端点的数为1. 每个数等于它上方两数之和. 每行数字左右对称,由1开始逐渐变大. 第n行的数字有n项. 第n行数字和为2n-1. 第n行的m个数可表示为 C(n-1,m-1),即为从n-1个不同 ...

  9. CF 628A --- Tennis Tournament --- 水题

    CF 628A 题目大意:给定n,b,p,其中n为进行比赛的人数,b为每场进行比赛的每一位运动员需要的水的数量, p为整个赛程提供给每位运动员的毛巾数量, 每次在剩余的n人数中,挑选2^k=m(m & ...

  10. 传递引用类型参数的两种方式（转自 MSDN）

    引用类型的变量不直接包含其数据:它包含的是对其数据的引用.当通过值传递引用类型的参数时,有可能更改引用所指向的数据,如某类成员的值(更改属性的值),但是无法更改引用本身的值:也就是说,不能使用相同的引 ...