QQ截图20180424215415.png

   好久没来写写博文了,今天闲暇时间来分享个小源码,因为某人有需要。源码效果如上图:

说实话这源码原本是我很久之前易云挂Q的一个小插件,手机端用很不错的效果。

使用也很简单,也就一段代码+CSS+JS+图片即可:

使用代码如下:(将代码放入要显示的页面即可)

<!--导航开始-->
<link href="/taobaocd.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/taobaocd.js"></script>
<div class="quick_nav" id="quick_nav" style="left: 10px; bottom: 0px;">
<div class="quick_btn"></div>
<div class="quick_con hide">
<ul class="quick_list">
<li class="qnav_home"><a href="index.php">领券直播</a></li>
<li class="qnav_one"><a href="https://www.yunmss.cn/index.php/post/158.html">教程</a></li>
<li class="qnav_two"><a href="vip.html">福利</a></li>
<li class="qnav_three"><a href="http://e.zhaoquan.xin/index.php?r=cha">查券</a></li>
<li class="qnav_four"><a href="http://jd.zhaoquan.xin">京东</a></li>
<li class="qnav_five"><a href="http://www.zhaoquan.xin/index.php?r=ddq&u=1">叮咚</a></li>
<li class="qnav_six"><a href="http://e.zhaoquan.xin/index.php?r=ju">划算</a></li>
</ul></div></div>
<script type="text/javascript">
(function qnav(){
var oQuickNav = document.getElementById("quick_nav");
var oQuickNavDiv = oQuickNav.getElementsByTagName("div");
var oBtn = true;
oQuickNavDiv[0].onclick = function (){
if(oBtn == true){
this.className = "quick_btn current";
oQuickNavDiv[1].className = "quick_con show";
}else{
this.className = "quick_btn";
oQuickNavDiv[1].className = "quick_con hide";
}
oBtn = !oBtn;
}
})();
</script>
<!--导航结束-->

taobaocd.js (复制代码保存名字为taobaocd.js的文件)

/* WWW.XIAOAND.CN */
document.writeln("");
document.writeln("<script type=\"text/javascript\">");
document.writeln("");
document.writeln("(function qnav(){");
document.writeln("		var oQuickNav = document.getElementById(\"quick_nav\");");
document.writeln("		var oQuickNavDiv = oQuickNav.getElementsByTagName(\"div\");");
document.writeln("		var oBtn = true;");
document.writeln("		oQuickNavDiv[0].onclick = function (){");
document.writeln("			if(oBtn == true){");
document.writeln("				this.className = \"quick_btn current\";");
document.writeln("				oQuickNavDiv[1].className = \"quick_con show\";");
document.writeln("			}else{");
document.writeln("				this.className = \"quick_btn\";");
document.writeln("				oQuickNavDiv[1].className = \"quick_con hide\";");
document.writeln("			}");
document.writeln("			oBtn = !oBtn;");
document.writeln("		}");
document.writeln("");
document.writeln("})();");
document.writeln("</script>");

taobaocd.css(复制代码保存名字为taobaocd.css的文件)

.quick_nav { position: fixed; bottom: 30px; left: 12px; z-index: 4999; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent; border-radius:50%; }
.quick_nav .new { color: #fff; font-weight: bold; height: 19px; line-height: 19px; position: absolute; top: -3px; margin-left: 34px; padding: 0 6px; border: 2px solid #fff; border-radius: 10px; background-color: #ff5460; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } 
.quick_nav em { display: inline-block; height: 10px; width: 10px; margin: 4px; position: absolute; right: 0; background: #ff5460; border-radius: 15px; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } 
.quick_nav i { display: inline-block; width: 45px; height: 45px; margin: 3px 0 0 3px; border: 1px solid #eff0f1; border-radius: 45px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } 
.quick_mask { position: fixed; top: 0px; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, 0.2); display: none; }
.quick_btn { width: 53px; height: 53px; background-position: 0 0; position: relative; z-index: 13; background-image: url(../img/taobaocd.png); background-repeat: no-repeat; -webkit-background-size: 250px auto; background-size: 250px auto; } 
.quick_btn.current { background-position: 0 -58px; }
.quick_con { position: absolute; bottom: 25px; left: 23px; z-index: 12; width: 190px; height: 190px; overflow: hidden; -webkit-transition: all linear .15s; background-position: -60px 0; background-image: url(../img/taobaocd.png); background-repeat: no-repeat; -webkit-background-size: 250px auto; background-size: 250px auto; } 
.quick_con.hide { opacity: 0; -webkit-transform: translate(-100px, 100px) scale(0.2); pointer-events: none; }
.quick_con.show { opacity: 1; -webkit-transform: translate(0px, 0) scale(1); pointer-events: auto; }
.quick_list{ padding:0px; margin:0px;} 
.quick_list li { position: absolute; list-style-type:none; }
.quick_list li .new { top: 7px; margin-left: 43px; } 
.quick_list li em { top: 10px; right: 10px; } 
.quick_list li a { display: block; height: 28px; outline: none; text-align: center; line-height: 28px; position: absolute; text-decoration: none; font-size: 14px; color: #626262; text-shadow: 0 0 1px rgba(255, 255, 255, 0.6); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 
.quick_list li.qnav_home a { width: 53px; height: 53px; left: 11px; top: 11px; text-indent: -90000px; overflow: hidden; line-height: 1000px; }
.qnav_home { width: 78px; height: 150px; position: absolute; left: 56px; top: 55px; }
.qnav_one { width: 92px; height: 68px; left: 17px; top: 4px; }
.qnav_one a { left: 23px; top: 19px; width: 42px; } 
.qnav_two { width: 52px; height: 90px; left: 4px; top: 49px; }
.qnav_two a { left: 4px; top: 31px; width: 42px; } 
.qnav_three { width: 79px; height: 69px; left: 16px; top: 115px; }
.qnav_three a { left: 23px; top: 19px; width: 42px; } 
.qnav_four { width: 77px; height: 85px; left: 94px; top: 116px; }
.qnav_four a { left: 13px; top: 19px; width: 42px; } 
.qnav_five { width: 52px; height: 90px; left: 132px; top: 48px; }
.qnav_five a { left: 6px; top: 31px; width: 42px; } 
.qnav_six { width: 77px; height: 67px; left: 94px; top: 4px; }
.qnav_six a { left: 13px; top: 19px; width: 42px; }

图片文件(保存在img文件夹)

下载地址:http://www.zhaoquan.xin//img/taobaocd.png 

使用方法:先将上述代码分别保存为taobaocd.css和taobaocd.js文件,然后放在网站跟目录,再引用最上面的代码即可。

下面我提供一个源码包:

百度下载链接: https://pan.baidu.com/s/1Y9wW0u_hI8w5KvRwTl6iog   密码: swg8

易云博客旗下

发布评论

版权申明:本文章除特别申明外皆为原创文章,引用本文章必须注明来源!本文章地址:http://www.yunmss.cn/index.php/post/181.html

易云博客 - 专注分享各类源码技术电影

官方QQ群号:40286976 (左侧二维码扫一扫)欢迎赞助!

【小程序源码】微赞模块 - 禾匠仿二更视频微信小程序
你是第一个吃螃蟹的人
发表评论

正在加载验证码......

请完成验证,确认你是个正常的人...

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。