網(wǎng)頁(yè)響應(yīng)鼠標(biāo)滾動(dòng)特效代碼html前端源碼

家好，今天給大家介紹一款，網(wǎng)頁(yè)響應(yīng)鼠標(biāo)滾動(dòng)特效代碼html前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

每滾動(dòng)向下一次鼠標(biāo)，文字和圖片都會(huì)發(fā)生變化，類似一些數(shù)碼產(chǎn)品新品發(fā)布網(wǎng)頁(yè)的效果，看起來(lái)非常酷炫（圖2）

圖2

向上滾動(dòng)鼠標(biāo)，圖片和文字就會(huì)還原（圖3）

圖3

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）

圖4

本源碼編碼：10180，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10180，即可獲取。

就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

頁(yè)中添加滾動(dòng)字幕效果

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var canvas1 = document.querySelector("#canvas1") // 1.找到畫(huà)布對(duì)象

var ctx = canvas1.getContext("2d") // 2.上下文對(duì)象（畫(huà)筆）

ctx.shadowBlur = 10; // 陰影距離

ctx.shadowColor = "red" // 陰影顏色

ctx.shadowOffsetX = 30 // 陰影偏移

ctx.shadowOffsetY = 30 // 陰影偏移

ctx.font = "150px 楷體"

ctx.fillText("你好！", 20,150)

ctx.fillText("你好！", 20,350)

ctx.strokeText('你好！',23, 153)

ctx.strokeText('你好',23, 553)

canvas繪制文字

var x = 600

setInterval(function(){

if(x > -350){

//清空畫(huà)布

ctx.clearRect(0,0,600,600)

ctx.strokeText('你好！',x, 153)

ctx.fillText("你好！", x,350)

ctx.font = "50px 宋體"

ctx.strokeText('每天學(xué)習(xí)一點(diǎn)點(diǎn)',x, 553)

x -= 3

}else{x=590}

}, 16)

</script>

</body>

</html>

動(dòng)距離

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫(xiě)法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。

根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來(lái)訪問(wèn)根節(jié)點(diǎn)：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。

第二個(gè)屬性是對(duì)HTML頁(yè)面的特殊擴(kuò)展,提供了對(duì)<body>標(biāo)簽的直接訪問(wèn)(body標(biāo)記)。

窗口尺寸、工作區(qū)尺寸

可視區(qū)尺寸寬度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性寫(xiě)法：

document.documentElement.clientWidth || document.body.clientWidth;

可視區(qū)尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性寫(xiě)法：

document.documentElement.clientHeight || document.body.clientHeight;

獲取瀏覽器窗口水平滾動(dòng)條的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性寫(xiě)法：

document.documentElement.scrollLeft || document.body.scrollLeft;

獲取瀏覽器窗口垂直滾動(dòng)條的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫(xiě)法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已經(jīng)支持documentElement對(duì)象的各種屬性, 而

以上兼容性寫(xiě)法不影響所獲的屬性值

編寫(xiě)自定義函數(shù)：

// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 獲取瀏覽器窗口水平滾動(dòng)條的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 獲取瀏覽器窗口垂直滾動(dòng)條的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>聲明對(duì)JavaScript獲取窗口寬度和高度的影響

在線咨詢

上一篇：2個(gè)將HTML5打包成app的方法
下一篇：PHP生成靜態(tài)HTML頁(yè)面的方法有哪些？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

網(wǎng)頁(yè)響應(yīng)鼠標(biāo)滾動(dòng)特效代碼html前端源碼

家好，今天給大家介紹一款， 網(wǎng)頁(yè)響應(yīng)鼠標(biāo)滾動(dòng)特效代碼html前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

每滾動(dòng)向下一次鼠標(biāo)，文字和圖片都會(huì)發(fā)生變化，類似一些數(shù)碼產(chǎn)品新品發(fā)布網(wǎng)頁(yè)的效果，看起來(lái)非常酷炫（圖2）

向上滾動(dòng)鼠標(biāo)，圖片和文字就會(huì)還原（圖3）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）

本源碼編碼：10180，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10180，即可獲取。

您的項(xiàng)目需求

家好，今天給大家介紹一款，網(wǎng)頁(yè)響應(yīng)鼠標(biāo)滾動(dòng)特效代碼html前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。