html5 新手引导插件,实现“新手引导”效果
效果:
代码:
*{margin: 0;padding: 0;}
.main-div{background:url(imgs/gz.jpg);background-size: cover;height: 800px}
#mask{height: 100%;width: 100%;position: absolute;top: 0;left: 0;background:#000;opacity: 0.5;filter:alpha(opacity=50);display: none;}
#searchtip{width: 1400px;height: 800px;background:transparent;position: absolute;left: 50%;margin-left: -700px;display: none;}
#searchtip div{position: absolute;display: none;}
#searchtip div a{position: absolute;width: 50px;height: 30px;background:rgb(32, 137, 152);cursor: pointer;text-align: center;line-height: 32px;top: 0px;left: 0px;text-decoration: none;color: #fff;font-size: 12px;}
#searchtip div span{position: absolute;width: 30px;height: 30px;background:rgb(32, 137, 152);cursor: pointer;text-align: center;line-height: 30px;top: 0px;left: 170px;color: #fff;border-radius: 50%;}
.stepa{width: 200px;height: 135px;background:url(imgs/hand.jpg);left: 330px;}
.stepb{width: 200px;height: 135px;background:url(imgs/hand2.jpg);left: 970px;top: 90px}
.stepc{width: 200px;height: 135px;background:url(imgs/hand3.jpg);left: 620px;top: 580px}
window. () {
//读取cookie
var localcookies = document.cookie.substring(5);
if (localcookies != "xinshouyindao") {
var mask = document.getElementById("mask"),
searchtip = document.getElementById("searchtip"),
step = searchtip.getElementsByTagName("div"),
aobj = searchtip.getElementsByTagName("a"),
spanobj = searchtip.getElementsByTagName("span");
mask.style.display = searchtip.style.display = step[0].style.display = "block";
//下一步
for (var i = 0; i < step.length; i++) {
aobj[i].index = i;
aobj[i].οnclick=function(){
this.parentNode.style.display = "none";
if (this.index < step.length-1) {
step[this.index+1].style.display = "block";
}else if(this.index == step.length-1){
mask.style.display = searchtip.style.display = "none";
}
}
};
//关闭按钮
for (var i = 0; i < spanobj.length; i++) {
spanobj[i].onclick = function(){
mask.style.display = searchtip.style.display = "none";
}
};
//cookie存储
var date = new Date();
date.setDate(date.getDate()+30);
document.cookie = "name=xinshouyindao;expires="+date;
}
}
html5 新手引导插件,实现“新手引导”效果相关推荐
- 分类图片展示php源码,HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)...
本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我 ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en& ...
- 网站开发中很实用的 HTML5 jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
- html 页面下雪效果,HTML5超逼真下雪场景效果
简要教程 这是一款基于jquery的超逼真下雪场景特效.该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效. 使用方法 在页面中引入ThreeCanva ...
- php html5日期插件,基于jQuery和HTML5的日历时钟插件 的图文详解
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...
- HTML5视频播放插件 video.js介绍
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kjab&title=HTML5%E8%A7%86%E9%A2%91%E6%92%AD ...
- Unity的NGUI插件篇——入场效果
Unity的NGUI插件篇--入场效果 入场效果 入场效果需要借助于NGUI提供的TweenPosition类来完成,为了说明此类的使用方法,本节将使会讲解两个示例.本文选自 大学霸 <NGU ...
- 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
- Leaflet中使用leaflet.easyPrint插件实现打印效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
最新文章
- C++中 #include与#include
- Sharepoint Caml查询中时间格式
- 加工中心局部坐标系g52设定_CNC加工中心程序代码大全,数控加工必备!
- js函数提示 vscode_为VSCode / Monaco Intellisence添加JavaScript类型提示
- Ubuntu 16.04安装idea
- java useragent 360 遨游 火狐_各种浏览器UserAgent一览表(桌面+移动)
- c# 审批流引擎_小熊OA:流程引擎才能真正起到管理价值!
- 【算法分析与设计】矩阵链乘法最优顺序问题
- React-Native 之 TabBarIOS
- 苹果“撞上”反垄断,围墙花园能否坚挺?
- gcc编译出现:error: dereferencing pointer to incomplete type
- python 生成嵌套字典
- eclipse部署web没部署成功的问题
- Android 2.3.5/4.0.3/4.1PowerManager简单总结和心得体会
- 【ArcGIS|空间分析|网络分析】9 使用位置分配选择最佳商店位置
- 广义线性模型python
- UVA 1212 - Duopoly(最小割)
- xp系统计算机蓝屏,12种XP系统蓝屏错误代码的含义和解决办法
- ioi 赛制_《Produce48》现坑爹赛制 网友称这波操作令人窒息
- 15家银行信用卡积分含金量大比拼