为了账号安全,请及时绑定邮箱和手机立即绑定

如何实现“新手引导”效果

江老实 Web前端工程师
难度初级
时长50分
学习人数
综合评分9.63
118人评价 查看评价
9.6 内容实用
9.6 简洁易懂
9.7 逻辑清晰
  • html结构
    查看全部
    1 采集 收起 来源:HTML结构介绍

    2015-06-25

  • 兼容:浏览器:opacity:50%,IE:filter:alpha{opacity=50} 避免兼容性问题: html{height100%} body{height:100%} 因为mask是height:100%;使得mask能够撑开。
    查看全部
    1 采集 收起 来源:网页蒙版设置

    2015-01-21

  • display:none 隐藏
    查看全部
    1 采集 收起 来源:引导单元定位

    2018-03-22

  • window.onload=function(){    var oMask=document.getElementById('mask');	var oSearch=document.getElementById('searchTip');		var aStep=oSearch.getElementsByTagName('div');	var aA= oSearch.getElementsByTagName('a');	var aClose=oSearch.getElementsByTagName('span');	//读取cookie	var res=document.cookie.substring(5);	alert("当前cookies="+"("+res+")");		//判断是否来过	if(res!="www.open.com.cn"){		alert("没有登录过");		oMask.style.display=oSearch.style.display=aStep[0].style.display="block";				//下一步按钮		for( var i=0; i<aStep.length; i++){			aA[i].index=i;//为每一个按钮增加一个index属性,为后面引用做好准备			aA[i].onclick=function(){				this.parentNode.style.display="none";				//aStep[this.index+1].style.display="block";								if(this.index < aStep.length-1){//如上,如果不加这个判断,到了最后一个会报错				aStep[this.index+1].style.display="block";			}				else if(this.index==aStep.length-1){//如果到了最后一个,结束整个操作				oMask.style.display="none";				this.style.display=oSearch.style.display="none"; 			}		}	}				//关闭按钮		for(var i=0; i<aClose.length;i++){			aClose[i].onclick=function(){				oMask.style.display=oSearch.style.display="none";			}		}			//如果没有来过,添加cookie	var oDate=new Date();	oDate.setDate(oDate.getDate()+30);	document.cookie="name=www.open.com.cn;expires="+oDate;	}}


    查看全部
    1 采集 收起 来源:编程练习

    2018-12-13

  • position:absolute

    margin-left:-490px

    text-indent:-999px

    cursor;pointer

    查看全部
    1 采集 收起 来源:编程练习

    2018-04-13

  • filter:alpha(opacity=50)
    查看全部
    1 采集 收起 来源:引导单元定位

    2015-03-20

  • //cookie var res=document.cookie.substring(5); //如果没有cookie,执行以下动作 if(res!="name=www.open.com.cn"){ //mask //添加cookie }
    查看全部
  • 添加cookie var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie="name=www.open.com.cn;expires="+oDate; 读取cookie var res=document.cookie.substring(5); 如果没有cookie,执行以下动作 if(res!="www.open.com.cn"){ 动作内容 }
    查看全部
  • 判断cookie中是否有数据 !getCookie('arrial')或者!getCookie("arrial");
    查看全部
    1 采集 收起 来源:练习题

    2018-03-22

  • <!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>cookie应用</title> <style> #div1{width:200px; height:200px; background:#CCC; display:none;} </style> <script> //设置cookie function setCookie(name, value, iDay){ var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; } //!getCookie("arrial") 读取cookie function getCookie(name){ var arr=document.cookie.split(';'); //定义数组 var re=new RegExp('\\b'+name+'=\\w+'); //定义正则 var res=document.cookie.match(re); //匹配所选字段 if(res){ return res[0].split('=')[1]; //匹配成功,返回结果 } else{ return ''; //否则返回空 } } //删除cookie function removeCookie(name){setCookie(name, '1', -1) } //利用setCookie函数,将时间设置为-1,达到删除效果(默认没有删除方法) window.onload=function () { var oDiv=document.getElementById('div1'); if(?) { oDiv.style.display='block'; setCookie('arrial', '1', 30); //向cookie中添加'arrial', '1', 30 } }; </script> </head> <body> <div id="div1">没有cookie信息</div> </body> </html>
    查看全部
    1 采集 收起 来源:练习题

    2018-03-22

  • Firefox 支持本地,cookie的写操作! 牛!
    查看全部
  • http://www.xgqfrms.xyz/HTML5-Animaitions/ABC/images/bg.png <style> /*SCSS*/ *{ margin: 0; padding: 0; } body{ background: url(./images/bg.png) center top no-repeat; /* === background: url(./images/bg.png) top no-repeat; link: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position */ width: 100%; height: 100%; } </style>
    查看全部
    1 采集 收起 来源:编程练习

    2018-03-22

  • opacity:0.5;是给火狐个谷歌浏览器用 filter:alpha(opacity=50);display:none兼容ie浏览器
    查看全部
    1 采集 收起 来源:网页蒙版设置

    2016-08-04

  • <html>和<body>也需要设置成100%
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2018-03-22

  • html结构
    查看全部
    0 采集 收起 来源:编程练习

    2016-05-07

举报

0/150
提交
取消
课程须知
1.对div和css相关内容精通掌握;2. 具有一定的JavaScript和JQuery知识基础
老师告诉你能学到什么?
1.掌握“新手引导”的实现思路 2.了解html结构布局 3.掌握简便的定位方法 4.学会用 原生JavaScript代码和JQuery两种方式实现依次显示效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!