整合营销服务商

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

免费咨询热线:

网页响应鼠标滚动特效代码html前端源码

家好,今天给大家介绍一款, 网页响应鼠标滚动特效代码html前端源码(图1)。送给大家哦,获取方式在本文末尾。

图1

每滚动向下一次鼠标,文字和图片都会发生变化,类似一些数码产品新品发布网页的效果,看起来非常酷炫(图2)

图2

向上滚动鼠标,图片和文字就会还原(图3)

图3

源码完整,需要的朋友可以下载学习(图4)

图4

本源码编码:10180,需要的朋友,点击下面的链接后,搜索10180,即可获取。

就爱UI - 分享UI设计的点点滴滴

页中添加滚动字幕效果

<!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>

动距离

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性写法:

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

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

根节点

有两种特殊的文档属性可用来访问根节点:

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一个属性可返回存在于XML以及HTML文档中的文档根节点(html标记)。

第二个属性是对HTML页面的特殊扩展,提供了对<body>标签的直接访问(body标记)。

窗口尺寸、工作区尺寸

可视区尺寸宽度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性写法:

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

可视区尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性写法:

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

获取浏览器窗口水平滚动条的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性写法:

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

获取浏览器窗口垂直滚动条的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性写法:

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

注意:IE、FF已经支持documentElement对象的各种属性, 而

以上兼容性写法不影响所获的属性值

编写自定义函数:

// 获取浏览器窗口的可视区域的宽度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}


// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}


// 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}


// 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>声明对JavaScript获取窗口宽度和高度的影响