缓慢隐藏与出现

效果：

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

<!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 特效实现(3)—— 鼠标滑过显示二级菜单效果

    1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 7 ...

  2. Google 以图搜图 - 相似图片搜索原理 - Java实现

    前阵子在阮一峰的博客上看到了这篇<相似图片搜索原理>博客,就有一种冲动要将这些原理实现出来了. Google "相似图片搜索":你可以用一张图片,搜索互联网上所有与它相 ...

  3. html,js简单保存textarea换行格式

    有时候我们在做表单提交时,往往需要把html标签保存起来,但是textarea不保存换行的信息,所以我们需要用js来实现保存textarea的换行等HTM标签.真正让HTML文本框里的换换等格式保留下 ...

  4. 【实践】jdbc批量插入数据

    参考文献:http://my.oschina.net/u/1452675/blog/203670 http://superjavason.iteye.com/blog/255423 /*测试批量写入数 ...

  5. 合工大OJ 1330 种树

    Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2, ...

  6. iscroll.js的使用

    入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...

  7. Android开发配置，消除SDK更新时的“https://dl-ssl.google.com refused”异常

    消除SDK更新时的“https://dl-ssl.google.com refused”错误 消除SDK更新时,有可能会出现这样的错误:Download interrupted: hostname i ...

  8. GitHub入门之一：使用github下载项目

    git作为目前比较流行的版本控制系统,被各个互联网公司广泛使用着.目前国外的网站有GitHub,国内的有CSDN和OSCHINA的git. 使用git可以很方便地进行多人协作和版本控制.作为一个入门小 ...

  9. Netty指定分隔的字符

    package org.zln.netty.five.part02; import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled; ...

  10. 【C#】ContextMenuStrip 右键菜单颜色设置

    有些时候自己想要修改ContexMenuStrip右键菜单的一些背景色之类的,该如何实现呢? 首先: ContextMenuStrip _context = new ContextMenuStrip( ...