JS網頁特效詳解

一、js網頁特效文件

JavaScript是一種動態、弱類型、面向對象的編程語言，用於網頁變成交互效果。

主要有兩種方式添加JS代碼到網頁中。一種是作為文件，例如：

<script src="xxx.js"></script>

這種方式需要在js文件中寫代碼，再在html文件中引入js文件。

另一種方式是作為內嵌，例如：

<script>
...代碼...
</script>

這種方式直接在HTML文件中寫JS代碼。

二、js網頁特效實例大全

JS網頁特效種類繁多，下面介紹一些經典的網頁特效的實現方式。

1. 滾動條特效

滾動條特效可以通過以下代碼實現：

window.onscroll=function(){
    var oDiv=document.getElementById('active');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
}

當滑鼠滾動時，會調用該函數，使得滾動條特效得以實現。

2. 圖片特效

圖片特效可以通過以下代碼實現：

var img=document.getElementById('image');
img.onmouseover=function(){
    img.src='./image/hover.png';
}
img.onmouseout=function(){
    img.src='./image/default.png';
}

當滑鼠移到圖片上時，會將圖片改變為hover.png，滑鼠移開時，會將圖片改為default.png。

3. 輪播圖特效

輪播圖特效可以通過以下代碼實現：

var index=0;
var timer=null;
var imgArr=['img1.jpg','img2.jpg','img3.jpg','img4.jpg'];
function changePic(){
    var img=document.getElementById('pic');
    img.src="./images/"+imgArr[index];
    index++;
    if(index==imgArr.length){
        index=0;
    }
    timer=setTimeout(changePic,2000);
}
changePic();

在HTML文件中添加一個id為「pic」的img標籤，JS代碼會輪流更改該img標籤的src值實現圖片輪播。

三、js網頁特效代碼

在實現JS網頁特效時，通常需要編寫一些核心代碼，這些代碼可以作為特效函數封裝。

例如，以下代碼實現了一個簡單的圖片縮放的特效：

function changeSize(elem,scale,time){
    var scale=scale||2;
    var time=time||1000;
    elem.onmouseover=function(){
        this.style.transition='all '+time+'ms';
        this.style.transform='scale('+scale+')';
    };
    elem.onmouseout=function(){
        this.style.transition='all '+time+'ms';
        this.style.transform='scale(1)';
    };
}

該函數將一個元素以scale倍數進行縮放，縮放時間為time毫秒。

四、js網頁特效實例

以下是一個JS網頁特效實例，通過點擊按鈕改變按鈕顏色實現：

<html>
<head>
    <meta charset="utf-8">
    <title>JS網頁特效實例</title>
</head>
<body>
    <button id="button">點擊變色</button>
    <script>
        var btn=document.getElementById('button');
        btn.onclick=function(){
            var colorArr=['red','blue','green','orange'];
            var index=Math.floor(Math.random()*colorArr.length);
            this.style.background=colorArr[index];
        }
    </script>
</body>
</html>

此時，當點擊button按鈕時，會隨機改變按鈕的顏色。

原創文章，作者：EISV，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/146918.html