这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本例将实现这样的一个效果:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部
淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部
我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加 mouseover, mouseout 事件。要侦听滚动条的变化,所以需要给 window 添加 scroll 事件,点击按钮回到顶部,按钮添加 click 事件。我们将事件处理程序封装成三个函数 moveIn, moveOut, goTop;
- <div class="container">
- <div class="header">
- 头部
- </div>
- <div class="content">
- 主要内容,高度是2000px
- </div>
- <div class="footer>底部</div>
- <div id=" btn
- ">返回顶部</div>
- </div>
- .container {
- width: 980px;
- margin: 0 auto;
- height: auto;
- background: #aaa;
- }.content {
- height: 2000px;
- border: 1px solid blue;
- }#btn {
- position: fixed;
- bottom: 50px;
- right: 0;
- width: 54px;
- height: 55px;
- background: url(icons.png) no - repeat 0 - 110px;
- } //背景图可随意找一张
- font - size: 12px;
- line - height: 55px;
- text - align: center;
- text - indent: -9999em;
- cursor: pointer;
- display: none;
下面是完整的 js 代码
- window.addEventListener("load",
- function() {
- var btn = document.getElementById("btn");
- btn.addEventListener("mouseover", moveIn, false);
- btn.addEventListener("mouseout", moveOut, false);
- function moveIn() {
- btn.style.color = "#ffffff"; //修改的是内联样式,具有最高的优先级;
- btn.style.textIndent = "0em";
- btn.style.backgroundImage = "none";
- btn.style.backgroundColor = "#FF4401";
- }
- function moveOut() {
- btn.style.textIndent = "-9999em";
- btn.style.backgroundImage = "url(icons.png)";
- }
- function goTop(acceleration, time) { //修改参数可调整返回顶部的速度
- acceleration = acceleration || 0.1;
- time = time || 10;
- var speed = 1 + acceleration;
- function getScrollTop() { //取得滚动条的竖直距离
- return document.documentElement.scrollTop || document.body.scrollTop;
- }
- function setScrollTop(value) { //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果
- document.documentElement.scrollTop = value;
- document.body.scrollTop = value;
- }
- window.onscroll = function() {
- var scrollTop = getScrollTop();
- if (scrollTop > 100) { //判断滚动条距离窗口顶部多远时显示出来,这里是100px
- btn.style.display = "block";
- } else {
- btn.style.display = "none";
- }
- };
- btn.onclick = function() {
- var timer = setInterval(function() {
- setScrollTop(Math.floor(getScrollTop() / speed)); //这行代码是关键,取得滚动条竖直距离,除以speed后再给滚动条设置竖直距离
- if (getScrollTop() == 0) clearInterval(timer);
- },
- time);
- };
- }
- goTop(0.2, 8);
- },
- false);
当然,还有其他的实现方法,下面给出其他方法的关键代码
- btn.onclick = function() {
- clearInterval(timer);
- var timer = setInterval(function() {
- var now = scrollTop; //滚动条竖直距离
- speed = (0 - now) / 10;
- speed = Math.floor(speed);
- if (now == 0);
- clearInterval(timer);
- document.documentElement.scrollTop = now + speed; //标准模式下的浏览器
- document.body.scrollTop = now + speed; //怪异模式下的浏览器
- }, 15);
- }
这里的代码主要还是参考了网上其他资源,再加了一点自己的理解。当然还有其他实现方法,比如 JavaScript 最早时间就支持的 window.scrollTo()。用 jQ 来实现的话代码量将会变得很少,可参看 w3cplus
个人觉得,先学好原生 JavaScript,比如搞清楚数据类型,闭包,继承,作用域,DOM,CSS,事件处理,Ajax 等,用熟练后学习其他框架将会容易很多。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0704/276403.html