JavaScript アーカイブ - CodingMania

ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます

yotigory — Thu, 21 Jul 2016 02:28:41 +0000

JSを読み込みます

[main.js]JavaScript

(function($) {

function setimage(){
(function($) {

function setimage(){
// 設定
var height =$(window).height(); // 高さ
var width =$(window).width(); // 幅
var win_ratio = width / height;

$(".Opening").css({"height":height});
$(".Opening ul li").css({"height":height});

if (win_ratio > 1.5){　//画像の比率が大きかったら
  $(".Opening ul li img.Opening__img").css({"width":"100%","height":"auto","margin-left":0});
  var winwidth = $(".Opening").width();
  var imgheight = winwidth*0.66;
  var winheight = $(".Opening").height();
  var imgtopmargin = (imgheight-winheight)/2;
  $(".Opening ul li img.Opening__img").css({"margin-top":-imgtopmargin});
}else if (win_ratio < 1.5){　//画像の比率が小さかったら
  var imgwidth = ((height/800))*1200;
  var winwidth = $(".Opening").width();
  var imgmargin = (winwidth-imgwidth)/2;
  $(".Opening ul li img.Opening__img").css({"width":imgwidth,"height":height,"margin-left":imgmargin,"margin-top":0});
}
}

  //slide
$(function(){
setimage();
var interval = 4000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$(".Opening ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".Opening ul li:first").addClass("active").show();
$(".Opening ul li:first img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
setInterval(function(){
var $active = $(".Opening ul li.active");
var $activeafter = $(".Opening ul li.active:after");
var $next = $active.next("li").length?$active.next("li"):$(".Opening ul li:first");
//$active.fadeOut(fade_speed,function(){$active.removeClass("active");});
$active.fadeOut(fade_speed);
$active.removeClass("active");
$next.fadeIn(fade_speed).addClass("active");
$(".Opening ul li.active img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
},interval);
});
//resi
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        console.log('resized');
        setimage();
    }, 200);
});

})(jQuery);

HTMl

CSS

/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.Opening ul li img.Opening__text{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
  max-width: inherit;
  width: 100%;
  height: auto;
}

投稿ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えますは CodingMania に最初に表示されました。

jQueryで簡単にページ送りを自動で表示します。

yotigory — Wed, 04 Jun 2014 06:08:45 +0000

JSを読み込みます

[pagenav.js]JavaScript

$(function(){
	
// pagenav current
$(function(){
 var id = $(".mod_pagenav").attr("id");
 var current = $(".mod_pagenav ul li."+id);

 //var prev =$();
 $(current).addClass("active");

  if($(current.next("li")).size()){
   var nextlist = current.next("li");
   var nextlink = nextlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav li.linearNum").before('次のページへ>>');
  }

  if($(current.prev("li")).size()){
   var prevlist = current.prev("li");
   var prevlink = prevlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav").prepend('<<前のページへ');  
  }

 });

});

HTMl

var pagenav =''+
''+
''+
'1'+
'2'+
'3'+
'4'+
'5'+
'6'+
'7'+
''+
''
'';
document.write(pagenav);

▼HTMLソース

CSS

/* mod_pagenav */
.mod_pagenav{
 margin:0 auto;
 width:960px;
 margin:20px 0 20px 0!important;
}
.mod_pagenav ul{
 position:relative;
 text-align:center;
}

.mod_pagenav ul li.linearNum ul li{
	display:inline-block;
	border:1px solid #e5e5e5;
	margin:0 5px 0 5px;
}
.mod_pagenav ul li.linearNum ul li.active,
.mod_pagenav ul li.linearNum ul li a:focus{
	background-color:#f2f2f2;
	font-weight:bold;
}
.mod_pagenav ul li a{
	text-align:center;
	display:block;
  width:25px;
  padding:2px 0 3px 0;
  text-decoration:none!important;
}

.mod_pagenav ul li.linearPrev a,
.mod_pagenav ul li.linearNext a{
 width:auto;
}
.mod_pagenav ul li.linearPrev{
 position:absolute;
 top:0;
 left:0px;
 z-index:9999;
}
.mod_pagenav ul li.linearNext{
 position:absolute;
 top:0;
 right:0px;
 z-index:9999;
}

投稿 jQueryで簡単にページ送りを自動で表示します。は CodingMania に最初に表示されました。

carouFredSel[jquery]を使ってタブをクリックできるスライドショー

yotigory — Tue, 12 Nov 2013 07:14:50 +0000

JSを読み込みます

JavaScript

HTMl

CSS

/* carousel
-----------------------------------------*/
.mod_mainslide {
 width:952px;
 margin:50px auto 0 auto;
 border:4px solid #333;
}
.mod_mainslide_wrap {
 position:relative;
 width:952px;
 height:350px;
}
.caroufredsel_wrapper{
 margin-top:0px!important;
}
#carousel ul{
 height:350px;
 overflow:hidden;
}
#carousel li { 
 width:952px;
 display: block;
 float: left;
}
#pager {
 position:absolute;
 top:-49px;
 left:-4px;
}
#pager a {
 float:left;
 width:127px;
 height:45px;
 padding:0 2px 0 0;
 display:block;
}
#pager a.menu01{
	background:transparent url('../img/slide_nav01.png') no-repeat left top;
}
#pager a.menu01.selected{
	background:transparent url('../img/slide_nav01_current.png') no-repeat left top;
}
#pager a.menu02{
	background:transparent url('../img/slide_nav02.png') no-repeat left top;
}
#pager a.menu02.selected{
	background:transparent url('../img/slide_nav02_current.png') no-repeat left top;
}
#pager a.menu03{
	background:transparent url('../img/slide_nav03.png') no-repeat left top;
}
#pager a.menu03.selected{
	background:transparent url('../img/slide_nav03_current.png') no-repeat left top;
}
#pager a.menu04{
	background:transparent url('../img/slide_nav04.png') no-repeat left top;
}
#pager a.menu04.selected{
	background:transparent url('../img/slide_nav04_current.png') no-repeat left top;
}
#pager a.menu05{
	background:transparent url('../img/slide_nav05.png') no-repeat left top;
}
#pager a.menu05.selected{
	background:transparent url('../img/slide_nav05_current.png') no-repeat left top;
}

投稿 carouFredSel[jquery]を使ってタブをクリックできるスライドショーは CodingMania に最初に表示されました。

carouFredSel[jquery]を使ったカルーセル

yotigory — Mon, 11 Nov 2013 07:41:36 +0000

JSを読み込みます

JavaScript

HTMl



文字も入ります
文字も入ります
文字も入ります
文字も入ります
文字も入ります

prev next

CSS

/* carousel
-----------------------------------------*/
.mod_slidepanel {
    margin: 0 auto;
    position: relative;
    width: 990px;
}
#carouselpanel li{
 position:relative;
 width:240px;
  height: 150px;
  margin: 0 10px 0 0;
  background-color: #FFF;
  float: left;
 font-size:93%; /* 12px */
}

#carouselpanel li a{
 display:block;
}
#carouselpanel li a span{
 display:inline-block;
 padding:8px 15px 0 15px;
}
#carouselpanel li a:link    {color:#000; text-decoration:none;}
#carouselpanel li a:visited {color:#000; text-decoration:none;}
#carouselpanel li a:hover   {color:#000; text-decoration:underline;}
#carouselpanel li a:active  {color:#000; text-decoration:underline;}

#panelslide_prev span,
#panelslide_next span{
	display: none;
}
#panelslide_prev,
#panelslide_next{
 display:block;
 width:33px;
 height:55px;
 position:absolute;
 top:40px;
}
#panelslide_prev{
 left:-33px;
	background: url('../img/bg_sprite.png') no-repeat 0px 0px;
}
#panelslide_next{
 left:993px;
	background: url('../img/bg_sprite.png') no-repeat -100px 0px;
}

投稿 carouFredSel[jquery]を使ったカルーセルは CodingMania に最初に表示されました。

carouFredSel[jquery]を使ったページナビ・ページ送りのあるスライドショー

yotigory — Mon, 11 Nov 2013 07:04:23 +0000

JSを読み込みます

JavaScript

HTMl











prev next

CSS

/* carousel
-----------------------------------------*/
#mainslide {
}
#mainslide_wrap {
 position:relative;
 margin:0 auto;
 width:960px;
}
#carousel li {
  float: left;
}
#pager {
	position: absolute;
	z-index:999;
	top: 320px;
	left:0px;
	width: 960px;
	text-align: center;
}
#pager a {
	display: inline-block;
	margin: 0 10px;
	width: 13px;
	height: 13px;
	background: url('../img/bg_sprite.png') no-repeat -200px 0px;
}
#pager a.selected{
	background-position: -200px -13px;
}
#pager a span {
	display: none;
}
#slide_prev span,
#slide_next span{
	display: none;
}
#slide_prev,
#slide_next{
 display:block;
 width:33px;
 height:57px;
 position:absolute;
 top:150px;
}
#slide_prev{
 left:10px;
	background: url('../img/bg_sprite.png') no-repeat 0px 0px;
}
#slide_next{
 left:915px;
	background: url('../img/bg_sprite.png') no-repeat -100px 0px;
}

投稿 carouFredSel[jquery]を使ったページナビ・ページ送りのあるスライドショーは CodingMania に最初に表示されました。

carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー

yotigory — Mon, 11 Nov 2013 05:49:38 +0000

JSを読み込みます

JavaScript

HTMl

CSS

/* slidewrapper */
#slidewrapper {
  position: relative;
  background-color: #fff;
  border: 1px solid #C9CACA;
  width: 719px;
  height: 449px;
  overflow: hidden;
}
#slidewrapper ul li {
  display: block;
  float: left;
}
#images { overflow: hidden; }
#thumbs {
  height: 70px;
  overflow: hidden;
}
#images {
  width: 721px;
  height: 354px;
}
#thumbs { }
#thumbs img {
  width: 110px;
  height: 54px;
  margin: 20px 7px 0 7px;
  cursor: pointer;
}
#thumbs img.selected {
  opacity: 0.8;
  -ms-filter: "alpha( opacity=80 )";
  filter: alpha(opacity=80);
}
#prev {
  width: 15px;
  height: 21px;
  display: block;
  background: transparent url("../img/bg_carousel_right.png") no-repeat 0 0;
  position: absolute;
  left: 695px;
  bottom: 37px;
}
#next {
  width: 15px;
  height: 21px;
  display: block;
  background: transparent url("../img/bg_carousel_left.png") no-repeat 0 0;
  position: absolute;
  left: 15px;
  bottom: 37px;
}

投稿 carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショーは CodingMania に最初に表示されました。

データをclassとjqueryで判定してカテゴリごとに絞り込みます。

yotigory — Tue, 05 Nov 2013 06:22:11 +0000

JSを読み込みます

[tool.js]JavaScript

//check panel
jQuery(document).ready(function($){
$(function(){
	var btn =$(".mod_menu ul li a");	
  btn.click(function(){
	$(".mod_panellist_entry").css("display","none");

	$(btn).removeClass("current");
	$(this).addClass("current");

  //表示
  var id = $(this).attr("id");
  $(".mod_panellist_entry."+id).show("fast");
  });
 });
});

HTMl



すべてを表示
カテゴリ「壱」
カテゴリ「弐」
カテゴリ「参」
カテゴリ「肆」
カテゴリ「伍」




  




カテゴリ「壱」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「弐」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「参」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「肆」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「伍」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「伍」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「肆」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「参」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「弐」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク








カテゴリ「壱」
カテゴリーの説明や文章などが入るとか？
タイトルやリンク

CSS

/* mod_menu
-----------------------------------------*/
.mod_menu{
 margin:10px 0 20px 0;
 width:700px;
 overflow:hidden;
}
.mod_menu ul{
 width:708px;
 margin:0 -8px 0 0;
}
.mod_menu ul li{
 float:left;
 width:108px;
 margin:0 8px 0 0;
 border:solid 1px #FF8000;
 text-align:center;
}
.mod_menu ul li a{
 display:block;
 height:40px;
 line-height:40px;
 background-color:#FFF;
}
.mod_menu ul li a:link.current    {color:#FFF; background-color:#FF8000;}
.mod_menu ul li  a:link    {color:#000; text-decoration:none; background-color:#FFF;}
.mod_menu ul li  a:visited {color:#000; text-decoration:none; background-color:#FFF;}
.mod_menu ul li  a:hover   {color:#FFF; text-decoration:none; background-color:#FF8000;}
.mod_menu ul li  a:active  {color:#000; text-decoration:none; background-color:#FFF;}
 
 

/* mod_panellist
-----------------------------------------*/
.mod_panellist{
 width:780px;
 margin:0 -10px 0 0;
}
.mod_panellist_entry {
 position:relative;
 float:left;
 width:210px;
 padding:8px;
 margin:0 10px 10px 0;
 border:solid 1px #CCCCCC;
}
.mod_panellist_entry_memo {
}
.mod_panellist_entry_memo dl dt{
 position:absolute;
 top:0px;
 left:0px;
 width:85px;
 height:25px;
 line-height:25px;
 font-size:90%;
 text-align:center;
 color:#FFF;
 background-color:#55AA00;
}
.mod_panellist_entry_memo dl dd{
 padding:5px 0 0 0;
 line-height:1.3;
 color:#666;
 font-size:90%;
}
.mod_panellist_entry_memo dl dd.title{
 padding:5px 0 0 0;
 font-weight:bold;
}

投稿データをclassとjqueryで判定してカテゴリごとに絞り込みます。は CodingMania に最初に表示されました。

ロールオーバー時、現在地表示時、画像を切り替えします。

yotigory — Tue, 04 Sep 2012 06:22:58 +0000

JSを読み込みます

[gnavimg.js]JavaScript


$(function(){

 $(".mod_Gnavi006 li:not(.current) a").each(function(){
  var a = $(this);
  var img = a.find("img");
  var src_off = img.attr("src");
  var src_on = src_off.replace(/^(.+)_off(\.[^\.]+)$/,"$1_on$2");

  $("").attr("src",src_on);

  a.bind("mouseenter focus", function(){
		img.attr("src", src_on);
		});

  a.bind("mouseleave blur", function(){
		img.attr("src", src_off);
		});
	});
});

 //current表示
$(function() {
  if ($('.mod_Gnavi006 li').hasClass('current')) {
 $(".mod_Gnavi006 li.current a img").attr("src",$(".mod_Gnavi006 li.current a img").attr("src").replace(/^(.+)_off(\.[^\.]+)$/,"$1_current$2"));
  }
});

HTMl

CSS

.mod_Gnavi006 ul{
	width:616px;
	overflow:hidden;
	position:relative;
}
.mod_Gnavi006 ul li{
	height:45px;
	float:left;
}
.mod_Gnavi006 ul li img{
	display:block; /* IE6隙間防止 */
}
.mod_Gnavi006 ul li a{
	display:block;
}

投稿ロールオーバー時、現在地表示時、画像を切り替えします。は CodingMania に最初に表示されました。

文字サイズ変更ボタン（大・中・小）でフォントサイズを調整します

yotigory — Fri, 31 Aug 2012 07:58:26 +0000

JSを読み込みます

[fontsize.js]JavaScript

jQuery(function($){
  //変数にクッキー名を入れる
  var history = $.cookie('fontSize'); 
  //適用する箇所を指定。今回は部分的に#test内のpに
  var elm = $('body');  
  //変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用
  if(!history){
    elm.addClass('fontS');
    $('#fontS').addClass('active');
  }else{
    elm.addClass(history);
    $('#'+history).addClass('active');
  }  
  //ボタンをクリックしたら実行
  $('li','.mod_headerbox_size').click(function(){    
    //activeでないボタンだった場合のみ動作
    if(!$(this).hasClass('active')){      
      //現在activeのついているclassを削除
      $('.active').removeClass('active');      
      //クリックしたボタンをactive
      $(this).addClass('active');      
      //クリックした要素のID名を変数にセット
      var setFontSize = this.id;      
      //クッキーに変数を保存
      $.cookie('fontSize', setFontSize);      
      //一度classを除去して、変数をclassとして追加
      elm.removeClass().addClass(setFontSize);
    }
  });
});

HTMl

CSS

/* fontsize
-----------------------------------------*/
.fontS { font-size: 75% }
.fontM { font-size: 85% }
.fontL { font-size: 95% }


/* mod_headerbox_size
-----------------------------------------*/
.mod_headerbox_size {
  width: 90px;
  position:relative;
  overflow:hidden;
}
.mod_headerbox_size ul {
}
.mod_headerbox_size ul li {
  float: left;
  width:30px;
  height: 30px;
  overflow: hidden;
}
.mod_headerbox_size ul li span {
  display: block;
  cursor: pointer;
}
.mod_headerbox_size ul li.active span {
  margin-top: -30px;
}
.mod_headerbox_size ul li span:hover{
	margin-top:-30px;
}

投稿文字サイズ変更ボタン（大・中・小）でフォントサイズを調整しますは CodingMania に最初に表示されました。

検索窓をカスタマイズする。

yotigory — Sun, 01 Jul 2012 04:47:43 +0000

JSを読み込みます

[placeholder.js]JavaScript

$(function(){
 $('input#search')
  .focus(function() { $(this).css({
	background:"none"
		}
		) })
  .blur(function() { if ($(this)[0].value == '') { 
	$(this).css({
	 background:"transparent url('img/bg_searchinner.gif') no-repeat 8px 5px"
		}
		) } });
});

HTMl

CSS

/* 
-----------------------------------------*/
/* input[type="search"]reset｜Safari Chrome Mac */
input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
}
input[type="search"]:focus {
	outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
.mod_search p{
	height:31px;
	background:transparent url('img/bg_search.jpg') no-repeat left top;
}
.mod_search form{
	width:270px;
	height:30px;
}
.mod_search input#search{
	width:192px;
	height:31px;
	line-height:30px;
	float:left;
	border:none;
	padding:0 0 0 5px;
	background:transparent url('img/bg_searchinner.gif') no-repeat 8px 5px;
}

.mod_search input#search_btn{
	width:40px;
	height:31px;
	float:left;
}
.mod_search input#search:focus{
	outline:none;　/* Safari Chrome Mac */
}

投稿検索窓をカスタマイズする。は CodingMania に最初に表示されました。