实现新手引导效果笔记
2017-05-12 本文已影响0人
这很重要吗
隐藏按钮文字的小技巧##
text-indent : -999px;
overflow : hidden;
opacity 属性##
IE８以下浏览器都不支持 opacity css样式，可以使用IE自带的“滤镜”来实现，如下代码：
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
上面代码的作用设置为 70% 的透明。
cookie的使用##
cookie是服务端写入的，浏览器端只能读取，但是FF支持本地写入，也可以查看cookie
Paste_Image.png
读取cookie
写入cookie
Paste_Image.png
练习cookie##
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie应用</title>
<style>
#div1 {width:200px; height:200px; background:#CCC; display:none;}
</style>
<script>
/* 如果没有cookie信息，将显示div，否则不显示。 （请在火狐浏览器下测试） */
//设置cookie
function setCookie(name, value, iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
//读取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(!getCookie('arrial'))
{
oDiv.style.display='block';
setCookie('arrial', '1', 30); //向cookie中添加'arrial', '1', 30
}
};
</script>
</head>
<body>
<div id="div1">没有cookie信息</div>
</body>
</html>
js实现##
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
html{ height:100%}
body{ background:url(http://img.mukewang.com/538d971400016dbd16191694.jpg) center top; height:100%}
#mask{ height:100%; width:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none}
#searchTip{ width:980px; height:800px; position:absolute; left:50%; margin-left:-490px; display:none}
#searchTip div{ position:absolute; display:none }
#searchTip div a{ position:absolute;width:96px; height:32px; cursor:pointer; text-indent:-999px; overflow:hidden}
#searchTip div span{cursor:pointer; position:absolute; width:30px; height:30px;text-indent:-999px; overflow:hidden}
.stepA{ background:url(http://img.mukewang.com/538d974000011bda07450329.jpg); height:329px; width:745px; top:130px; left:-9px; display:block}
.stepA a{top:230px; left:490px; }
.stepA span{ top:143px; right:32px; }
.stepB{ background:url(http://img.mukewang.com/538d975f00017e8d06470405.jpg); width:647px; height:405px;top:2px; left:324px}
.stepB a{top:308px; left:146px;}
.stepB span{ top:196px; right:285px; }
.stepC{ background:url(http://img.mukewang.com/538d977c0001ef5f06540257.jpg); width:654px; height:257px;top:294px; left:318px}
.stepC a{top:155px; left:400px; }
.stepC span{ top:44px; right:35px; }
.stepD{ background:url(http://img.mukewang.com/538d97990001692305580348.jpg); width:558px; height:348px;top:78px; left:155px}
.stepD a{top:246px; left:304px;}
.stepD span{ top:135px; right:35px; }
.stepE{ background:url(http://img.mukewang.com/538d97b70001f47d03970342.jpg); width:397px; height:342px;top:79px; left:250px}
.stepE a{top:245px; left:153px;}
</style>
<script>
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+30);
document.cookie="name=www.open.com.cn; expires="+oDate;
}
}
</script>
</head>
<body>
<div id="mask"></div>
<div id="searchTip">
<div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepE"><a>下一步</a></div>
</div>
</body>
</html>
jq实现##
jq没有封装cookie，所以要用原生js设置cookie的值
Paste_Image.png
