以下是 jquery+css3立体百叶窗切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jquery+css3立体百叶窗切换</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.wiper.css" type="text/css" />
<link rel="stylesheet" href="css/zzsc.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.wiper.js"></script>
<script>
//---------------wiper------------------
$(function() {
$("ul#acordion_main").Wiper();
//easing: 'linear',
//easing: 'ease',
//easing: 'ease-in',
//easing: 'ease-out',
//easing: 'ease-in-out',
//Demonstration1
$("ul#inner_wiper").Wiper({
easing: 'ease-out',
offset: -1,
duration: 2000,
binder: $("#inner_wiper_demo"),
menuColors: [ '#000000', '#333333', '#666666', '#999999', '#cccccc' ]
});
//Demonstration2
$("ul#inner_wiper2").Wiper({
easing: 'ease-out',
offset: -1,
duration: 800,
binder: $("#inner_wiper_demo2"),
menuColors: [ false, false, '#ffd700', '#adff2f', '#4169e1' ],
});
});
</script>
<script>
$(function() {
$("footer #translation_box .ja").click(function() {
$(".ja_box").css("display", "block");
$(".en_box").css("display", "none");
});
$("footer #translation_box .en").click(function() {
$(".ja_box").css("display", "none");
$(".en_box").css("display", "block");
});
});
</script>
</head>
<body>
<article id="test">
<section id="acordion_box">
<ul id="acordion_main">
<li>
<h2>Demo 1</h2>
<section class="sample_text">Demonstration 1</section>
<section id="inner_wiper_demo">
<ul id="inner_wiper">
<li>
<h2>Sample</h2>
<section class="li_sample5 en_box">We will work together to create the site in your desired.</section>
</li>
<li>
<h2>Sample</h2>
<section class="li_sample4 en_box">In addition to the wonderful site in your sense.</section>
</li>
<li>
<h2>Sample</h2>
<section class="li_sample3 en_box">will direct it artistic and dynamic web sites for you.</section>
</li>
<li>
<h2>Sample</h2>
<section class="li_sample2 en_box">This is a demo using<br>
the background-image.</section>
</li>
<li>
<h2>Sample</h2>
<section class="li_sample1" class="en_box">
Wiper-Sample
</section>
</li>
</ul>
</section>
</li>
<li>
<h2>Demo 2</h2>
<section class="sample_text">Demonstration 2</section>
<section id="inner_wiper_demo2">
<ul id="inner_wiper2">
<li>
<h2></h2>
<section class="color">
<section class="color_text">M&Co.</section>
<section id="demo_logo"> <img src="images/demo_logo.png"></section>
</section>
</li>
<li>
<h2></h2>
<section class="color">
<section class="color_text">Red</section>
</section>
</li>
<li>
<h2></h2>
<section class="color">
<section class="color_text">Gold</section>
</section>
</li>
<li>
<h2></h2>
<section class="color">
<section class="color_text">Greenyellow</section>
</section>
</li>
<li>
<h2></h2>
<section class="color">
<section class="color_text">Royalblue</section>
</section>
</li>
<li>
<h2>Filter gallery</h2>
<section class="color">
<section class="color_text">Blueviolet</section>
</section>
</li>
</ul>
</section>
</li>
</ul>
</section>
</article>
</body>
</html>
JS代码(jquery.wiper.js):
/* * jQuery Plugin:dynamic & easy moving menu. for your web site. * Version 1.0.0 * * Copyright (c) 2013 M&Co.Ltd. (http://m-and.co/) * Licensed jointly under the GPL and MIT licenses,* */
(function($){
$.fn.Wiper = function(method){
var window_w = 0;
var window_h = 0;
var menu_num = 0;
var menu_width = 0;
var is_inner = false;
var ua = '';
var methods ={
init:function(options){
var s = this;
s.o = $.extend({
}
,this.Wiper.defaults,options);
ua = window.navigator.userAgent.toLowerCase();
if (s.o.binder != $(window)){
is_inner = true;
s.width(s.parent().width());
s.height(s.parent().height());
var wrap = $('<section id="wiper_wrap"></section>');
wrap.css("overflow","hidden");
s.wrapAll(wrap);
}
window_w = s.o.binder.width();
window_h = s.o.binder.height();
$(window).bind("resize",function(){
window_w = s.o.binder.width();
window_h = s.o.binder.height();
$(s).children("li").each(function(){
if ($(this).hasClass("wiper_open")){
helpers.adjust_contents($(this),s.o);
}
if (window_w < window_h){
$(this).children("h2").width(window_h);
}
else{
$(this).children("h2").width(window_w);
}
}
);
s.width(window_w);
s.height(window_h);
}
);
$(window).resize();
this.each(function(){
var $element = $(this),// reference to the jQuery version of the current DOM element element = this;
// reference to the actual DOM element // code goes here menu_num = $(this).children("li").length;
var li_index = 0;
$(this).children("li").each(function(){
var lh = parseInt($(this).children("h2").css("lineHeight"));
var li = $(this);
li.attr("data-index",li_index) .css("left",(li_index*lh)+"px");
$(this).children("h2").each(function(){
$(this).css("cursor","pointer");
if (s.o.menuColors[li_index] != undefined && s.o.menuColors[li_index] != false){
$(this).css("backgroundColor",s.o.menuColors[li_index]);
}
}
);
if (window_w < window_h){
var padding_right = parseInt($(this).children("h2").css("paddingRight"));
$(this).children("h2").width(window_h);
li.height(window_h + padding_right);
}
else{
li.height(window_w);
}
menu_width = $(this).children("h2").height();
$(this).children("h2").click(function(){
helpers.menu_slide(li,menu_num,s.o);
}
);
li_index++;
}
);
}
);
if (s.o.offset != -1){
setTimeout(function(){
s.children("li").eq(s.o.offset).find("h2").click();
}
,s.o.offsetDelay);
}
return this;
}
,// a public method. for demonstration purposes only - remove it! public_method:function(){
// code goes here}
}
var helpers ={
menu_slide:function(li,menu_num,options){
// code goes here var s = this;
var cur_data_index = Number(li.attr("data-index"));
//if (li.offset().left < (window_w / 2)){
if (!li.hasClass("wiper_open")){
//move right var menu_top = -455;
var menu_rotate = 0;
var next_num = li.nextAll("li").length;
if (li.attr("data-index") != 0){
var menu_translateX = options.binder.width() + cur_data_index * 15 - 250;
var move_width = menu_width * (next_num+1);
if (ua.indexOf("chrome") != -1){
li.css({
'-webkit-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("safari") != -1){
li.css({
'-webkit-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("firefox") != -1){
li.css({
'-moz-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-moz-transition':'-moz-transform '+options.duration+'ms ' + options.easing,'-moz-transform-origin':'550px 225px',}
);
}
else{
li.css({
'transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','transition':'transform '+options.duration+'ms ' + options.easing,'transform-origin':'550px 225px',}
);
}
li.addClass("wiper_open");
}
li.nextAll("li").each(function(){
var menu_translateX = options.binder.width() + (Number($(this).attr("data-index"))) * 15 - 250;
var move_width = menu_width * (menu_num - (Number($(this).attr("data-index"))));
if (ua.indexOf("chrome") != -1){
$(this).css({
'-webkit-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("safari") != -1){
$(this).css({
'-webkit-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("firefox") != -1){
$(this).css({
'-moz-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-moz-transition':'-moz-transform '+options.duration+'ms ' + options.easing,'-moz-transform-origin':'550px 225px',}
);
}
else{
$(this).css({
'transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','transition':'transform '+options.duration+'ms ' + options.easing,'transform-origin':'550px 225px',}
);
}
$(this).addClass("wiper_open");
}
);
}
else{
//move left var prev_num = li.prevAll("li").length;
if (ua.indexOf("chrome") != -1){
li.css({
'-webkit-transform':'translate3d(0px,0px,0) rotate(0deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("safari") != -1){
li.css({
'-webkit-transform':'translate3d(0px,0px,0) rotate(0deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("firefox") != -1){
li.css({
'-moz-transform':'translate3d(0px,0px,0) rotate(0deg)','-moz-transition':'-moz-transform '+options.duration+'ms ' + options.easing,'-moz-transform-origin':'550px 225px',}
);
}
else{
li.css({
'transform':'translate3d(0px,0px,0) rotate(0deg)','transition':'transform '+options.duration+'ms ' + options.easing,'transform-origin':'550px 225px',}
);
}
li.removeClass("wiper_open");
li.prevAll("li").each(function(){
var menu_translateX = 830 + (Number($(this).attr("data-index"))) * 15;
var move_width = menu_width * (Number($(this).attr("data-index")));
if (ua.indexOf("chrome") != -1){
$(this).css({
'-webkit-transform':'translate3d(0px,0px,0) rotate(0deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("safari") != -1){
$(this).css({
'-webkit-transform':'translate3d(0px,0px,0) rotate(0deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("firefox") != -1){
$(this).css({
'-moz-transform':'translate3d(0px,0px,0) rotate(0deg)','-moz-transition':'-moz-transform '+options.duration+'ms ' + options.easing,'-moz-transform-origin':'550px 225px',}
);
}
else{
$(this).css({
'transform':'translate3d(0px,0px,0) rotate(0deg)','transition':'-moz-transform '+options.duration+'ms ' + options.easing,'transform-origin':'550px 225px',}
);
}
$(this).removeClass("wiper_open");
}
);
}
}
,adjust_contents:function(li,options){
//move right var menu_top = -455;
var li_index = li.attr("data-index");
var menu_translateX = options.binder.width() + li_index * 15 - 250;
if (ua.indexOf("chrome") != -1){
li.css({
'-webkit-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("safari") != -1){
li.css({
'-webkit-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-webkit-transition':'-webkit-transform '+options.duration+'ms ' + options.easing,'-webkit-transform-origin':'550px 225px',}
);
}
else if (ua.indexOf("firefox") != -1){
li.css({
'-moz-transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','-moz-transition':'-moz-transform '+options.duration+'ms ' + options.easing,'-moz-transform-origin':'550px 225px',}
);
}
else{
li.css({
'transform':'translate3d('+menu_translateX+'px,'+menu_top+'px,0) rotate(-45deg)','transition':'transform '+options.duration+'ms ' + options.easing,'transform-origin':'550px 225px',}
);
}
}
}
if (methods[method]){
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}
else if (typeof method === 'object' || !method){
return methods.init.apply(this,arguments);
}
else{
$.error( 'Method "' + method + '" does not exist in Wiper plugin!');
}
}
$.fn.Wiper.defaults ={
easing:'cubic-bezier(0,0,0.25,1)',duration:1300,offset:1,offsetDelay:0,binder:$(window),menuColors:[ '#666699','#660066','#20aeb2','#cc99cc','#339999','#228b22' ],}
$.fn.Wiper.settings ={
}
}
)(jQuery);
CSS代码(normalize.css):
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ========================================================================== HTML5 display definitions ========================================================================== */
/** * Correct `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
/** * Correct `inline-block` display not defined in IE 8/9. */
audio,canvas,video{display:inline-block;}
/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]){display:none;height:0;}
/** * Address styling not present in IE 8/9. */
[hidden]{display:none;}
/* ========================================================================== Base ========================================================================== */
/** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change,without disabling * user zoom. */
html{font-family:sans-serif;/* 1 */
-ms-text-size-adjust:100%;/* 2 */
-webkit-text-size-adjust:100%;/* 2 */
}
/** * Remove default margin. */
body{margin:0;}
/* ========================================================================== Links ========================================================================== */
/** * Address `outline` inconsistency between Chrome and other browsers. */
a:focus{outline:thin dotted;}
/** * Improve readability when focused and also mouse hovered in all browsers. */
a:active,a:hover{outline:0;}
/* ========================================================================== Typography ========================================================================== */
/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+,Safari 5,and Chrome. */
h1{font-size:2em;margin:0.67em 0;}
/** * Address styling not present in IE 8/9,Safari 5,and Chrome. */
abbr[title]{border-bottom:1px dotted;}
/** * Address style set to `bolder` in Firefox 4+,Safari 5,and Chrome. */
b,strong{font-weight:bold;}
/** * Address styling not present in Safari 5 and Chrome. */
dfn{font-style:italic;}
/** * Address differences between Firefox and other browsers. */
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
/** * Address styling not present in IE 8/9. */
mark{background:#ff0;color:#000;}
/** * Correct font family set oddly in Safari 5 and Chrome. */
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
/** * Improve readability of pre-formatted text in all browsers. */
pre{white-space:pre-wrap;}
/** * Set consistent quote types. */
q{quotes:"\201C" "\201D" "\2018" "\2019";}
/** * Address inconsistent and variable font size in all browsers. */
small{font-size:80%;}
/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* ========================================================================== Embedded content ========================================================================== */
/** * Remove border when inside `a` element in IE 8/9. */
img{border:0;}
/** * Correct overflow displayed oddly in IE 9. */
svg:not(:root){overflow:hidden;}
/* ========================================================================== Figures ========================================================================== */
/** * Address margin not present in IE 8/9 and Safari 5. */
figure{margin:0;}
/* ========================================================================== Forms ========================================================================== */
/** * Define consistent border,margin,and padding. */
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
/** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend{border:0;/* 1 */
padding:0;/* 2 */
}
/** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+,Safari 5,and Chrome. */
button,input,select,textarea{font-family:inherit;/* 1 */
font-size:100%;/* 2 */
margin:0;/* 3 */
}
/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
button,input{line-height:normal;}
/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome,Safari 5+,and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */
button,select{text-transform:none;}
/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */
cursor:pointer;/* 3 */
}
/** * Re-set default cursor for disabled elements. */
button[disabled],html input[disabled]{cursor:default;}
/** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */
padding:0;/* 2 */
}
/** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */
input[type="search"]{-webkit-appearance:textfield;/* 1 */
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */
box-sizing:content-box;}
/** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
/** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */
textarea{overflow:auto;/* 1 */
vertical-align:top;/* 2 */
}
/* ========================================================================== Tables ========================================================================== */
/** * Remove most spacing between table cells. */
table{border-collapse:collapse;border-spacing:0;}
CSS代码(zzsc.css):
@charset "UTF-8";.sample_text{width:200px;font-size:20px;position:relative;top:5%;left:10%;}
#inner_wiper_demo,#inner_wiper_demo2{width:640px;height:320px;position:relative;top:5%;left:10%;margin-bottom:30px;}
#inner_wiper_demo .li_sample1,#inner_wiper_demo .li_sample2,#inner_wiper_demo .li_sample3,#inner_wiper_demo .li_sample4,#inner_wiper_demo .li_sample5{color:#fff;position:relative;text-shadow:1px 2px 5px #000;opacity:0.7;font-size:13px;}
#inner_wiper_demo ul#inner_wiper li{width:100%;height:376px !important;overflow:hidden;}
#inner_wiper_demo ul#inner_wiper li h2{color:#fff;box-shadow:0px -2px 1px #000;width:346px !important;}
#inner_wiper_demo ul#inner_wiper li:nth-child(1){background:url(../images/demo1_1.jpg);background-repeat:no-repeat;}
#inner_wiper_demo ul#inner_wiper li:nth-child(1) .li_sample5{width:300px;top:250px;left:200px;}
#inner_wiper_demo ul#inner_wiper li:nth-child(2){background:url(../images/demo1_2.png);background-repeat:no-repeat;background-size:contain;}
#inner_wiper_demo ul#inner_wiper li:nth-child(2) .li_sample4{width:300px;top:210px;left:300px;}
#inner_wiper_demo ul#inner_wiper li:nth-child(3){background:url(../images/demo1_3.png);background-repeat:no-repeat;background-size:cover;}
#inner_wiper_demo ul#inner_wiper li:nth-child(3) .li_sample3{left:75px;top:20px;color:#fff;}
#inner_wiper_demo ul#inner_wiper li:nth-child(4){background:url(../images/demo1_4.png);background-repeat:no-repeat;}
#inner_wiper_demo ul#inner_wiper li:nth-child(4) .li_sample2{width:140px;left:80px;top:40px;}
#inner_wiper_demo ul#inner_wiper li:nth-child(5){width:100%;background:url(../images/demo1_5.png);background-repeat:no-repeat;}
#inner_wiper_demo ul#inner_wiper li:nth-child(5) .li_sample1{left:286px;top:5px;color:#fff;width:140px;opacity:0.6;font-size:20px;}
#inner_wiper_demo2{width:640px;height:320px;position:relative;top:5%;left:10%;}
#inner_wiper_demo2 li .color{width:100px;height:20px;position:relative;}
#inner_wiper_demo2 li .color .color_text{width:70px;line-height:20px;padding-left:5px;background:#fff;}
#inner_wiper_demo2 ul#inner_wiper2 li{width:100%;height:376px !important;overflow:hidden;background:none;}
#inner_wiper_demo2 ul#inner_wiper2 li h2{color:#fff;box-shadow:0px -2px 1px #000;width:346px !important;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(1) h2{background:url(../images/demo1.jpg) no-repeat;height:640px;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(1) .color{top:-350px;left:525px;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(1) #demo_logo{position:relative;top:-19px;left:50px;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(1) #demo_logo img{width:19px;height:18px;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(2){left:10px !important;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(2) .color{top:-340px;left:515px;background:#ff0000;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(2) h2{background:url(../images/demo2_2.png);height:630px;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(3){left:25px !important;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(3) .color{top:-325px;left:500px;background:#ffd700;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(3) h2{height:615px;opacity:0.4;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(4){left:50px !important;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(4) .color{top:-300px;left:475px;background:#adff2f;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(4) h2{height:590px;opacity:0.2;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(5){left:83px !important;width:100%;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(5) .color{top:-300px;left:442px;background:#4169e1;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(5) h2{height:590px;opacity:0.6;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(6){left:125px !important;width:100%;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(6) .color{top:-230px;left:400px;background:#8a2be2;}
#inner_wiper_demo2 ul#inner_wiper2 li:nth-child(6) h2{background:#8a2be2;height:520px;opacity:0.3;padding-right:90px;}
html body .en_box{display:block;}
html body .ja_box{display:none;}
html body footer{width:275px;height:50px;position:relative;bottom:45px;float:right;}
html body footer #translation_box{float:right;}
html body footer #translation_box a{color:#191970;text-align:center;margin-right:5px;border:1px solid #778899;width:50px;font-size:10px;background:#fff;float:left;}
html body footer #translation_box a:hover{background:#ccc;}
html body footer #translation_box #copyrights{width:170px;font-size:10px;line-height:30px;clear:both;float:right;}
html body footer #translation_box #translation{position:relative;right:10px;width:115px;height:20px;float:right;}
分享到QQ
分享到微博
微信扫一扫
