文件包
http://download.csdn.net/download/cplvfx/10266503
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/cp_index.css"/>
<script src="js/jquery1_7.min.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<title>立即申请1</title>
</head>
<body>
<!--描述:留言按钮-->
<div id="cp_liuyan" class="cp_button">立即申请1</div>
<!--描述:留言按钮-->
<div id="cp_liuyan" class="cp_button">立即申请2</div>
<!--描述:留言按钮-->
<div id="cp_liuyan" class="cp_button">立即申请3</div>
<!--描述:留言按钮-->
<div id="cp_liuyan" class="cp_button">立即申请4</div>
<!--描述:留言按钮-->
<div id="cp_liuyan" class="cp_button">立即申请5</div>
<!-- 查询结果 -->
<div class="cp_cxjg">
<div class="cp_cxjg_content">
<div class="cp_cxjg_title">
<div class="fl">查询结果</div>
<div class="fr"><img id="cx_bnt" class="anniu" src="img/x.png"></div>
</div>
<div class="cp_cxjg_body">
<ul>
<li>
<span class="span1">2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
<li>
<span class="span1">1860***2260查询的</span>
<span class="span2">快**家</span>
<span class="span3">已被抢注</span>
</li>
</ul>
</div>
<script>
jQuery(".cp_cxjg").slide({mainCell:".cp_cxjg_body ul",autoPlay:true,effect:"topMarquee",vis:12,interTime:50});
</script>
</div>
</div>
<!-- 弹窗 -->
<div class="tanchuang_bg"></div>
<div class="tanchuang">
<div class="tanchuang_content">
<div class="tanchuang_title">
<div class="txt">免费查询是否被抢注</div>
<div class="x"><img id="tc_bnt" class="anniu" src="img/x.png"></div>
</div>
<div class="tanchuang_body">
<form>
<input type="text" placeholder="小程序名称">
<div class="tishi"><img src="img/anquan_icon.png">信息保护中,请放心填写</div>
<input type="text" placeholder="手机号码">
<input type="submit" value="立即查看结果">
</form>
</div>
</div>
</div>
<script>
//查询关闭
$("#cx_bnt").click(function(){guanbi(".cp_cxjg",1)});
//弹窗信息关闭
$("#tc_bnt").click(function(){
guanbi(".tanchuang_bg",0);
guanbi(".tanchuang",0);
});
//关闭方法
function guanbi(divclass,timeout){
$(divclass).fadeOut("slow");
if(timeout==1){
setTimeout(zhanshi, 5000, divclass);//5秒后弹出所关闭的层
}
}
//开启方法
function zhanshi(divclass){
$(divclass).fadeIn("slow");
}
//弹窗
//要操作的class
var tanchuang=".tanchuang";
//获取窗口宽高
var w=innerWidth;
var h=innerHeight;
var tc_w=$(tanchuang).width();
var tc_h=$(tanchuang).height();
$(tanchuang).css({
"left": (w/2)-(tc_w/2),
"top": (h/2)-(tc_h/2),
});
//弹窗开启
var cp_liuyan=$("div").filter("#cp_liuyan");
cp_liuyan_stringify=JSON.stringify(cp_liuyan);
console.log("cp_liuyan=="+cp_liuyan.length);
$("div#cp_liuyan").click(function(){
zhanshi(".tanchuang_bg",0);
zhanshi(".tanchuang",0);
});
</script>
</body>
</html>
CSS代码
/*
* 小程序专题
*/
/*初始化CSS样式*/
body{ margin:0; padding:0; font:14px/1.5 "Microsoft YaHei",Tahoma,Arial,"宋体"; color:#333; width: 100%; overflow-x: hidden;
background-color: #f6f6f6;
}
form,ul,li,ol,dl,dt,dd,p,i,h1,h2,h3,h4,h5,h6{ margin:0; padding:0}
ul,li{ list-style:none} img{ border:0}
a{color:#333; text-decoration:none}
a.bs:link,a.bs:visited{ color:#fff; text-decoration:none}
a.bs:hover,a.bs:active{ color:#fff; text-decoration:none}
.cl{ clear:both; height:0; font-size:0; overflow:hidden}
.fl{ float:left !important} .fr{ float:right !important}
/* 按钮 */
#cp_liuyan{
cursor: pointer;
}
.cp_button{
margin:0 auto;
margin-top: 40px;
background: url(../img/button_blue.png);
overflow: hidden;
color: #fff;
width: 282px;
height:55px;
font-size: 20px;
text-align: center;
line-height:55px;
}
.anniu{
cursor: pointer;
}
/* 查询结果 */
.cp_cxjg{
width: 300px;
height: 388px;
border-top: #204eae solid 4px;
background-color: #fff;
overflow: hidden;
position: fixed;
right: 0;
top: 40%;
color: #666666;
font-size: 14px;
z-index: 100;
}
.cp_cxjg_content{
width: 270px;
margin: 0 auto;
}
.cp_cxjg .cp_cxjg_title{
width: 100%;
height: 70px;
line-height: 70px;
font-size: 24px;
font-weight: bold;
color: #333333;
border-bottom: #e3e3e3 solid 1px;
}
.cp_cxjg_body ul li{
height: 26px;
line-height: 30px;
cursor: default;
}
.cp_cxjg_content .cp_cxjg_body{
height: 300px;
overflow: hidden;
}
.cp_cxjg_content span{display: inline-block;}
.cp_cxjg_content .span1{
width:130px;
text-align: left;
}
.cp_cxjg_content .span2{
width:66px;
text-align: center;
}
.cp_cxjg_content .span3{
width:60px;
text-align:right;
}
/* 弹窗 */
.tanchuang_bg{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
position: fixed;
z-index: 200;
top: 0;
display: none;
}
.tanchuang{
width: 440px;
height: 350px;
border-top: #204eae solid 4px;
background-color: #fff;
overflow: hidden;
z-index: 201;
position: fixed;
top: 0;
display: none;
}
.tanchuang_content{
width: 380px;
margin:0 auto;
}
.tanchuang_title{
width:100%;
height: 86px;
line-height: 86px;
font-size: 24px;
font-weight: bold;
color: #333333;
border-bottom: #e3e3e3 solid 1px;
}
.tanchuang_title .txt{
width: 100%;
text-align: center;
}
.tanchuang_title .x{
width: 22px;
height: 22px;
position: absolute;
right:25px;
top:4px;
}
.tanchuang_body{
width: 100%;
margin-top:30px;
}
.tanchuang_body input{
margin: 0 auto;
width: 282px;
height: 36px;
display:block;
margin-bottom:40px;
border: #e0e0e0 solid 1px;
padding-left:10px;
}
.tanchuang_body input[type=submit]
{
width:220px ;
height:43px;
background:url(../img/button_blue2.png);
border: none;
color: #fff;
font-size: 20px;
cursor:pointer;
margin-top: -6px;
}
.tanchuang_body .tishi{
margin-left:43px;
margin-bottom: 6px;
position:absolute;
margin-top: -26px;
background-color:#58b850;
width: 190px;
height: 20px;
line-height:20px;
color: #fff;
padding-left: 6px;
font-size: 12px;
}
.tanchuang_body .tishi img{
margin-right:6px;
margin-top: 4px;
}