原生JavaScript实现新手引导效果（第二个玩具）
慕课地址https://www.imooc.com/video/169
预览效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="js/jquery-1.7.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
body{
background: url("images/body.png");
}
#mask{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.7;
background-color: #000;
filter: alpha(opacity=70%);
/* display: none; */
}
#parent{
height: 893px;
width: 1230px;
/* background-color: aqua; */
position: absolute;
left: 50%;
margin-left: -615px;
}
#parent div{
position: absolute;
}
.stepA{
position: absolute;
width: 745px;
height: 329px;
background-image: url(images/guide11.png);
top: 130px;
left: 168px;
display: none;
}
span{
cursor: pointer;
}
.stepA a{
/* background: aqua; 方便定位、调试*/
position: absolute;
height: 32px;
width: 95px;
top: 232px;
left: 492px;
text-indent: -9999px;
overflow: hidden;
}
.stepA span{
/* background: aqua; */
position: absolute;
height: 30px;
width: 30px;
top: 143px;
left: 683px;
text-indent: -9999px;
overflow: hidden;
} .stepB{
position: absolute;
width: 647px;
height: 405px;
background-image: url(images/guide21.png);
top: 5px;
left: 499px;
display: none;
}
.stepB a{
/* background: aqua; */
/* 方便定位、调试 */
position: absolute;
height: 32px;
width: 95px;
top: 308px;
left: 147px;
text-indent: -9999px;
overflow: hidden;
}
.stepB span{
/* background: aqua; */
position: absolute;
height: 30px;
width: 30px;
top: 197px;
left: 333px;
text-indent: -9999px;
overflow: hidden;
} .stepC{
position: absolute;
width: 654px;
height: 257px;
background-image: url(images/guide31.png);
top: 292px;
left: 494px;
display: none;
}
.stepC a{
/* background: aqua; */
/* 方便定位、调试 */
position: absolute;
height: 32px;
width: 95px;
top: 156px;
left: 401px;
text-indent: -9999px;
overflow: hidden;
}
.stepC span{
/* background: aqua; */
position: absolute;
height: 30px;
width: 30px;
top: 44px;
left: 588px;
text-indent: -9999px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="mask"></div>
<div id="parent">
<div class="stepA"><a href="#">下一步</a><span title="结束引导">关闭</span></div>
<div class="stepB"><a href="#">下一步</a><span title="结束引导">关闭</span></div>
<div class="stepC"><a href="#">结束引导</a><span title="结束引导">关闭</span></div>
</div>
<script>
window.onload = function(){
var mask = document.getElementById("mask");
var parent = document.getElementById("parent");
var steps = parent.getElementsByTagName("div");//attention
var stepbtn = document.getElementsByTagName("a");
var close = document.getElementsByTagName("span"); //判断先前是否访问过该网站
var temp = document.cookie.substring(5);//获取www.xxx...部分
//只有火狐浏览器支持本地写入cookie
if(temp != "www.xxx.com"){
mask.style.display = parent.style.display = steps[0].style.display = "block";
for(var i=0; i<steps.length;i++){
stepbtn[i].index = i;//人为添加index属性
stepbtn[i].onclick = function(){
this.parentNode.style.display = "none";//点击后结束这一步引导
if(this.index < steps.length-1){
steps[this.index+1].style.display = "block";
} else if(this.index = steps.length-1){
mask.style.display = parent.style.display ="none";
}
}
}
for(var i=0; i<close.length;i++){
close[i].onclick = function(){
mask.style.display = parent.style.display ="none";
}
}
var date = new Date();
date.setDate(date.getDate()+30);
document.cookie = "name=www.xxx.com;expires=" + date;
}
}
</script>
</body>
</html>
//使用jQuery重构
$("#mask,#parent,#parent div:eq(0)").show();
$("#parent div a").click(function(){
var current = $(this).parent();
current.hide();
current.next().show();
})
$("#parent div span,#parent div a:last").click(function(){
$("#parent,#mask").hide();
})
这项课程带给我的最大收获是明白了浏览器开发者的另一个重要作用：微调页面布局，以前我只是知道有这么个功能，却从未想过去使用它
JavaScript的学习开始一个多月了，到现在闭包我还是没搞懂... 很多大神的讲解也看得一头雾水，我是弟弟...
原生JavaScript实现新手引导效果（第二个玩具）的更多相关文章
- 纯原生javascript实现分页效果
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...
- 原生 JavaScript 图片裁剪效果
图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...
- 原生JavaScript实现评分效果
一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...
- 原生javascript实现分页效果+搜索功能
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- javascript学习-原生javascript的小特效（多个运动效果整理）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 【JavaScript DOM编程艺术(第二版)】笔记
第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\ 第2章 javascript语法 1.内建对象: 内建在javasc ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
随机推荐
- <亲测>用navicat连接mysql 8.0 报错2059
ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be loaded 2018年05月07日 15:56 ...
- Python单元测试框架之pytest 1 ---如何执行测试用例
From: https://www.cnblogs.com/fnng/p/4765112.html 介绍 pytest是一个成熟的全功能的Python测试工具,可以帮助你写出更好的程序. 适合从简 ...
- P1706 全排列问题
题解:(其实我认为它就是个循环) #include<iostream> #include<cstdio> #include<iomanip> using names ...
- SQL删除指定列的指定长度的字符
update );
- grafana 指标视图嵌入到其他html网页
我们开发了一套管理平台用来监控整个系统环境的运行情况,但是在指标信息这块不想重新开发,而想直接拿grafana来用,刚开始的时候我们的管理平台和grafana是完全独立的,只能从我们平台跳转到graf ...
- MySQL学习----索引的使用
一.什么是索引?为什么要建立索引? 索引用于快速找出在某个列中有一特定值的行,不使用索引,MySQL必须从第一条记录开始读完整个表,直到找出相关的行,表越大,查询数据所花费的时间就越多,如果表中查询的 ...
- Toast--报错
Toast的makeText()方法报错帖上一代码,用Toast来简单处理回调机制.但是Toast的makeText()方法老报错:import android.content.Context;imp ...
- [UE4]虚幻4链接独立服务器
如果虚幻4只做客户端的话,应该怎么连接服务器呢? 官方并没有提供蓝图的网络函数,C++里面有. 一.自己实现,提供接口给蓝图使用. 二.第三方插件.插件下载地址:https://github.com/ ...
- 使用 keepalived 设置虚拟 IP 环境（转载）
使用 keepalived 设置虚拟 IP 环境 原文地址:https://blog.csdn.net/kongxx/article/details/73173762 使用 keepalived 设置 ...
- echarts饼图配置
js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...