頁中添加滾動字幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動字體的設(shè)置</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象
var ctx = canvas1.getContext("2d") // 2.上下文對象(畫筆)
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){
//清空畫布
ctx.clearRect(0,0,600,600)
ctx.strokeText('你好!',x, 153)
ctx.fillText("你好!", x,350)
ctx.font = "50px 宋體"
ctx.strokeText('每天學(xué)習(xí)一點點',x, 553)
x -= 3
}else{x=590}
}, 16)
</script>
</body>
</html>
用JavaScript實現(xiàn)頁面滑動到指定位置加載動畫。
若頁面滾動到class名為group-pic的元素的位置時開始加載
原理: 1.獲取瀏覽器窗口的高度;
2.獲取頁面滾動的高度;
3.獲取頁面距離文檔(document)頂部的高度
offset().top具體指的是距哪里的高度呢?
一些獲寬高度的屬性:
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高: document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁可見區(qū)域高: document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬: document.body.scrollWidth;
網(wǎng)頁正文全文高: document.body.scrollHeight;
網(wǎng)頁被卷去的高: document.body.scrollTop;
網(wǎng)頁被卷去的左: document.body.scrollLeft;
網(wǎng)頁正文部分上: window.screenTop;
網(wǎng)頁正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的寬: window.screen.width;
屏幕可用工作區(qū)高度: window.screen.availHeight;
屏幕可用工作區(qū)寬度:window.screen.availWidth;
obj.offsetTop 指 obj 距離上方或上層控件的位置,整型,單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置,整型,單位像素。
obj.offsetWidth 指 obj 控件自身的寬度,整型,單位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,單位像素。
1.offsetTop : 當(dāng)前對象到其上級層頂部的距離.
不能對其進(jìn)行賦值.設(shè)置對象到頁面頂部的距離請用style.top屬性.
2.offsetLeft : 當(dāng)前對象到其上級層左邊的距離.
不能對其進(jìn)行賦值.設(shè)置對象到頁面左部的距離請用style.left屬性.
3.offsetWidth : 當(dāng)前對象的寬度.
與style.width屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.offsetHeight : 與style.height屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。