利用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()。

巴特西

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

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

图片闪烁效果

自动切换图像

最新文章

热门文章