这篇博客介绍如何使用JavaScript在移动端实现类似迪士尼官网的侧边栏效果，适用于jQuery和原生JS。内容包括CSS样式调整和JavaScript交互实现。
只需引用一版jq即可，当然如果你的移动端是用的框架，可以直接套用
下面是HTML与jq
css一大部分是项目里面的，可以直接删掉
<!DOCTYPE html>
<!-- saved from url=(0025)http://mobile.disney.cn/# -->
<html lang="zh-CN" style="font-size: 12.9375px;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style class="vjs-styles-defaults">
</style>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>迪士尼中国官网</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<!--禁止IOS识别号码 -->
<meta content="email=no" name="format-detection">
<link href="./css/style.css" rel="stylesheet">
<script src="./js/jquery-1.7.2.min.js.下载" type="text/javascript"></script>
</head>
<body style="overflow: scroll;">
<!--菜单-->
<div class="menu">
<ul class="menu_ul">
<a href="javascript:;">
<li class="menu_li menu_li1 menu_li11 ">首页</li>
</a>
<!-- menu_li11为选中样式，其他同此-->
<a href="#">
<li class="menu_li menu_li2 ">商店</li>
</a>
<a href="#">
<li class="menu_li menu_li3 ">乐园</li>
</a>
<a href="#">
<li class="menu_li menu_li4 ">影视</li>
</a>
<a href="javascript:;">
<li class="menu_li menu_li5 ">数码</li>
</a>
<a href="#">
<li class="menu_li menu_li7 ">迪士尼英语</li>
</a>
</ul>
</div>
<!-- 页首-->
<header>
<a href="#" class="btnMenu">
<button class="btn_menu"></button>
</a>
</header>
<div class="d_content">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
<img src="images/151222091006827412.jpg" alt="">
</div>
<!--最大的一块 -->
<div style="display: none;z-index: 12;" class="b_block"></div>
<script type="text/javascript">
jQuery(function(){
jQuery('.btnMenu').click(function(){
jQuery('.menu').css({'-webkit-transform':'translateX(25.6rem)','-webkit-transition':'transform 0.5s'});
jQuery('.d_content').css({'-webkit-transform':'translateX(25.6rem)','-webkit-transition':'transform 0.5s'});
jQuery('header').css({'-webkit-transform':'translateX(25.6rem)','-webkit-transition':'transform 0.5s'});
jQuery('.b_block').css({'display':'block','z-index':'12'});
jQuery('body').css('overflow','hidden');
jQuery('.d_content').addClass('forbid');
//禁止滑动
document.addEventListener("touchmove",function(e){
if(jQuery('.d_content').hasClass('forbid')){
e.preventDefault();
e.stopPropagation();
}
},false);
});
//点击灰层侧边栏收起
jQuery('.b_block').click(function(){
jQuery('.menu').css({'-webkit-transform':'translateX(0)','-webkit-transition':'transform 0.5s'});
jQuery('.d_content').css({'-webkit-transform':'translateX(0)','-webkit-transition':'transform 0.5s'});
jQuery('header').css({'-webkit-transform':'translateX(0)','-webkit-transition':'transform 0.5s'});
jQuery('.b_block').css({'display':'none','z-index':'12'});
jQuery('body').css('overflow','scroll');
setTimeout(function(){
jQuery('.d_content').attr('style','');
jQuery('.d_content').removeClass('forbid');
jQuery('.d_navwrap').css('position','fixed');
jQuery('.b_block').css({'display':'none','z-index':'12'});
},600);
});
});
</script>
</body>
</html>css 在
@charset "utf-8";
* {
margin: 0;
padding: 0;
border: none;
font-family: "MicrosoftYaHei", "微软雅黑";
}
body {
font-size: 100%;
position: absolute;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/*-webkit-transform: translate3d(25.6rem,0,0);*/
}
li {
list-style: none;
}
input {
border-radius: 0;
border: 0.1rem solid #e3e3e3;
-webkit-box-shadow: none;
background-color: #ffffff;
}
img {
display: block;
width: 100%;
height: auto;
}
header {
width: 100%;
padding: 2rem 0 1rem 0;
position: fixed;
top: 0;
left: 0;
z-index: 11;
background-color: #fff;
}
.d_content {
margin-top: 7.8rem;
}
.container {
padding: 0rem 1.6667rem 2rem;
background-color: #ffffff;
position: relative;
top: 0;
left: 0;
overflow-x: hidden;
margin-top: 7.8rem;
}
.container1 {
padding: 0rem 1.6667rem;
background-color: #ffffff;
position: relative;
/*top: 0;*/
/*left: 0;*/
overflow-x: hidden;
}
.container211 {
padding: 0rem 1.6667rem 2rem;
background-color: #ffffff;
overflow-x: hidden;
position: relative;
}
.content {
padding: 0rem 1.5rem;
background-color: #ffffff;
overflow-x: hidden;
position: relative;
}
.btn_menu {
width: 1.6rem;
height: 1.4rem;
background: url("../images/daohang@2x.png") no-repeat;
background-size: 100%;
position: absolute;
top: 3.5rem;
left: 2rem;
}
.img_menu {
width: 3rem;
height: 1.5rem;
background: url("../images/img_menu.png") no-repeat;
background-size: cover;
position: absolute;
top: 3.5rem;
left: 4.5rem;
}
.swipe_box {
width: 100%;
height: 10.4167rem;
background: yellowgreen url("../images/swipe_bg1.jpg") no-repeat center center;
background-size: 100%;
}
.index_ul {
width: 100%;
}
.index_ul_none {
width: 100%;
display: none;
}
.index_li {
width: 100%;
height: 5rem;
list-style: none;
border-bottom: 1px solid #b2b2b2;
position: relative;
/*display: -webkit-box;*/
/*-webkit-box-pack: center;*/
/*-webkit-box-align: center;*/
}
.index_li_none {
width: 100%;
height: 5rem;
list-style: none;
border-bottom: 0.2rem solid #b2b2b2;
position: relative;
display: none;
/*display: -webkit-box;*/
/*-webkit-box-pack: center;*/
/*-webkit-box-align: center;*/
}
.index_li p {
width: 85%;
height: 100%;
margin-left: 15%;
text-align: left;
line-height: 5rem;
font-weight: bold;
font-size: 1.5rem;
}
.index_li1 {
width: 2rem;
height: 2rem;
background: url("../images/icon_1.png") no-repeat;
background-position: 0% 0%;
background-size: 100%;
position: absolute;
top: 1.5rem;
left: 1rem;
}
.index_li2 {
width: 2.25rem;
height: 2.25rem;
background: url("../images/icon_2.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.5rem;
left: 1rem;
}
.index_li3 {
width: 2.1rem;
height: 1.6rem;
background: url("../images/icon_3.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.7rem;
left: 1rem;
}
.index_li4 {
width: 1.85rem;
height: 1.85rem;
background: url("../images/icon_4.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.6rem;
left: 1rem;
}
.index_title {
width: 100%;
margin: 4rem auto;
font-size: 2.35rem;
font-weight: bold;
color: #000000;
text-align: center;
line-height: 3rem;
}
.index_title02 {
padding: 1rem 0;
text-align: center;
font-size: 1.2rem;
}
.t_mb0 {margin-bottom:0}
.index_img {
width: 100%;
position: relative;
top: 0;
left: 0;
text-align: center;
}
.index_img_border {
border: 1px solid #e3e3e3;
border-bottom: none;
}
.index_img_border:last-child {
border-bottom: 1px solid #e3e3e3 !important;
}
.index_img p {
position: absolute;
width: 100%;
font-size: 1.28rem;
color: #555555;
z-index: 2;
}
.commodity_name {
font-weight: bold;
text-align: center;
bottom: 3.2rem;
}
.commodity_price {
text-align: center;
bottom: 1.5rem;
}
.commodity_name1 {
font-weight: bold;
/*text-align: left;*/
bottom: 3.2rem;
color: #ffffff;
left: 0.5rem;
/*padding: 0 3rem;*/
}
.commodity_price1 {
/*text-align: left;*/
bottom: 1.5rem;
/*padding: 0 3rem;*/
}
.index_img_title {
padding: 0 2.5rem;
font-size: 1.8775rem !important;
font-weight: bold;
text-align: justify;
position: absolute;
bottom: 6.5rem;
z-index: 10;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: auto !important;
color: #ffffff !important;
}
.index_img_cont {
padding: 0 2.5rem;
font-size: 1.024rem;
line-height: 1.5;
text-align: justify;
position: absolute;
bottom: 2.5rem;
z-index: 10;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: auto !important;
color: #d6d6d6 !important;
}
.index_img1 {
width: 100%;
height: auto;
border: none;
margin: 0;
padding: 0px;
display: block;
position: relative;
z-index: 1;
}
.index_content {
padding: 0 1rem;
position: relative;
z-index: 10;
/*border-left: 0.1rem solid #e3e3e3;*/
/*border-right: 0.1rem solid #e3e3e3;*/
padding-bottom: 3.75rem;
}
.index_content1 {
/*border-bottom: 0.1rem solid #e3e3e3;*/
}
.index_content1:before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 2rem solid transparent;
border-right: 2rem solid transparent;
border-bottom: 2rem solid #ffffff;
position: absolute;
top: -1.9rem;
left: 1rem;
}
.index_content_title {
font-size: 1.792rem;
font-weight: bold;
color: #000;
text-align: justify;
padding: 2.5rem 0 2rem;
line-height: 1.2;
}
.index_content_cont {
width: 100%;
font-size: 1.1945rem;
color: #666666;
text-align: justify;
/*margin: 0rem 0 3rem;*/
line-height: 1.4;
}
footer {
padding: 0rem 1.6667rem 2rem;
background-color: #ffffff;
overflow-x: hidden;
}
.footer_logo {
width: 11rem;
height: 4.8rem;
background: url("../images/logo.png") no-repeat;
background-size: 100%;
margin: 3rem 0 2rem 0;
}
.footer_ul {
width: 100%;
padding-bottom: 2rem;
overflow: hidden;
border-bottom: 0.1rem solid #ececec;
}
.footer_li {
width: 33.3333%;
height: 3rem;
float: left;
list-style: none;
font-size: 1.6rem;
line-height: 3rem;
font-weight: bold;
color: #000000;
text-align: justify;
}
.footer_att {
height: 3rem;
font-size: 1.6rem;
line-height: 3rem;
font-weight: bold;
color: #000000;
text-align: justify;
margin-top: 2rem;
}
.footer_p {
width: 100%;
text-align: justify;
font-size: 1rem;
color: #666666;
line-height: 2rem;
overflow: hidden;
}
.weibo {
float: left;
}
.weibo:after {
content: '微博';
display: block;
width: 100%;
height: 4rem;
text-align: center;
font-size: 1.618rem;
font-weight: bold;
line-height: 4rem;
word-spacing: 2rem;
}
.img_weibo, .img_weixin {
width: 12.4rem;
height: auto;
display: block;
}
.weixin {
float: right;
}
.weixin:after {
content: '微信';
display: block;
width: 100%;
height: 4rem;
text-align: center;
font-size: 1.618rem;
font-weight: bold;
line-height: 4rem;
}
.weibo, .weixin {
margin: 2rem 0 1rem;
}
/*菜单*/
.menu {
width: 22rem;
height: 70rem;
position: absolute;
top: 0;
left: -25.6rem;
z-index: 20;
background-color: #f2f4f4;
/*-webkit-transform: translate3d(-25.6rem,0,0);*/
/*-webkit-transition: -webkit-transform 1s ease-in-out .1s;*/
}
.menu.transition_menu {
-webkit-transform: translate3d(0rem, 0, 0);
}
.menu_logo {
width: 11rem;
height: 4.8rem;
background: url("../images/logo.png") no-repeat;
background-size: 100%;
margin: 2rem;
}
.menu_li {
width: 80%;
height: 5.12rem;
border-bottom: 0.1rem solid #a9aaaa;
padding-left: 20%;
font-size: 1.536rem;
line-height: 5.12rem;
color: #000000;
font-weight: bold;
position: relative;
}
.menu_li1:before {
content: "";
display: block;
width: 1.7rem;
height: 1.5rem;
background: url("../images/menu_icon1.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.8rem;
left: 2.5rem;
}
.menu_li2:before {
content: "";
display: block;
width: 1.5rem;
height: 1.5rem;
background: url("../images/menu_icon2.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.9rem;
left: 2.5rem;
}
.menu_li3:before {
content: "";
display: block;
width: 1.25rem;
height: 1.75rem;
background: url("../images/menu_icon3.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.6rem;
left: 2.8rem;
}
.menu_li4:before {
content: "";
display: block;
width: 1.5rem;
height: 1.2rem;
background: url("../images/menu_icon4.png") no-repeat;
background-size: 100%;
position: absolute;
top: 2rem;
left: 2.5rem;
}
.menu_li5:before {
content: "";
display: block;
width: 1rem;
height: 1.6rem;
background: url("../images/menu_icon5.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.8rem;
left: 2.8rem;
}
.menu_li6:before {
content: "";
display: block;
width: 1.6rem;
height: 1.3rem;
background: url("../images/menu_icon6.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.8rem;
left: 2.5rem;
}
.menu_li7:before {
content: "";
display: block;
width: 1.5rem;
height: 1.5rem;
background: url("../images/menu_icon7.png") no-repeat;
background-size: 100%;
position: absolute;
top: 1.8rem;
left: 2.5rem;
}
.menu_li11:before {
background: url("../images/menu_icon11.png") no-repeat;
background-size: 100%;
}
.menu_li22:before {
background: url("../images/menu_icon22.png") no-repeat;
background-size: 100%;
}
.menu_li33:before {
background: url("../images/menu_icon33.png") no-repeat;
background-size: 100%;
}
.menu_li44:before {
background: url("../images/menu_icon44.png") no-repeat;
background-size: 100%;
}
.menu_li55:before {
background: url("../images/menu_icon55.png") no-repeat;
background-size: 100%;
}
.menu_li66:before {
background: url("../images/menu_icon66.png") no-repeat;
background-size: 100%;
}
.menu_li77:before {
background: url("../images/menu_icon77.png") no-repeat;
background-size: 100%;
}
/*关于我们*/
.about_vidoe {
width: 100%;
height: auto;
}
.about_join {
width: 100%;
height: 10rem;
background-color: #f1f1f1;
position: relative;
}
.btn_join {
width: 19rem;
height: 4rem;
text-align: center;
background-color: #06b4b3;
color: #ffffff;
font-size: 1.28rem;
line-height: 4rem;
position: relative;
top: 2.8rem;
left: 5rem;
}
/*商店*/
.shop_title_p {
width: 100%;
height: 3rem;
line-height: 3rem;
color: #000000;
font-size: 1.8775rem;
text-align: center;
margin: 3rem auto;
font-weight: bold;
}
.btn_shop {
width: 4.2rem;
height: 4.2rem;
border: 0.1rem solid #dcdcdc;
border-radius: 100%;
}
.shop_ul {
width: 100%;
height: 4.2rem;
margin: 2rem auto;
}
.shop_ul li {
width: 50%;
height: 4.2rem;
list-style: none;
float: left;
position: relative;
}
.shop_left {
position: absolute;
right: 0.5rem;
}
.shop_left:after {
content: "";
display: block;
width: 0.8rem;
height: 0.8rem;
border-top: 0.3rem solid #c1c1c1;
border-right: 0.3rem solid #c1c1c1;
-webkit-transform: rotate(-135deg);
position: absolute;
top: 1.6rem;
left: 1.6rem;
}
.shop_right {
position: absolute;
left: 0.5rem;
}
.shop_right:after {
content: "";
display: block;
width: 0.8rem;
height: 0.8rem;
border-top: 0.3rem solid #c1c1c1;
border-right: 0.3rem solid #c1c1c1;
-webkit-transform: rotate(45deg);
position: absolute;
top: 1.6rem;
right: 1.6rem;
}
.index_content_cont div {
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: 100%;
background-color: #ed020e;
margin-left: 0.2rem;
position: relative;
}
.index_content_cont div:after {
content: "";
display: block;
width: 0.2rem;
height: 0.2rem;
border-top: 0.15rem solid #ffffff;
border-right: 0.15rem solid #ffffff;
-webkit-transform: rotate(45deg);
position: absolute;
top: 0.3rem;
left: 0.25rem;
}
/*
.slider_shop_box{
width: 100%;
overflow: hidden;
}
*/
.slider_shop {
width: 100%;
height: auto;
/* float: left;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-transform: translate3d(-6.5rem,0,0);
overflow: hidden;*/
}
/*
.slider_shop li{
width: 20rem; !important;
height: 100%; !important;
overflow: hidden;
text-align: center;
list-style: none;
margin: 0 1rem;
}
*/
.slider_shop li p {
font-size: 1.878rem;
font-weight: bold;
padding: 1rem 0;
}
/*电影*/
.movie_ul {
overflow: hidden;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
}
.movie_ul > li {
width: 100%;
height: 6.4rem;
border-bottom: 0.1rem solid #e3e3e3;
position: relative;
}
.movie_ul > li:after {
content: '';
display: block;
width: 0.5rem;
height: 0.5rem;
border-right: 0.25rem solid #e3e3e3;
border-top: 0.25rem solid #e3e3e3;
-webkit-transform: rotate(45deg);
position: absolute;
right: 1.5rem;
top: 3rem;
}
.movie_ul li div {
padding: 1.3rem 2rem;
}
.movie_ul li div > p {
font-size: 1.024rem;
color: #000000;
text-align: left;
padding: 0.5rem;
margin-left: .8rem;
float: left;
width: 12rem;
line-height: 1.5;
}
.movie_icon {
width: 9.5rem;
overflow: hidden;
float: left;
}
.movie_icon li {
float: left;
width: 4.75rem;
height: 3.85rem;
position: relative;
}
.movie_icon li p:first-child {
font-size: 1.28rem;
color: #ffffff;
position: absolute;
top: 0.4rem;
left: 1rem;
}
.movie_icon li p:last-child {
font-size: 0.8535rem;
color: #bbe4f5;
position: absolute;
bottom: 0.5rem;
right: 0.8rem;
}
.movie_icon li:first-child {
background-color: #06b4b3;
position: relative;
}
.movie_icon li:first-child:after {
content: "";
width: 4rem;
height: 1px;
background-color: #e3e3e3;
-webkit-transform: rotate(-45deg);
position: absolute;
top: 1.8rem;
left: 0.5rem;
}
/*定制*/
.custom_ul {
overflow: hidden;
height: 6rem;
padding-bottom: 2rem;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.custom_li {
width: 33%;
height: 100%;
list-style: none;
float: left;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: relative;
}
.custom_li img {
display: block;
position: relative;
margin: 0;
}
.Sweibo {
width: 3.5rem;
height: auto;
}
.custom_li_weibo:after {
content: "微 博";
display: block;
width: 100%;
height: 2rem;
line-height: 2rem;
font-size: 0.768rem;
text-align: center;
position: absolute;
bottom: -1rem;
left: 0;
font-weight: bold;
}
.Sweixin {
width: 4rem;
height: auto;
}
.custom_li_weixin:after {
content: "微 信";
display: block;
width: 100%;
height: 2rem;
line-height: 2rem;
font-size: 0.768rem;
text-align: center;
position: absolute;
bottom: -1rem;
left: 0;
font-weight: bold;
}
.Smtime {
width: 6rem;
height: auto;
}
.custom_li_mtime:after {
content: "时光网";
display: block;
width: 100%;
height: 2rem;
line-height: 2rem;
font-size: 0.768rem;
text-align: center;
position: absolute;
bottom: -1rem;
left: 0;
font-weight: bold;
}
.custom_li_order {
border-left: 0.1rem solid #c1c1c1;
border-right: 0.1rem solid #c1c1c1;
}
/*文本头部*/
.center_bg {
width: 100%;
height: 6.65rem;
background: url("../images/center_bg.jpg") no-repeat;
background-size: cover;
display: -webkit-box;
/*-webkit-box-pack: center;*/
-webkit-box-align: center;
-webkit-box-orient: horizontal;
}
.center_p {
font-size: 1.8rem;
font-weight: bold;
padding-left: 1.75rem;
color: #ffffff;
width: 100%;
}
.center_p span {
font-size: 0.6825rem;
color: #ffffff;
font-weight: normal;
}
.center_content {
height: auto;
background-color: #f9f9f9;
padding: 2.5rem 1.75rem 1rem;
margin-top: 2rem;
position: relative;
border: 0.1rem solid #ececec;
}
.padding_bottom {
padding-bottom: 2rem;
}
/*轮播*/
.swipe_box {
width: 100%;
height: 12.55rem;
overflow: hidden;
position: relative;
}
.swipe_main {
overflow: hidden;
position: relative;
list-style: none;
}
.swipe_main img {
width: 100%;
height: 12.55rem;
position: relative;
float: left;
display: inline-block;
}
.swipe_point {
overflow: hidden;
position: absolute;
bottom: 1rem;
right: 1rem;
}
.swipe_point li {
width: 1rem;
height: 1rem;
background-color: #ffffff;
border-radius: 100%;
float: left;
margin-right: 0.5rem;
}
#swipe_point_hover {
background-color: #ed020e;
}
.b_block {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 100;
}
.b_block2 {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 100;
}
.menu_ul li:after {
content: "";
display: block;
width: 1rem;
height: 1rem;
border-top: 2px solid #a1a1a1;
border-right: 2px solid #a1a1a1;
-webkit-transform: rotate(45deg);
position: absolute;
right: 2.2rem;
top: 1.9rem;
}
/**banner**/
.d_banner {
position: relative;
}
.d_banner .d_bannerwrap {
position: relative;
overflow: hidden;
}
.d_bannerwrap li {
position: relative;
overflow: hidden;
}
.d_bannerwrap li .h_bannernr {
left: 1.6rem;
top: 1.4rem;
width: 100%;
z-index: 2;
}
.text_center {
text-align: center;
color: #ed020e;
}
/*
.h_bannernr dl dt a,.h_bannernr dd a{font-weight:bold; color:#000;font-size:1rem;padding:1rem 0 1rem 1rem; display:block;}
.h_bannernr {
display:block;
width: 100%;
}
.h_bannernr dl dt a, .h_bannernr dl dd a {
width: 100%;
height: 5.12rem;
border-bottom: 0.1rem solid #a9aaaa;
padding-left: 20%;
font-size: 1.536rem;
line-height: 5.12rem;
color: #000000;
font-weight: bold;
text-decoration:none;
}
*/
/*
.h_bannernr dl dd.last a{border:0;}
.h_bannernr dl dt a{border-top:0;}
.h_bannernr dl dt em,.h_bannernr dd em{font-size:1rem;position:absolute;left:0;top:1rem;text-shadow:0 1px 2px #000;}
*/
.banner_dot {
position: absolute;
right: 1rem;
top: 12rem;
z-index: 2;
}
.banner_dot a {
width: 0.8rem;
height: 0.8rem;
display: inline-block;
border-radius: 0.5rem;
background: #fff;
margin-right: .4rem;
}
.banner_dot a.on {
background: #ed020e;
}
.slider_shop li {
width: 20rem;
!important;
height: 100%;
overflow: hidden;
text-align: center;
list-style: none;
margin: 0 1rem;
}
.slider_role {
text-align: center;
}
/****************************视频播放 begin**********************************/
.ele_videobg {
background: #000;
opacity: .6;
filter: alpha(opacity=60);
width: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.ele_videoinner {
width: 1000px;
height: 563px;
position: fixed;
left: 50%;
margin-left: -500px;
top: 50%;
margin-top: -281px;
z-index: 101;
_position: absolute;
_margin-top: 0
}
.ele_videoinner .close {
background: url(../images/player_close.png) no-repeat 0 0px;
width: 45px;
height: 45px;
position: absolute;
right: 20px;
top: 30px;
z-index: 3;
font-size: 0;
line-height: 0;
overflow: hidden;
cursor: pointer;
}
/****************************视频播放 end**********************************/
.transition4 {
-webkit-transition: .4s all;
-moz-transition: .4s all;
-o-transition: .4s all;
-ms-transition: .4s all;
transition: .4s all;
}
.transition5 {
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
}
a {
color: #000000;
text-decoration: none
}
a:hover {
color: #000000;
text-decoration: none
}
.video_btn {
width: 4.5rem;
height: 4.5rem;
position: absolute;
left: 50%;
top: 50%;
margin-left: -2.3rem;
margin-top: -2.4rem;
z-index: 2;
background: url(../images/a_video.png) no-repeat;
background-size: 100% auto;
}
.fc {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.fc_bg {
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
position: absolute;
z-index: 999999;
}
.fc_text {
width: 80%;
height: 12rem;
background-color: #fff;
border-radius: 10px;
position: relative;
z-index: 1000000;
line-height: 1.5;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
font-size: 1.5rem;
padding: 10px 2rem;
}
.fc_text a {
color: #ed020e;
text-decoration: underline;
}
.fc_close {
width: 2.5rem;
height: 2.5rem;
background-color: #9B9B9B;
border-radius: 100%;
position: absolute;
top: 0.5rem;
right: 1rem;
}
.fc_close:before {
-webkit-transform: rotate(45deg);
}
.fc_close:after {
-webkit-transform: rotate(-45deg);
}
.fc_close:before, .fc_close:after {
content: "";
display: block;
width: 2rem;
height: 1px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -0.5px;
margin-left: -1rem;
}
.padding3px {
padding: 1px;
}
/*相关视频请点击*/
.video_about {
margin-top: 2rem;
}
.video_about p {
font-weight: 700;
font-size: 1.2rem;
text-align: left;
display: -webkit-box;
margin-bottom: 1rem;
}
.video_about p img {
width: auto;
height: 1.2rem;
}
.video_about .a_video {
width: 100%;
overflow: hidden;
margin-top: 1rem;
}
.a_video a {
width: 12%;
margin-right: 4.66%;
float: left;
}
.a_video a img {
width: 100%;
height: auto;
}
.law_content_p a {
text-decoration: underline;
color: blue;
}
.slider_store {
border: 1px solid #b2b2b2;
}
.slider_move {
border: 1px solid #b2b2b2;
}
.slider_game {
border: 1px solid #b2b2b2;
}
.index_content_border {
border-bottom: 1px solid #e3e3e3;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
}
.index_content_border1 {
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
}
.index_content_contlin {
-webkit-line-clamp: 12 !important;
}
.codebox {
background: #fff;
border: 1px solid #ececec;
border-radius: 5px;
width: 18.2rem;
height: 24rem;
position: fixed;
left: 50%;
top: 50%;
margin-left: -9rem;
margin-top: -12rem;
z-index: 101;
}
.codebox dl {
margin: auto;
padding: 1rem 0 0;
width: 14.5rem;
}
.codebox dl dt {
width: 14.6rem;
margin-bottom: 2rem;
}
.codebox dl dt img {
width: 100%;
height: auto;
display: block;
}
.codebox dd p {
font-size: 1.4rem;
font-weight: bold;
line-height: 1.2;
padding: 0.5rem 0 0;
text-align: center;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
