JavaScript-网页特效

1.元素偏移量offset系列

注意：返回的数值不带参数

1.1可以返回偏移位置

offsetTop:返回元素相对于定位父元素上方的偏移

offsetLeft：返回元素相对带有定位父元素左边的偏移

以带有定位的父元素为准，没有定位以body为准

1.2可以得到元素的大小

offsetWidth:返回元素自身的宽度，返回值也不带单位；是包含padding、border、width

offsetHeight：返回元素自身的高度，返回值也不带单位

1.3返回带有定位的父元素（position定位）

offsetParent

1.4offset和style的区别

offset只能读取不能赋值

style可读写，可以赋值

1.5鼠标事件

mousedown 鼠标按下

mousemove 鼠标移动

mouseup 鼠标松开

mouseover和mouseenter的区别：mouseover鼠标经过自身盒子会触发经过子盒子也会触发。mouseenter只会经过自身盒子触发

mouseleave鼠标离开

2.元素可视区client系列

clientWidth宽度

clientHeight高度

以上2个包含padding、内容不包含border

clientTop:返回元素上边框的大小

clientLeft：返回元素左边框的大小

3.立即执行函数

3.1立即执行函数：不需要调用立马能够执行的函数

3.2写法也可以传递参数

（function(){}）（）或者（function(){}()）

3.3立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量不会有命名的冲突

4.pageshow事件

persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加的

5.元素scroll系列

返回数值不带单位

scrollTop 返回被卷去的上侧距离

scrollLeft 返回被卷去的左侧距离

srollWidth 返回自身实际的宽度不含边框

srollHeight 返回自身实际的高度不含边框

sroll滚动事件当我们滚动条发生变化会触发事件

6.window.pageYOffset:页面被卷去的上侧距离

window.pageXOffset:页面被卷去的左侧距离

以上2种方法IE9以上支持

7.三大系列总结

offset系列经常用于获取元素的位置

client经常用于获取元素的大小

scroll经常用于获取元素滚动距离

8.动画原理

8.1核心原理：通过定时器setInterval()不断移动盒子的位置

实现步骤：获取盒子当前位置-->让盒子在当前位置加上1个移动距离-->利用定时器不断重复这个操作

注意：此元素需要添加定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画原理</title><style>div{position: absolute;left: 0px;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body>
<div></div>
<script>var div=document.querySelector('div');var timer=window.setInterval(function () {if (div.offsetLeft>400){//到目标位置停止定时器clearInterval(timer);} else {div.style.left=div.offsetLeft+5+'px';}},30)
</script>
</body>
</html>

8.2简单封装动画函数

 //obj 目标对象 target目标位置function animate(obj,target) {var timer=window.setInterval(function () {if (obj.offsetLeft>target){//到目标位置停止定时器clearInterval(timer);} else {obj.style.left=obj.offsetLeft+5+'px';}},30)}

给不用元素标记不同的定时器：利用对象的属性；

//obj 目标对象 target目标位置function animate(obj,target) {//先清除定时器，只保留当前的定时器执行clearInterval(obj.timer);obj.timer=window.setInterval(function () {if (obj.offsetLeft>target){//到目标位置停止定时器clearInterval(obj.timer);} else {obj.style.left=obj.offsetLeft+5+'px';}},30)}

9.缓动动画原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

核心算法：（目标值-现在位置）/10 作为每次移动的距离长度

 //缓动动画function animate1(obj,target) {//先清除定时器，只保留当前的定时器执行clearInterval(obj.timer);obj.timer=window.setInterval(function () {//步长取整// var step =Math.ceil((target-obj.offsetLeft)/10);var step=(target-obj.offsetLeft)/10;step = step>0?Math.ceil(step):Math.floor(step);if (obj.offsetLeft==target){//到目标位置停止定时器clearInterval(obj.timer);} else {obj.style.left=obj.offsetLeft+step+'px';}},15)}

9.1给缓动动画添加回调函数

10.滚动窗口至文档中的某个位置

window.scroll(x,y);里面的x,y不带单位

带有动画的返回顶部

案例：筋斗云案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>筋斗云案例</title><style>* {margin: 0;padding: 0}ul {list-style: none;}body {background-color: black;}.c-nav {width: 900px;height: 42px;background: #fff url(images/rss.png) no-repeat right center;margin: 100px auto;border-radius: 5px;position: relative;}.c-nav ul {position: absolute;}.c-nav li {float: left;width: 83px;text-align: center;line-height: 42px;}.c-nav li a {color: #333;text-decoration: none;display: inline-block;height: 42px;}.c-nav li a:hover {color: white;}.cloud {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: url(images/cloud.gif) no-repeat;}</style><script src="animate.js"></script><script>window.addEventListener('load',function () {//获取元素var cloud=document.querySelector('.cloud');var c_nav=document.querySelector('.c-nav');var lis=c_nav.querySelectorAll('li');var span=c_nav.querySelector('span');var current=0;for(i=0;i<lis.length;i++){lis[i].addEventListener('mouseenter',function () {animate(cloud,this.offsetLeft);})lis[i].addEventListener('mouseleave',function () {animate(cloud,current);})lis[i].addEventListener('click',function () {current=this.offsetLeft;})}})</script>
</head><body>
<div id="c_nav" class="c-nav"><span class="cloud"></span><ul><li><a href="#">首页新闻</a></li><li><a href="#">师资力量</a></li><li><a href="#">活动策划</a></li><li><a href="#">企业文化</a></li><li><a href="#">招聘信息</a></li><li><a href="#">公司简介</a></li><li><a href="#">我是佩奇</a></li><li><a href="#">啥是佩奇</a></li></ul>
</div></body>
</html>

JavaScript-网页特效相关推荐

php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
JavaScript网页特效-“渔夫打鱼晒网”程序设计
程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
实用JavaScript网页特效编程百宝箱pdf
下载地址:网盘下载内容介绍编辑计算机的出现是人类历史上的伟大创举,因为它正在彻底改变着人们生活中的方方面面,网络化的计算机更是日益渗透到社会发展的各个应用领域,从20世纪五六十年代网络雏形发展到 ...
javascript网页特效_南通建网站哪些,网页设计维护
无锡邦程信息科技有限公司为您详细解读rKXvd南通建网站哪些的相关知识与详情,#末网页设想师根据差别站点的内容微风格,设想出完美的网页效果图.内容填充:不论是个人网站还是企业网站,都必需从内容那个动身 ...
JavaScript网页特效学习笔记1
在网络中有许多的特效都是用JavaScript编写的,这几天通过看书和看视频,简单的学习了几个网页常见的特效,和大家分享一下. 1.使HTML页面反向显示我们浏览网页的时候,都是正向显示的.可以通过 ...
JavaScript网页特效-留言板
留言板是一种可以用来记录.展示文字信息的载体,有比较强的时效性.网站中的留言板功能非常重要,可以实现和用户互动,例如人民网的"领导留言板"."领导留言板"是人民 ...

JavaScript-网页特效

JavaScript-网页特效相关推荐

最新文章

热门文章