缓慢隐藏与出现

效果：

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

<!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. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. python ljust,rjust,center,zfill对齐使用方法

    字符串在输出时的对齐:S.ljust(width,[fillchar]) #输出width个字符,S左对齐,不足部分用fillchar填充,默认的为空格. S.rjust(width,[fillcha ...

  3. 获取radio和select的值，获取select的值

    获取radio的值 var val=$('input:radio[name="_objId"]:checked').val(); jQuery中获得选中select值 第一种方法$ ...

  4. 边工作边刷题：70天一遍leetcode: day 70

    Design Phone Directory 要点:坑爹的一题,扩展的话类似LRU,但是本题的accept解直接一个set搞定 https://repl.it/Cu0j # Design a Phon ...

  5. 边工作边刷题：70天一遍leetcode: day 101

    dp/recursion的方式和是不是game无关,和game本身的规则有关:flip game不累加值,只需要一个boolean就可以.coin in a line II是从一个方向上选取,所以1d ...

  6. python-可变迭代对象在for循环中的风险Risk in FOR loop while looping mutable iterable object

    >>> a = [1,2,3,4,5,6] >>> for item in a: ... a.remove(item) ... >>> a [2, ...

  7. 二分匹配之最大权值匹配算法---KM模板

    百科:http://baike.baidu.com/link?url=vbM3H4XmfrsWfP-epdlR2sVKSNzOq4hXnWDqm5uo8fd7VWsF2SmhDV35XyVUDvVjv ...

  8. bootstrap学习总结-css组件(三)

    今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs. ...

  9. Hill密码

    希尔密码(Hill Password)是运用基本矩阵论原理的替换密码,由Lester S. Hill在1929年发明.每个字母当作26进制数字:A=, B=, C=... 一串字母当成n维向量,跟一个 ...

  10. （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

    myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...