利用目标点判断速度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. org.springframework.web.context.support.XmlWebApplicationContext.refresh Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.BeanCreatio

    错误异常: 11-Apr-2019 18:07:14.006 警告 [RMI TCP Connection(5)-127.0.0.1] org.springframework.web.context. ...

  2. 高速排序，归并排序，堆排序python实现

    高速排序的时间复杂度最好情况下为O(n*logn),最坏情况下为O(n^2),平均情况下为O(n*logn),是不稳定的排序 归并排序的时间复杂度最好情况下为O(n*logn),最坏情况下为O(n*l ...

  3. Error response from daemon: conflict: unable to remove repository reference　解决方案

    由于前一章演示用的镜像没什么用准备删除 docker image rm hello-world:latest Error response from daemon: conflict: unable ...

  4. 文本分类实战（四）—— Bi-LSTM模型

    1 大纲概述 文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类.总共有以下系列: word2vec预训练词向量 te ...

  5. Java Scanner用法详解

    一.Scanner类简介 Java 5添加了java.util.Scanner类,这是一个用于扫描输入文本的新的实用程序.它是以前的StringTokenizer和Matcher类之间的某种结合.由于 ...

  6. 在项目中迁移MS SQLServer到Mysql数据库，实现MySQL数据库的快速整合

    在开发项目的时候,往往碰到的不同的需求情况,兼容不同类型的数据库是我们项目以不变应万变的举措之一,在底层能够兼容多种数据库会使得我们开发不同类型的项目得心应手,如果配合快速的框架支持,那更是锦上添花的 ...

  7. easyui-tab标签

    一． 加载方式 //class 加载方式<div id="box" class="easyui-tabs" style="width:500px ...

  8. Django之 Form和ModelForm组件

    01-Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用 ...

  9. 开发工具IntelliJ IDEA的安装步骤及首次启动和创建项目

    开发工具IDEA概述 DEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公 ...

  10. centos7之sed和awk常用

    sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令 ...