2018-01-02 1st aaaogasa Follow 2018-01-03 00:53:36 License: MIT License Fork1 Fav0 View214 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 21 lines HTML 88 lines CSS 168 lines 2018-01-02 1st jQuery v1.8.3 today = new Date(); today_year = today.getFullYear(); today_month = today.getMonth()+1; today_date = today.getDate(); today_hour = today.getHours(); today_minute = today.getMinutes(); today_second = today.getSeconds(); s_day = new Date('2017/08/08 20:59:30'); e_day = new Date('2018/01/08 23:59:59'); if (s_day < today && today < e_day ) { document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/sidejs/min_haibara0109.js"></script>'); } else { document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/sidejs/min_haibara.js"></script>'); } document.write(); /* document.write('<style type="text/css">body{background:url("https://side-bar.click/data/14aaa/common/bg/bg.png"),url("http://www.p-world.co.jp/shizuoka/img/019155_04.jpg");background-repeat: no-repeat,repeat;background-position:top center,center top;} </style>'); */ <div style="position:fixed;bottom:0px;left:0px;"></div> <div id="table"><script type="text/javascript" src="https://side-bar.click/data/14aaa/common/sidejs/a_haibara.js"></script><div id="side1"></div> <div id="side2"></div> document.write('<link href="https://side-bar.click/data/14aaa/common/sidejs/01.css" rel="stylesheet" type="text/css">'); document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/slick/jquery-1.8.2.min.js"></script>'); document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/slick/jquery-2.1.4.min.js"></script>'); document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/slick/slick.min.js"></script>'); document.body.style.backgroundAttachment = 'fixed'; window.onload = function() { var side1 = document.getElementById('side1'); if (side1) { side1.innerHTML = '\ <ul style="position:absolute;top:260px;right:60px;margin:0px 0;list-style-type:none;">\ <li style="margin:0px;">\ <a href="#" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/01.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#01" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/02.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#02" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/03.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#03" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/04.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#04" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/05.png" width="180" alt="" />\ </a>\ </li>\ </ul>\ '; } var side2 = document.getElementById('side2'); if (side2) { side2.innerHTML = '\ <div class="slider" style="position:absolute;top:251px;left:60px;width:180px;">\ <div><img src="https://side-bar.click/data/14aaa/haibara/img/20171227_1.jpg" width="180px" /></div>\ <div><img src="https://side-bar.click/data/14aaa/haibara/img/20171227_3.jpg" width="180px" /></div>\ <div><img src="https://side-bar.click/data/14aaa/haibara/img/20171227_4.jpg" width="180px" /></div>\ </div>\ <div class="icon" style="position:absolute;top:555px;right:43px;margin:0px;width:200px; 0;">\ </div>\ </div>\ '; } $(function(){ $('.slider').slick({ autoplay: false, autoplaySpeed: 2000, centerMode: true, centerPadding: '0px', }); }); $(function(){ $('.icon').slick({ autoplay: false, centerMode: true, centerPadding: '0px', slidesToShow: 2, }); }); jQuery.fn.rollover = function(suffix) { suffix = suffix || '_on'; var check = new RegExp(suffix + '\\.\\w+$'); return this.each(function() { var img = jQuery(this); var src = img.attr('src'); if (check.test(src)) return; var _on = src.replace(/\.\w+$/, suffix + '$&'); jQuery('<img>').attr('src', _on); img.hover( function() { img.attr('src', _on); }, function() { img.attr('src', src); } ); }); }; }; 2018-01-02 1st @charset "utf-8"; /* CSS Document */] #table { border-collapse: collapse; border-spacing: 0; } a:link { color: blue } #side1 { top: 0px; position: fixed; margin-left:-300px; height: 1100px; width: 300px; background:url(https://side-bar.click/data/14aaa/common/img/left.png) 0 0 no-repeat; } #side2 { top: -10px; position: fixed; margin-left:710px; height: 1100px; width: 300px; margin-top: 10px; background:url(https://side-bar.click/data/14aaa/common/img/right.png) 0 0 no-repeat; } /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* menu */ ul#menu{ list-style:none; } ul#menu li{ margin-bottom:10px; } img{ border:none; } a:focus { /*FireFox?E?p*/ outline: none; } a img{ /*FireFox?E?p*/ border: none; body { background: #ffd; font: 30px sans-serif; today = new Date(); today_year = today.getFullYear(); today_month = today.getMonth()+1; today_date = today.getDate(); today_hour = today.getHours(); today_minute = today.getMinutes(); today_second = today.getSeconds(); s_day = new Date('2017/08/08 20:59:30'); e_day = new Date('2018/01/08 23:59:59'); if (s_day < today && today < e_day ) { document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/sidejs/min_haibara0109.js"></script>'); } else { document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/sidejs/min_haibara.js"></script>'); } document.write(); /* document.write('<style type="text/css">body{background:url("https://side-bar.click/data/14aaa/common/bg/bg.png"),url("http://www.p-world.co.jp/shizuoka/img/019155_04.jpg");background-repeat: no-repeat,repeat;background-position:top center,center top;} </style>'); */ <div style="position:fixed;bottom:0px;left:0px;"></div> <div id="table"><script type="text/javascript" src="https://side-bar.click/data/14aaa/common/sidejs/a_haibara.js"></script><div id="side1"></div> <div id="side2"></div> document.write('<link href="https://side-bar.click/data/14aaa/common/sidejs/01.css" rel="stylesheet" type="text/css">'); document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/slick/jquery-1.8.2.min.js"></script>'); document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/slick/jquery-2.1.4.min.js"></script>'); document.write('<script type="text/javascript" src="https://side-bar.click/data/14aaa/common/slick/slick.min.js"></script>'); document.body.style.backgroundAttachment = 'fixed'; window.onload = function() { var side1 = document.getElementById('side1'); if (side1) { side1.innerHTML = '\ <ul style="position:absolute;top:260px;right:60px;margin:0px 0;list-style-type:none;">\ <li style="margin:0px;">\ <a href="#" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/01.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#01" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/02.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#02" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/03.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#03" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/04.png" width="180" alt="" />\ </a>\ </li>\ <li style="margin:0px;">\ <a href="#04" style="display:block">\ <img src="https://side-bar.click/data/14aaa/common/img/05.png" width="180" alt="" />\ </a>\ </li>\ </ul>\ '; } var side2 = document.getElementById('side2'); if (side2) { side2.innerHTML = '\ <div class="slider" style="position:absolute;top:251px;left:60px;width:180px;">\ <div><img src="https://side-bar.click/data/14aaa/haibara/img/20171227_1.jpg" width="180px" /></div>\ <div><img src="https://side-bar.click/data/14aaa/haibara/img/20171227_3.jpg" width="180px" /></div>\ <div><img src="https://side-bar.click/data/14aaa/haibara/img/20171227_4.jpg" width="180px" /></div>\ </div>\ <div class="icon" style="position:absolute;top:555px;right:43px;margin:0px;width:200px; 0;">\ </div>\ </div>\ '; } $(function(){ $('.slider').slick({ autoplay: false, autoplaySpeed: 2000, centerMode: true, centerPadding: '0px', }); }); $(function(){ $('.icon').slick({ autoplay: false, centerMode: true, centerPadding: '0px', slidesToShow: 2, }); }); jQuery.fn.rollover = function(suffix) { suffix = suffix || '_on'; var check = new RegExp(suffix + '\\.\\w+$'); return this.each(function() { var img = jQuery(this); var src = img.attr('src'); if (check.test(src)) return; var _on = src.replace(/\.\w+$/, suffix + '$&'); jQuery('<img>').attr('src', _on); img.hover( function() { img.attr('src', _on); }, function() { img.attr('src', src); } ); }); }; }; @charset "utf-8"; /* CSS Document */] #table { border-collapse: collapse; border-spacing: 0; } a:link { color: blue } #side1 { top: 0px; position: fixed; margin-left:-300px; height: 1100px; width: 300px; background:url(https://side-bar.click/data/14aaa/common/img/left.png) 0 0 no-repeat; } #side2 { top: -10px; position: fixed; margin-left:710px; height: 1100px; width: 300px; margin-top: 10px; background:url(https://side-bar.click/data/14aaa/common/img/right.png) 0 0 no-repeat; } /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* menu */ ul#menu{ list-style:none; } ul#menu li{ margin-bottom:10px; } img{ border:none; } a:focus { /*FireFox?E?p*/ outline: none; } a img{ /*FireFox?E?p*/ border: none; body { background: #ffd; font: 30px sans-serif; use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author aaaogasa Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/cbSL/js"></script> css Discussion Questions on this code? Tags css Forked sort by latest page views favorite forked forked: 2018-01-02 1st aaaogasa 00 163 22/88/168 css