整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html中滚动字体的设置

页中添加滚动字幕效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>滚动字体的设置</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('每天学习一点点',x, 553)


x -= 3

}else{x=590}



}, 16)


</script>


</body>

</html>

用JavaScript实现页面滑动到指定位置加载动画。

若页面滚动到class名为group-pic的元素的位置时开始加载


  1. $(document).ready(function(){
  2. var a,b,c;
  3. a = $(window).height(); //浏览器窗口高度
  4. var group = $(".group-pic");
  5. $(window).scroll(function(){
  6. b = $(this).scrollTop(); //页面滚动的高度
  7. c = group.offset().top; //元素距离文档(document)顶部的高度
  8. if(a+b>c){
  9. ...
  10. }else{
  11. ...
  12. }
  13. });
  14. });

原理: 1.获取浏览器窗口的高度;

2.获取页面滚动的高度;

3.获取页面距离文档(document)顶部的高度

offset().top具体指的是距哪里的高度呢?

一些获宽高度的属性:

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);

网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

1.offsetTop : 当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft : 当前对象到其上级层左边的距离.

不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth : 当前对象的宽度.

与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值