利用Javascript制作网页特效（图像特效）

图像是文本的解释和说明，在网页中的适当位置放置一些图像，不仅可以使文本更加容易阅读，而且可以使网页更加具有吸引力。

---

当鼠标指针经过图像时图像振动效果

①：在head标签内输入以下代码：

    <style>
        .zhendimage{
            position: relative;
        }
    </style>
    <script>
        var rector= 3,stopit= 0,a=1;
        function init(which){
            stopit=0;
            zhend=which;
            zhend.style.left=0;
            zhend.style.top=0;
        }
        function rattleimage(){
            if((!document.all&&!document.getElementById)||stop==1)
            return
            if(a==1){
                zhend.style.top=parseInt(zhend.style.top)+rector;
            }
            else if(a==2){
                zhend.style.left=parseInt(zhend.style.left)+rector;
            }
            else if(a==3){
                zhend.style.top=parseInt(zhend.style.top)-rector;
            }
            else {
                zhend.style.left=parseInt(zhend.style.left)-rector;
            }
            if(a<4)
            a++
            else
            a=1;
            setTimeout("rattleimage()",50);
        }
        function stoprattle(which){
            stopit=1;
            which.style.left=0;
            which.style.top=0;
        }
    </script>

②：在震动图像的标记内输入以下代码：

<img src="logo.png" class="zhendimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)"/>

---

图片闪烁效果

制作图片闪烁效果主要是利用style.visibility属性来表示元素的可见性。

①：在head标签内输入以下代码：

    <script>
        function blink(){
            //定义图片的显示和隐藏属性
            tp.style.visibility=(tp.style.visibility=="hidden")?"visible":"hidden";
            //每0.5s刷新一次
            setTimeout("blink()",500);
        }
    </script>

②：将光标放在body标记内，输入代码onLoad=”blink()”。

提示：代码onLoad=blink()的作用是当打开网页文档时加载闪烁函数blink()。

③：将图片放置在div id=”tp”标签内。

---

自动切换图像

利用数组可以实现自动切换图像效果。

①：在head标签内输入以下代码：

 <script>
        var img = new Array(3);  //创建数组
        var nums = 0;
        if(document.images){
            for(i=1;i<=3;i++){
                img[i] = new Image();  //创建对象实例
                img[i].src="data:images/00"+i+".jpg";   //设置所有图片的路径以及名称
            }
        }
        function fort() //定义图片切换函数
        {
            nums++;
            document.images[0].src=img[nums].src;
            if(nums==3)
            num3=0;
        }
        function slide()  //每隔1秒连续不断地调用fort函数
        {
            setInterval("fort()",1000);
        }
    </script>

②：在body标记内，输入代码onLoad=slide()。