js实现图片的淡入淡出

思想:

其实是运动的一种,就是当鼠标移入div中时,将div的透明度变大,

当鼠标移动出来的时候透明度变回原来。

你可以尝试写一下,不会再看看代码

<style>
    #div1{
        width:200px;height:200px;
        background:red; filter:alpha(opacity:30);opacity:0.3;
        margin:0 auto;
    }
</style>

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

记住透明度有兼容性问题,

js代码如下 

<script>
window.onload=function()
{
    var div1=document.getElementById(‘div1‘);
    div1.onmouseover=function()
    {
        startMove(100);
    };
    div1.onmouseout=function()
    {
        startMove(30);
    };
};
    var alpha=30;
    var timer=null;
    function startMove(it)
    {

        var div1=document.getElementById(‘div1‘);
        clearInterval(timer);
        timer=setInterval(function()
            {
                var speed=0;    //定义运动的速度
                if (alpha<it)
                {
                    speed=5;
                }
                else
                {
                    speed=-5;
                }
                if (alpha==it)  //若传入的的透明度等于本来的透明度就清除定时器
                {
                    clearInterval(timer);
                }
                else
                {
                    alpha=alpha+speed;
                    div1.style.filter=‘alpha(opacity:"+alpha+")‘;
                    div1.style.opacity=alpha/100;
                }
            },30)

    }
</script>

  

js代码比较简单,不详细解释了,

时间: 2024-10-29 19:09:45

js实现图片的淡入淡出的相关文章

图片的淡入淡出效果实现

还算简单,先发个图看看效果. 主文件: [java] view plaincopy import android.app.Activity; import android.os.Bundle; import android.view.animation.AnimationUtils; import android.widget.ViewFlipper; public class TextAnimationActivity extends Activity { /** Called when th

图片的淡入淡出

<html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jQuery控制图片淡入淡出效果</title> <script src="jquery-1.7.2.min.js" type="text/javascript" charset=&quo

用js或css实现淡入淡出

淡入淡出?你问我有什么用? 提升首页13格的东西,你居然不知道!! 好啦,不废话了,正文. 1 js 主要元素:fadeIn()   fadeOut() show hide 2 css 主要元素: opacity,animation,keyframes #photo1 { width: 200px; height: 100px } #photo2 { height: 100px } 至于浏览器标签,自己添加即可

js实现一套代码来控制所有的运动,图片的淡入淡出,winth,height的变宽

介绍了那么多运动,這次一套代码实现所有运动 1.html代码和css代码,只是定义一个div 1 <style> 2 div{ 3 width:200px; 4 height:200px; 5 margin:20px; 6 float:left; 7 background:yellow; 8 border:10px solid black; 9 filter:alpha(opacity:30); 10 opacity:0.3; 11 } 12 </style> 13 <bod

gallery左右滑动时图片淡入淡出

前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透明度.当按下图片时,先记下imageView的位置,图片滑动时,位置发生变化,就可以算出移动的距离,从而可以算出alpha的值.当图片向左滑动时,设置imageView的Alpha即imageView.setAlpha(255-alpha),设置下一个nextView的Alpha即nextView.

js 淡入淡出的图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js实现多个图片淡入淡出,框架

单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; background:red; margin:0 auto; margin-bottom:5px; filter:alpha(opacity:30); opacity:0.3; } </style> <body> <div></div> <div></di

javascript 图片淡入淡出效果 实例源代码

? 1 代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.<br>后面还有对js代码的详细说明,希望大家好好消化,好好理解.<br><br>html源代码: 1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <l

h5+css3最简单的图片飞入以及淡入淡出效果

正如很多小伙伴们所知道的,楼主最近在开发移动端的响应式布局的自适应页面了,现在分享一个刚写完的小demo html: <!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-sca