2.淡入淡出的图片

用变量存储透明度

<title>无标题文档</title>

<style>

#div1{width:293px; height:220px; background:url('images/05.jpg');filter:alpha(opacity:30);opacity:0.3;}

</style>

<script>

window.onload=function ()

{

    var oDiv=document.getElementById('div1');

    oDiv.onmouseover=function ()

    {

        startMove(100);

    }

    oDiv.onmouseout=function ()

    {

        startMove(30);

    }

}

var alpha=30;

var timer=null;

function startMove(iTarget)

{

    var oDiv=document.getElementById('div1');

    clearInterval(timer);

    timer=setInterval(function (){

                        var speed=0;

                        if(alpha<iTarget)

                        {

                            speed=10;

                        }

                        else

                        {

                            speed=-10;

                        }

                        if(alpha==iTarget)

                        {

                            clearInterval(timer);

                        }

                        else

                        {

                            alpha+=speed;

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

                            oDiv.style.opacity=alpha/100;

                        }

                    },30);

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

DOM操作应用知识补充

表单事件

onsubmit    提交时发生

onreset      重置时发生

表单内容验证

阻止用户输入非法字符     阻止事件

输入时、失去焦点时验证     onkeyup 、onblur

提交时检查     onsubmit

*后台数据检查

JS-运动基础（一）续的更多相关文章

  1. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  2. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  3. JS运动基础(一)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. js运动基础2（运动的封装）

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  5. JS运动基础(四) 碰撞运动

    碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...

  6. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

  7. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  8. JS运动基础

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

  9. Javascript 运动基础 01

    JS运动基础  运动基础   让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快   匀速运动 速度不变 <s ...

  10. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

随机推荐

  1. .Net Core Session验证码

    1.验证码帮助类 namespace IdeaCore.Services.Common { public class ValidateCodeService : IValidateCodeServic ...

  2. 在windows上部署使用Redis（摘录）

    下载Redis 在Redis的官网下载页上有各种各样的版本,我这次是在windows上部署的,要去GitHub上下载.目前的是2.8.12版的,直接解压,在\bin\release 目录下有个压缩包, ...

  3. TCP协议中的三次握手和四次挥手(图解)【转】

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. [更新于2017.01.04 ]该部分内容配图有误,请大家见谅,正确的配图如下,错误配图也不删 ...

  4. 通过实例来理解ajax

    点击一个按钮,然后将信息显示到指定的div内. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

  5. Gitlab 安装配置

    Gitlab 很好的替代Github,可以安装到公司的内网服务器 进行管理 ,可以分布式的管理,集中的管理 下面介绍安装这个软件的步骤 其实安装很简单的  按照官网可以安装 https://about ...

  6. JavaScript “类”定义 继承 闭包 封装

    一.Javascript “类”: 类:在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript是一 ...

  7. mybatis----增删改查

    转: select使用 : xml代码: <!-- 查询学生,根据id --> <select id="getStudent" parameterType=&qu ...

  8. 关于个人网站选择虚拟主机还是VPS服务器的讨论

    还记得当初才开始学习建站的时候,选择的第一款虚拟主机是全HTML的主机,那时候的虚拟主机还分为HTML或者是ASP,PHP的都很少,在国内接触的学习较多还是以ASP为主,PHP是最近几年才开始流行.如 ...

  9. C# 除法的细节

    最近在做项目时有个地方用到了概率,要计算概率自然会用到除法.我这边概率的算法是这样的,从0到10000获取个随机数,随机值除以10000就是概率了,但是一时大意没注意细节,结果直接除了,如下: 查询结 ...

  10. 一个小知识点强引用__strong 弱引用__weak

    __weak的类型的指针是不会影响对象的释放 当系统释放后 会自动的指向nil: __Strong 至少有一个__Strong类型的指针是 对象不会释放