缓慢隐藏与出现

效果：

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

<!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. PHP实战-文章发布系统学习记录

    跟随大师的步伐,一步一步向前行进,PHP学习之路中的历程. 如果图片不能正常查看请访问云笔记链接 http://note.youdao.com/share/?id=3c25d8c03ef946d9c6 ...

  2. 关于统计变换（CT/MCT/RMCT）算法的学习和实现

    原文地址http://blog.sina.com.cn/s/blog_684c8d630100turx.html 刚开会每周的例会,最讨厌开会了,不过为了能顺利毕业,只能忍了.闲话不多说了,下面把上周 ...

  3. 解决ubuntu sudo not found command的问题

    将/etc/sudoers 中Defaults env_reset改成Defaults !env_reset取消掉对PATH变量的重置, 然后在/etc/bash.bashrc中最后添加alias s ...

  4. NOIP2008 T3 传纸条 解题报告——S.B.S.

    题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是 ...

  5. 迭代加深搜索 POJ 1129 Channel Allocation

    POJ 1129 Channel Allocation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14191   Acc ...

  6. Codeforces Round #258 D Count Good Substrings --计数

    题意:由a和b构成的字符串,如果压缩后变成回文串就是Good字符串.问一个字符串有几个长度为偶数和奇数的Good字串. 分析:可知,因为只有a,b两个字母,所以压缩后肯定为..ababab..这种形式 ...

  7. Python 栅栏凯撒

    def fence_Crypto(msg,priority="row"): ''' usage: fence_Crypto(msg[, priority])->msg to ...

  8. 15SpringMvc_在业务控制方法中写入模型变量收集参数，且使用@InitBind来解决字符串转日期类型

    之前第12篇文章中提到过在业务控制方法中写入普通变量收集参数的方式,也提到了这种凡方式的弊端(参数很多怎么办),所以这篇文章讲的是在业务控制方法中写入模型变量来收集参数.本文的案例实现的功能是,在注册 ...

  9. IIS mime类型

    参考网站:http://www.iwms.net/n1381c2.aspx 以下例子为iis6.0 下载安卓.苹果安装包时候,需要添加mime类型才可以下载,否则访问不到 安卓 .apk  appli ...

  10. 转载：有关SQL server connection KeepAlive 的FAQ

    转:http://blogs.msdn.com/b/apgcdsd/archive/2011/05/03/sql-server-connection-keepalive-faq.aspx 1.什么是S ...