缓慢隐藏与出现

效果：

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

<!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. gdb调试常用命令

    gdb 调试常用命令 gcc -g mian.c -o main.out -o (定制生成的可执行文件的名称,缺省时为a.out) -g 使gdb可调试,在编译的时候,产生调试信息 gdb main. ...

  2. CentOS6.5上golang环境配置

    CentOS6.5上golang环境配置 一.下载和解压go环境包 >>cd /usr/local/src/ >>wget -c http://golangtc.com/sta ...

  3. BI Project Managerment

    Design doc is the meta data of the code. The project management plan is crucial to your project sinc ...

  4. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  5. 【C#】3.算法温故而知新 - 快速排序

    快速排序相比冒泡排序,每次交换是跳跃式的.每次排序的时候设置一个基准点,将小于等于基准点的数全部放到基准点的左边,将大于等于基准点的数放到基准点的右边.这样每次交换的时候就不会像冒泡排序一样只能在相邻 ...

  6. Laxcus大数据管理系统2.0（5）- 第三章 数据存取

    第三章 数据存取 当前的很多大数据处理工作,一次计算产生几十个GB.或者几十个TB的数据已是正常现象,驱动数百.数千.甚至上万个计算机节点并行运行也已经不足为奇.但是在数据处理的后面,对于这种在网络间 ...

  7. 通过JDBC进行简单的增删改查（二）

    本章笔记更易理解和学习,也是我第一次初学的笔记. package javastudy; import java.sql.Connection; import java.sql.DriverManage ...

  8. HTTPWatch使用

    注意:现在httpwatch也可以集成到火狐浏览器中. 一.介绍 HttpWatch是强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理 ...

  9. PNG文件

    png格式主要由六大块组成:文件头.IHDR块.PLTE块.tRNS块.IDAT块.文件尾文件头一般是 8950 4E47 0D0A 1A0A而本题提示中的IHDR块是png中用来描述图片的基本信息, ...

  10. Java虚拟机工作原理详解 （一）

    一.类加载器 首先来看一下java程序的执行过程. 从这个框图很容易大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘当中.然后你在命令行中输入 javac YourClassNam ...