利用目标点判断速度speed正负值、利用目标点函数封装传参，

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>分享划过简单效果</title>

    <style>

        #share{width:100px;height:260px;background:#ccc;position:absolute;left:-100px;top:50%;margin-top:-130px; }

        #share span{width: 30px;height: 50px;background: orange;display: block;position: absolute;right: -30px;top: 100px;

            z-index: 0;border-left: 1px solid #ccc;}    </style>

</head>

<body>

<div id="share">

    分享

    <span></span>

</div>

<script>

    var oSpan = document.querySelector('#share span');

    var oShare = document.querySelector('#share');

    var timer =null;

    //利用目标点函数封装传参，

    function animate(dest){

        dest-oShare.offsetLeft<0?speed=-5:speed=5;

        clearInterval(timer);

        timer = setInterval(function(){

            if(Math.abs(dest-oShare.offsetLeft)<Math.abs(speed)){//显示

                oShare.style.left =dest+'px';

                clearInterval(timer);

                timer = null;

            }else {

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

            }

        },20)

    }

    oShare.onmouseover=function(){

        animate(0);

    }

   oShare.onmouseout=function(){

        animate(-100);

    }

</script>

</body>

</html>

练习：javascript分享划过简单效果的更多相关文章

  1. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  2. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  3. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  4. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  5. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  6. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  7. 用javascript来实现前端简单路由

    WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁.同样 ...

  8. DIV+javascript实现首尾相连循环滚动效果

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

  9. HTML 和 JavaScript 实现飘花的效果

    HTML 和 JavaScript 实现飘花的效果,也不算花,就是有悬浮物飘下来,和下雪似的. 也是不需要图片和其他的 js 脚本做辅助,其实已经全写在 HTML 文件中了. <html> ...

随机推荐

  1. Django框架【form组件】

    from django.shortcuts import render,redirect # Create your views here. from .models import * from dj ...

  2. Python开发【前端篇】CSS

    1.css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多 ...

  3. HBase 数据模型

    在HBase中,数据是存储在有行有列的表格中.这是与关系型数据库重复的术语,并不是有用的类比.相反,HBase可以被认为是一个多维度的映射. HBase数据模型术语 Table(表格) 一个HBase ...

  4. C# Json字符串保存信息

    1.我们在进行数据通信的时候,往往是需要传输一个字符串类型的参数,而这个字符串类型的参数又需要封装大量的数据信息. 这个时候,就需要使用Json来封装这些数据,最后将Json数据以字符串的格式输出 2 ...

  5. 妙谈js回调函数的理解！

    很有共鸣,之前也是一直对回调函数感觉不明不白的,自己也看了不少解释说明.后来我觉得造成很多人对回调理解困难的一个原因就是,我在开发中见到的大多数使用了回调函数的情况都是直接上来就 传一个回调函数进去 ...

  6. Day6 Numerical simulation of optical wave propagation之通过随机介质（如大气湍流）的传播（二）

    2.蒙特卡洛相位屏 大气折射率变化是一个随机的过程,通过大气的光程长度也同样是随机的.因此,湍流模型仅给出统计平均值,如折射率变量的结构函数和功率谱. 建立大气相位屏的问题就是产生随机过程独立表达式的 ...

  7. 控制结构(10): 指令序列（opcode）

    // 上一篇:管道(pipeline) // 下一篇:Continuation-passing_style(CPS) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编 ...

  8. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

  9. js中的枚举

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. js中基本包装类型的原型属性是不可枚举的 ...

  10. RPC框架原理简述：从实现一个简易RPCFramework说起(转)

    摘要: 本文阐述了RPC框架与远程调用的产生背景,介绍了RPC的基本概念和使用背景,之后手动实现了简易的RPC框架并佐以实例进行演示,以便让各位看官对RPC有一个感性.清晰和完整的认识,最后讨论了RP ...