百科沙盒：修订间差异

添加的内容删除的内容

行内

2023年6月29日 (四) 20:53的最新版本

测试人: _Wr_（留言）

<html>

   margin: 20px auto;
   position: relative;
   border: 10px solid #fff;
   width: 800px;
   height: 450px;
   -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
           border-radius: 5px;
   -webkit-box-shadow: 0 0 2px #999;
      -moz-box-shadow: 0 0 2px #999;
           box-shadow: 0 0 2px #999;

}

.jcarousel-wrapper .photo-credits {

   position: absolute;
   right: 15px;
   bottom: 0;
   font-size: 13px;
   color: #fff;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
   opacity: .66;

}

.jcarousel-wrapper .photo-credits a {

   color: #fff;

}

/** Carousel **/

.jcarousel {

   position: relative;
   overflow: hidden;

}

.jcarousel ul {

   width: 10000em;
   position: relative;
   list-style: none;
   margin: 0;
   padding: 0;

}

.jcarousel li {

   float: left;

}

/** Carousel Controls **/

.jcarousel-control-prev, .jcarousel-control-next {

   position: absolute;
   top: 200px;
   width: 30px;
   height: 30px;
   text-align: center;
   background: #4E443C;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 0 1px #000;
   font: 24px/27px Arial, sans-serif;
   -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
           border-radius: 30px;
   -webkit-box-shadow: 0 0 2px #999;
      -moz-box-shadow: 0 0 2px #999;
           box-shadow: 0 0 2px #999;

}

.jcarousel-control-prev {

   left: -50px;

}

.jcarousel-control-next {

   right: -50px;

}

.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {

   display: block;

}

.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {

   opacity: .5;
   cursor: default;

}

/** Carousel Pagination **/

.jcarousel-pagination {

   position: absolute;
   bottom: 0;
   left: 15px;

}

.jcarousel-pagination a {

   text-decoration: none;
   display: inline-block;
   
   font-size: 11px;
   line-height: 14px;
   min-width: 14px;
   
   background: #fff;
   color: #4E443C;
   border-radius: 14px;
   padding: 3px;
   text-align: center;
   
   margin-right: 2px;
   
   opacity: .75;

}

.jcarousel-pagination a.active {

   background: #4E443C;
   color: #fff;
   opacity: 1;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);

} </style> <script>

   (function($) {
       $(function() {
           $('.jcarousel').jcarousel();

           $('.jcarousel-control-prev')
               .on('jcarouselcontrol:active', function() {
                   $(this).removeClass('inactive');
               })
               .on('jcarouselcontrol:inactive', function() {
                   $(this).addClass('inactive');
               })
               .jcarouselControl({
                   target: '-=1'
               });

           $('.jcarousel-control-next')
               .on('jcarouselcontrol:active', function() {
                   $(this).removeClass('inactive');
               })
               .on('jcarouselcontrol:inactive', function() {
                   $(this).addClass('inactive');
               })
               .jcarouselControl({
                   target: '+=1'
               });

           $('.jcarousel-pagination')
               .on('jcarouselpagination:active', 'a', function() {
                   $(this).addClass('active');
               })
               .on('jcarouselpagination:inactive', 'a', function() {
                   $(this).removeClass('active');
               })
               .jcarouselPagination();
       });
   })(jQuery);

</script>

<img src="https://sonicpedia.org/images/a/ac/SonicPrime_Banner_800x450.png" width="800" height="450" alt="">
<img src="https://sonicpedia.org/images/6/66/SonicFrontiers_Banner_800x450.png" width="800" height="450" alt="">
<img src="https://sonicpedia.org/images/b/bd/SonicForcesMobile_Banner_800x450.png" width="800" height="450" alt="">

   <a href="#" class="jcarousel-control-prev">‹</a>
   <a href="#" class="jcarousel-control-next">›</a>

</html>

@@ 第1行： / 第1行： @@
 <!--<p>本页面仅作测试使用，当前测试人：(请打三个"<nowiki>~~~</nowiki>进行确认，测试完后请删除除本段外所有内容")</p>-->
-测试人: Wr
+测试人: [[User:Wr|_Wr_]]（[[User talk:Wr|留言]]）
-__NOCC__
+<html>
-{{Infobox 角色
-| 图片文件名=TSR_Sonic.png
+<style>
-| 名称=索尼克
+.jcarousel-wrapper {
-| 种类=刺猬
+    margin: 20px auto;
-| 英文名=Sonic the Hedgehog
+    position: relative;
-| 日文名=ソニック・ザ・ヘッジホッグ ''Sonikku za Hejjihoggu''
+    border: 10px solid #fff;
-| 昵称=
+    width: 800px;
-*少爷
+    height: 450px;
-*-{音速小子}- (台)
+    -webkit-border-radius: 5px;
-*-{超音鼠}- (港)
+       -moz-border-radius: 5px;
-*...
+            border-radius: 5px;
-| 性别=男
+    -webkit-box-shadow: 0 0 2px #999;
-| 身高=100cm
+       -moz-box-shadow: 0 0 2px #999;
-| 体重=35kg
+            box-shadow: 0 0 2px #999;
-| 年龄=15
+}
-| 生日=6月30日
-| 出生地=圣诞岛
-| 日语配音=[[金丸淳一]]
+.jcarousel-wrapper .photo-credits {
-| 英语配音=[[Roger Craig Smith]]
+    position: absolute;
-| 国语配音=
+    right: 15px;
-| 立场=正义
+    bottom: 0;
-| 毛色=蓝色
+    font-size: 13px;
-| 皮肤=粉色
+    color: #fff;
-| 瞳孔=绿色 <small>原黑色</small>
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
-| 着装=
+    opacity: .66;
-*白色手套
+}
-*带有红色条纹和金属扣子的红色鞋子
-| 能力型=速度型
+.jcarousel-wrapper .photo-credits a {
-| 首次登场=《刺激赛车》''Rad Mobile''
+    color: #fff;
-| 出场游戏=几乎所有《刺猬索尼克》系列游戏
+}
-| 所属团队=索尼克队
-| 奔跑速度=超音速
+/** Carousel **/
-| 特殊技能=速度
-| 创作者=大岛直人
+.jcarousel {
-| 设计师=
+    position: relative;
-*大岛直人
+    overflow: hidden;
-*渡辺明
+}
-*上川祐司
-}}
+.jcarousel ul {
+    width: 10000em;
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.jcarousel li {
+    float: left;
+}
+/** Carousel Controls **/
+.jcarousel-control-prev,
+.jcarousel-control-next {
+    position: absolute;
+    top: 200px;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    background: #4E443C;
+    color: #fff;
+    text-decoration: none;
+    text-shadow: 0 0 1px #000;
+    font: 24px/27px Arial, sans-serif;
+    -webkit-border-radius: 30px;
+       -moz-border-radius: 30px;
+            border-radius: 30px;
+    -webkit-box-shadow: 0 0 2px #999;
+       -moz-box-shadow: 0 0 2px #999;
+            box-shadow: 0 0 2px #999;
+}
+.jcarousel-control-prev {
+    left: -50px;
+}
+.jcarousel-control-next {
+    right: -50px;
+}
+.jcarousel-control-prev:hover span,
+.jcarousel-control-next:hover span {
+    display: block;
+}
+.jcarousel-control-prev.inactive,
+.jcarousel-control-next.inactive {
+    opacity: .5;
+    cursor: default;
+}
+/** Carousel Pagination **/
+.jcarousel-pagination {
+    position: absolute;
+    bottom: 0;
+    left: 15px;
+}
+.jcarousel-pagination a {
+    text-decoration: none;
+    display: inline-block;
+    font-size: 11px;
+    line-height: 14px;
+    min-width: 14px;
+    background: #fff;
+    color: #4E443C;
+    border-radius: 14px;
+    padding: 3px;
+    text-align: center;
+    margin-right: 2px;
+    opacity: .75;
+}
+.jcarousel-pagination a.active {
+    background: #4E443C;
+    color: #fff;
+    opacity: 1;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
+}
+</style>
+<script>
+    (function($) {
+        $(function() {
+            $('.jcarousel').jcarousel();
+            $('.jcarousel-control-prev')
+                .on('jcarouselcontrol:active', function() {
+                    $(this).removeClass('inactive');
+                })
+                .on('jcarouselcontrol:inactive', function() {
+                    $(this).addClass('inactive');
+                })
+                .jcarouselControl({
+                    target: '-=1'
+                });
+            $('.jcarousel-control-next')
+                .on('jcarouselcontrol:active', function() {
+                    $(this).removeClass('inactive');
+                })
+                .on('jcarouselcontrol:inactive', function() {
+                    $(this).addClass('inactive');
+                })
+                .jcarouselControl({
+                    target: '+=1'
+                });
+            $('.jcarousel-pagination')
+                .on('jcarouselpagination:active', 'a', function() {
+                    $(this).addClass('active');
+                })
+                .on('jcarouselpagination:inactive', 'a', function() {
+                    $(this).removeClass('active');
+                })
+                .jcarouselPagination();
+        });
+    })(jQuery);
+</script>
+<div class="jcarousel-wrapper">
+    <div class="jcarousel">
+        <ul>
+            <li><img src="https://sonicpedia.org/images/a/ac/SonicPrime_Banner_800x450.png" width="800" height="450" alt=""></li>
+            <li><img src="https://sonicpedia.org/images/6/66/SonicFrontiers_Banner_800x450.png" width="800" height="450" alt=""></li>
+            <li><img src="https://sonicpedia.org/images/b/bd/SonicForcesMobile_Banner_800x450.png" width="800" height="450" alt=""></li>
+        </ul>
+    </div>
+    <!-- <p class="photo-credits">
+        Sonicpedia
+    </p> -->
+    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
+    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+    <p class="jcarousel-pagination">
+    </p>
+</div>
+</html>