缓慢隐藏与出现

效果：

鼠标移至分享上黄色区域自动向左隐藏。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        div{

            background-color: yellow;

            height: 200px;

            width: 150px;

            position: absolute;

            top:50px;

            left: -150px;

        }

        span{

            background-color: red;

            position: absolute;

            top:80px;

            left: 150px;

        }

    </style>

    <script type="text/javascript">

    window.onload = function(){

        var oDiv = document.getElementsByTagName('div')[0];

        oDiv.onmouseout = function(){

            startMove(-150);

        }

        oDiv.onmouseover = function(){

            startMove(0);

        }

    }

    var timer = null;

    function startMove(target){

        var oDiv = document.getElementsByTagName('div')[0];

        var speed = 10;

        if(oDiv.offsetLeft>target)

            speed = -10;

            //防止定时器被多次调用

        clearInterval(timer);

        timer = setInterval(function(){

            if(oDiv.offsetLeft != target){

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

            }

            else

                clearInterval(timer);

        }, 30);

    }

    </script>

</head>

<body>

   <div><span>分享</span></div>

</body>

</html>

使用绝对定位，通过获取offsetLeft(相对于浏览器左边框的距离)的值和left来确定黄色区域的位置

图像透明度渐变效果

当鼠标移入图像时颜色变亮，移除时颜色变暗

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        div{

            background-color: yellow;

            height: 200px;

            width: 150px;

            filter:alpha(opacity:30);

            opacity: 0.3;

        }

    </style>

    <script type="text/javascript">

    window.onload = function(){

        var oDiv = document.getElementsByTagName('div')[0];

        oDiv.onmouseout = function(){

            startMove(30);

        }

        oDiv.onmouseover = function(){

            startMove(100);

        }

    }

    var timer = null;

    var alpha = 30;

    function startMove(target){

        var oDiv = document.getElementsByTagName('div')[0];

        var speed = 10;

            //防止定时器被多次调用

        if(alpha > target)

            speed = -10;

        clearInterval(timer);

        timer = setInterval(function(){

            if(alpha != target){

                alpha += speed;

                oDiv.style.filter = "alpha(opacity:"+alpha+")";

                oDiv.style.opacity = alpha/100;

            }

            else

                clearInterval(timer);

        }, 30);

    }

    </script>

</head>

<body>

   <div></div>

</body>

</html>

js中的运动的更多相关文章

  1. 浅解析js中的对象

    浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...

  2. js中的各种宽高以及位置总结

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  3. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  4. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  5. 深入研究js中的位运算及用法

    什么是位运算? 位运算是在数字底层(即表示数字的 32 个数位)进行运算的.由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序 ...

  6. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  7. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  8. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  9. js中几种实用的跨域方法原理详解（转）

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

随机推荐

  1. Ubuntu16.04安装ROS-kinetic

    参考链接:http://www.voidcn.com/blog/wishchin/article/p-5972036.html 第一步: 软件源配置1. 增加下载源(增加ubuntu版的ros数据仓库 ...

  2. struts2 redirect 配置动态传递参数

    <action name="actionName" class="com.towerking.TestAction" method="execu ...

  3. Linux dsh

    一.简介 目前在企业网络中越来越多的出现Linux服务器,而如何方便高效的管理大量的Linux服务器是系统管理员非常关心的一个问题,而dsh正是一个通过命令行有效地管理大量Linux的工具.   二. ...

  4. [转]jquery-confirm

    本文转自:http://craftpip.github.io/jquery-confirm/ Practical Uses These features can practically be used ...

  5. cni 添加网络 流程分析

    cnitool: Add or remove network interfaces from a network namespace cnitool add <net> <netns ...

  6. Codeforces Round #370 (Div. 2)B. Memory and Trident

    地址:http://codeforces.com/problemset/problem/712/B 题目: B. Memory and Trident time limit per test 2 se ...

  7. eclipse菜单解释及中英对照

    在使用Eclipse作为开发工具的时候,建议使用英文版本的(直接百度从官网下就行,这里不详细描述,如果有问题,咱们私聊).虽然中文版本的对于和我一样对英文是小白的看起来特别爽,但是公司大多是英文版本的 ...

  8. Linux安装Redis

    环境:Centos 6.2 redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了memcached的不足,它支持存储的value ...

  9. 常用excel技巧

    1.excel 设置行列分色显示  =MOD(ROW(),2)=0 2.多表匹配数据 通过身份证在另外一个表查找这个人的基本信息 第一张表 第二张表: =VLOOKUP(F12,'2014总表'!D: ...

  10. UITableViewCell动态AutoLayout布局

    相关链接: 使用Autolayout实现UITableView的Cell动态布局和高度动态改变 IOS tableView cell动态高度 (autoLayout) AutoLayoutClub 使 ...