ウェブ制作、コーディング初心者のメモ

: jQuery

jQueryで表示・非表示サイドバーを作ってみる

2015/10/29 サイドバー

今回の内容は、クリック操作によってWebページの左側に格納できるサイドバーを作成します。サンプルコード上に詳細をコメントアウトしました。サンプルコードの実行結果はこちら [crayon-69b751b ...

ボタンにカーソルを乗せたとき色々と効果を付けてみる

2015/10/29 ホバー, マウスを乗せた時

今回は、ボタンに色々な効果を付けてみます。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ボタンにホバーの機能を付けてみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <!--
        jquery-ui.jsを読み込まないと
        animate()の箇所でbackgroundプロパティ
        背景色の切り替える処理が動作しない。
    -->
    <style>
        /* ここから 
            全称セレクタで空間をリセット
            フォントの設定を実施 
        */
        *{margin:0;padding:0;}
        body{background-color:#30bb76;}
        h1,h2,h3,
        button{font-family:"メイリオ";}
        h1{text-align:center;}
        /* ここまで 
            全称セレクタで空間をリセット
            フォントの設定を実施 
        */
        
        #container{
            width:750px;
            margin:0 auto;}
        
        #allButtons button{
            float:left;
            width:200px;
            height:80px;
            margin:0 10px 20px;
            font-size:18px;
            letter-spacing:0.5em;
            background-color:#ffffff;
            color:#ebc000;
            border-radius:16px;
            border:none;
            display:block;}
        #allButtons button{
            border:0px solid #b06289;
        }
        
        button{position:relative;}
        button .rightButton{
            position:absolute;
            top:0;
            left:0;
            width:0;
            height:100%;
            overflow:hidden;
        }
        button span span{
            display:block;
            width:200px;
            height:80px;
            line-height:80px;
            color:#f0f0f0;
            background-color:#987789;
            border-radius:16px;
        }
    </style>

</head>
<body>
    <div id="container">
        <h1>色々なボタン</h1>
        <div id="allButtons">
                <button>東京都</button>
                <button>神奈川県</button>
                <button>埼玉県<span class="rightButton">
                    <span>埼玉県</span></span></button>
                <button>群馬県</button>
                <button>茨城県</button>
                <button>千葉県<span class="rightButton">
                    <span>千葉県</span></span></button>
                <button>長野県</button>
                <button>愛知県</button>
                <button>静岡県<span class="rightButton">
                    <span>静岡県</span></span>
                </button>
        </div>
    </div>
    
<script>
$(function(){
    var DURATION = 500;
    
    /*
    #allButtons button:nth-child(3n+1)と指定すると
    「#allButtons」で囲まれている要素、今回は
    「３の倍数」+ 1 番目の「button」要素を指定する。
    */
    //一番左の列のボタン
    $("#allButtons button:nth-child(3n+1)")
        .on("mouseover",function(){
            $(this)
            /*
            stop(true)を入れるのは、実行中のアニメーションを
            途中でキャンセルするためです。これを書かないと、
            アニメーション途中でボタンの外へマウスを持っていた
            場合アニメーションが終わらないと、
            mouseoutで指定した
            アニメーションが実行されない。
            stop()
            引数：true | false
            指定しないと「false」が設定される
            true: アニメーションをキャンセルする
            false:アニメーションをキャンセルしない
            */
            .stop(true)
            .animate({
            backgroundColor: "#ae6d44",
            color: "#ffffff"
            },DURATION);
        })
        .on("mouseout",function(){
            $(this).stop(true).animate({
                backgroundColor:"#ffffff",
                color:"#ebc000"
            },DURATION);
        });
    
    //中央列のボタン
    $("#allButtons button:nth-child(3n+2)")
        .on("mouseover",function(){
            $(this).stop(true).animate({
                borderWidth: "14px",
                color: "#b06289"
            },DURATION,"easeOutSine");
        })
        .on("mouseout",function(){
            $(this).stop(true).animate({
                borderWidth: "0px",
                color: "#ebc000"
            },DURATION,"easeOutSine");
        });
    
    //一番右の列のボタン
    $("#allButtons button:nth-child(3n+3)")
        .on("mouseover",function(){
            $(this).find("> span").stop(true).animate({
                width:"100%"
            },DURATION,"easeOutQuad");
        })
        .on("mouseout",function(){
            $(this).find("> span").stop(true).animate({
                width:"0%"
            },DURATION,"easeOutQuad");
        });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

<!doctype html>

<html>

<head>

<title>ボタンにホバーの機能を付けてみる</title>

<!--

jquery-ui.jsを読み込まないと

animate()の箇所でbackgroundプロパティ

背景色の切り替える処理が動作しない。

-->

<style>

/* ここから

全称セレクタで空間をリセット

フォントの設定を実施

*{margin:0;padding:0;}

body{background-color:#30bb76;}

h1,h2,h3,

button{font-family:"メイリオ";}

h1{text-align:center;}

/* ここまで

全称セレクタで空間をリセット

フォントの設定を実施

#container{

width:750px;

margin:0 auto;}

#allButtons button{

float:left;

width:200px;

height:80px;

margin:0 10px 20px;

font-size:18px;

letter-spacing:0.5em;

background-color:#ffffff;

color:#ebc000;

border-radius:16px;

border:none;

display:block;}

#allButtons button{

border:0px solid #b06289;

}

button{position:relative;}

button .rightButton{

position:absolute;

top:0;

left:0;

width:0;

height:100%;

overflow:hidden;

}

button span span{

display:block;

width:200px;

height:80px;

line-height:80px;

color:#f0f0f0;

background-color:#987789;

border-radius:16px;

}

</style>

</head>

<body>

<h1>色々なボタン</h1>

</button>

</div>

$(function(){

var DURATION = 500;

#allButtons button:nth-child(3n+1)と指定すると

「#allButtons」で囲まれている要素、今回は

「３の倍数」+ 1 番目の「button」要素を指定する。

//一番左の列のボタン

$("#allButtons button:nth-child(3n+1)")

.on("mouseover",function(){

$(this)

stop(true)を入れるのは、実行中のアニメーションを

途中でキャンセルするためです。これを書かないと、

アニメーション途中でボタンの外へマウスを持っていた

場合アニメーションが終わらないと、

mouseoutで指定した

アニメーションが実行されない。

stop()

引数：true | false

指定しないと「false」が設定される

true: アニメーションをキャンセルする

false:アニメーションをキャンセルしない

.stop(true)

.animate({

backgroundColor: "#ae6d44",

color: "#ffffff"

},DURATION);

})

.on("mouseout",function(){

$(this).stop(true).animate({

backgroundColor:"#ffffff",

color:"#ebc000"

},DURATION);

});

//中央列のボタン

$("#allButtons button:nth-child(3n+2)")

.on("mouseover",function(){

$(this).stop(true).animate({

borderWidth: "14px",

color: "#b06289"

},DURATION,"easeOutSine");

})

.on("mouseout",function(){

$(this).stop(true).animate({

borderWidth: "0px",

color: "#ebc000"

},DURATION,"easeOutSine");

});

//一番右の列のボタン

$("#allButtons button:nth-child(3n+3)")

.on("mouseover",function(){

$(this).find("> span").stop(true).animate({

width:"100%"

},DURATION,"easeOutQuad");

})

.on("mouseout",function(){

$(this).find("> span").stop(true).animate({

width:"0%"

},DURATION,"easeOutQuad");

});

</script>

</body>

</html>

サンプルコードでは９つのボタンが表示されていますが、効果は ...

jQuery

jQueryで聖剣伝説に出てくるリングメニューを作ってみる

2015/10/29 flowernav, リングメニュー, 聖剣伝説

タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Portfolio</title>
    
    <!--共通で使用するCSSを読み込む-->
    <link rel="stylesheet" type="text/css" href="">

    <!--共通で使用するjQueryを読み込む-->          
    <script src="js/jquery-1.11.3.js"></script>
    
    <!--　ｊQueryUIを読み込む-->
    <script src="js/ui/jquery-ui.js"></script> 
    
    <!--jQuery(flowerNav)を使用するために
    　　必要なCSS,JSファイルを読み込む-->
	<link rel="stylesheet" type="text/css" 
          href="js/flowernav.css">

    <script src="js/jquery.flowernav-1.0.js"></script>


    <style>
	
	*{margin:0;padding:0}

	p {
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		 "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		 font-size:16px;
	}
	#container{}
		
	</style>
</head>
<body>
    
<div id="container">
    <nav id="flash">
    <ul>
        <!-- link used as button by default .btn -->
        <li><a href="#flash" class="btn my_button">click!</a>
            <!-- second level link will be used as childs -->
            <ul>
                <li><a href="#"><img src="img/CL004.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL005.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL006.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL007.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL009.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL010.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL012.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL019.JPG" width="100" height="100" ></a></li>
            </ul>
        </li>
    </ul>
    </nav>    
</div>

	<script>
	$(document).ready(function() {

		// no option initialisation, with dragging off and default settings (clockwise rotation)
		$('#nav').flowernav();
		
		// dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com
		$('#nav').flowernav({drag:true});
		
		// initial callback function possible after plugin is invoked
		$('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} );
	
		// all of the default settings
		$('#flash').flowernav({
			radiusX			: 140, 		// radius of x axis in px, default: 110
			radiusY			: 110,		// radius of y axis in px, default: 110
			rotate			: true, 	// rotate items in a circle, default: true
			direction		: 'ccw', 	// counter clockwise rotation, default: clockwise
			speed			: 1, 		// speed inverse proportional 1 = fastest, default: 3
			oSpeed			: 1000, 	// speed of opening animation in ms, default: 500
			cSpeed			: 400,		// speed of closing animation in ms, default: 400
			easingOpen		: 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
			easingClose		: 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
			hoverStop		: true, 	// does stop the animation on item hover, default: true
			hoverOpacityIn	: 1,		// hover opacity of li's, default: 1
			hoverOpacityOut	: .4,		// opacity of li's , default: .5
			hoverSpeedIn	: 100,		// speed of hover toggle opacity animation in ms, default: 600
			hoverSpeedOut	: 700,		// speed of hover-out toggle opacity animation in ms, default: 600
			intv			: 10, 		// rotation interval time in ms, default: 10
			offset			: 45, 		// offset in circle in degrees, default: 0
			drag 			: true, 	// requires jquery ui plugin to function, default: false
			// callbacks
			btnClass		: '.btn',
			onOpenStart	: function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation
			onOpenEnd	: function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation
			onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation
			onCloseEnd	: function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation
		});
	});	
	</script>
</body>
</html>

100

101

<!doctype html>

<html>

<head>

<title>Portfolio</title>

<!--jQuery(flowerNav)を使用するために

　　必要なCSS,JSファイルを読み込む-->

href="js/flowernav.css">

<style>

*{margin:0;padding:0}

p {

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",

"メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;

font-size:16px;

}

#container{}

</style>

</head>

<body>

<ul>

<li><a href="#flash" class="btn my_button">click!</a>

<ul>

</ul>

</li>

</ul>

</nav>

</div>

$(document).ready(function() {

// no option initialisation, with dragging off and default settings (clockwise rotation)

$('#nav').flowernav();

// dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com

$('#nav').flowernav({drag:true});

// initial callback function possible after plugin is invoked

$('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} );

// all of the default settings

$('#flash').flowernav({

radiusX : 140, // radius of x axis in px, default: 110

radiusY : 110, // radius of y axis in px, default: 110

rotate : true, // rotate items in a circle, default: true

direction : 'ccw', // counter clockwise rotation, default: clockwise

speed : 1, // speed inverse proportional 1 = fastest, default: 3

oSpeed : 1000, // speed of opening animation in ms, default: 500

cSpeed : 400, // speed of closing animation in ms, default: 400

easingOpen : 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,

easingClose : 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,

hoverStop : true, // does stop the animation on item hover, default: true

hoverOpacityIn : 1, // hover opacity of li's, default: 1

hoverOpacityOut : .4, // opacity of li's , default: .5

hoverSpeedIn : 100, // speed of hover toggle opacity animation in ms, default: 600

hoverSpeedOut : 700, // speed of hover-out toggle opacity animation in ms, default: 600

intv : 10, // rotation interval time in ms, default: 10

offset : 45, // offset in circle in degrees, default: 0

drag : true, // requires jquery ui plugin to function, default: false

// callbacks

btnClass : '.btn',

onOpenStart : function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation

onOpenEnd : function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation

onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation

onCloseEnd : function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation

});

</script>

</body>

</html>

今回使用するプラ ...

javaScript

サーバーとデータのやりとりをする

2015/10/29 Ajax, 同期通信, 非同期通信

Ajaxで重要なものは、XmlHttpRequestオブジェクトを利用した非同期通信です。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajaxを使ってサーバーとやりとりを行う</title>
   
</head>
<body>
    <form name="testForm"><p>
        <input type="button" value="load" 
               onclick="getFile('data/test.txt');">
    </p></form>
    <div id="testResult">
    </div>
<script>

    var req;

function getFile(path){
    /*
    new演算子とコンストラクタでXMLHttpRequestオブジェクトを
    生成します。非同期通信では、リクエストを送ってからデータ取得が
    完了するまでの間、別の処理を行うことが可能です。
    そのため、いつデータを取得したかを知らなければいけません。
    そのために使用されるのがコールバック関数です。
    */
    req = new XMLHttpRequest();
    
    /*
    コールバック関数は、onreadystatechangeプロパティで
    設定します。
    */
    req.onreadystatechange = showData;

    /*
    openメソッドは、サーバーに送るHTTPリクエストの内容を指定
    第1引数：HTTPプロトコルのコマンド
        「GET」はデータを取得するためのコマンドです。
    第2引数：データファイルのパス
    第3引数：非同期・同期の指定
         true:非同期通信
        false:　同期通信
    */
    req.open("GET",path,true);
    
    /*
    sendメソッドが実行されたときに、サーバーに
    HTTPリクエストが送信される。
    GETコマンドの場合は、引数に何もないことを示す「null」を指定
    */
    //HTTPリクエストを送信
    req.send(null);
}
function showData(){
    
    /*
    下記のif文でデータの取得が完了したかを判定します。
    readtState：通信状態を表すプロパティ
        status：サーバー側がリクエストに対して返す
        　　　　　ステータスコードと呼ばれる値を表すプロパティ
             　　詳細は記事をご覧ください。
    */
    if( req.readyState == 4 &&
        req.status == 200 ){
        
        /*
        サーバーから取得したテキストが格納されている
        プロパティです。その値を要素div「testResult」の
        innerHTMLプロパティに代入し、HTMLと解釈して
        表示します。
        */
        document.getElementById("testResult")
            .innerHTML = req.responseText;
    }
}

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Ajaxを使ってサーバーとやりとりを行う</title>

</head>

<body>

<input type="button" value="load"

onclick="getFile('data/test.txt');">

</p></form>

</div>

var req;

function getFile(path){

new演算子とコンストラクタでXMLHttpRequestオブジェクトを

生成します。非同期通信では、リクエストを送ってからデータ取得が

完了するまでの間、別の処理を行うことが可能です。

そのため、いつデータを取得したかを知らなければいけません。

そのために使用されるのがコールバック関数です。

req = new XMLHttpRequest();

コールバック関数は、onreadystatechangeプロパティで

設定します。

req.onreadystatechange = showData;

openメソッドは、サーバーに送るHTTPリクエストの内容を指定

第1引数：HTTPプロトコルのコマンド

「GET」はデータを取得するためのコマンドです。

第2引数：データファイルのパス

第3引数：非同期・同期の指定

true:非同期通信

false:　同期通信

req.open("GET",path,true);

sendメソッドが実行されたときに、サーバーに

HTTPリクエストが送信される。

GETコマンドの場合は、引数に何もないことを示す「null」を指定

//HTTPリクエストを送信

req.send(null);

}

function showData(){

下記のif文でデータの取得が完了したかを判定します。

readtState：通信状態を表すプロパティ

status：サーバー側がリクエストに対して返す

　　　　　ステータスコードと呼ばれる値を表すプロパティ

　　詳細は記事をご覧ください。

if( req.readyState == 4 &&

req.status == 200 ){

サーバーから取得したテキストが格納されている

プロパティです。その値を要素div「testResult」の

innerHTMLプロパティに代入し、HTMLと解釈して

表示します。

document.getElementById("testResult")

.innerHTML = req.responseText;

}

</script>

</body>

</html>

HTTPリ ...

: javaScript

Ajaxってなに？

2015/10/29 Ajax, XMLHttpRequestオブジェクト, クロスドメイン制約, ダイナミックHTML, 同期通信, 非同期通信

Ajax(エイジャックス)は、Webアプリケーション(Webブラウザを基本とするアプリケーション)のための色々な技術の総称です。ここ10年くらいのネットの世界で効くようになった用語です。特徴の１つが ...

: javaScript

DOMを使ってアニメーション

2015/10/29 アニメーション, タイマー

スタイルシートでは、要素の表示位置をtop(上端)left(左端)といったプロパティで設定できます。要素の配置方法を指定するpositionプロパティは、初期値であるレイアウトを自動で行static以 ...

: javaScript

DOMを使用して、スタイルを動的に変更する

2015/10/29 DOM, スタイル変更, 動的

HTMLの見た目をよくするためにスタイルシートを使用することが普通です。綺麗なウェブページのレイアウトには、スタイルシートが利用されています。DOMを使用すると、スタイルシートのプロパティを操作できま ...

: javaScript

document内の好きな要素にアクセスする

2015/10/29 DOM, ダイナミックHTML

HTMLドキュメントやXMLドキュメントのすべての要素に、階層構造で接続できるようにした仕組みのことを、DOM(Document Object Model)と呼びます。DOMはW3Cという標準化団体で ...

: javaScript

オブジェクトにメソッドを追加する

2015/10/29 メソッド追加, 無名関数

通常のオブジェクトと同様に、ユーザー定義のオブジェクトにもメソッドを登録することができます。前回作成したPersonオブジェクトには、name,heightプロパティがありましたが、メソッドはありませ ...

: javaScript

オリジナルのオブジェクト(ユーザー定義オブジェクト)を作ってみる

2015/10/29 オブジェクト, ユーザー定義

documentオブジェクト、dateオブジェクトなど予め用意されているオブジェクトを使ってきました。それとは別に、ユーザーがオリジナルのオブジェクトを定義して、使うこともできます。ユーザー定義オブジ ...

« Prev 1 … 22 23 24 25 26 … 40 Next »