WEBデザインの勉強

【jquery】ブロック状に繰り返し画像が開くslider(coinslider)

サンプルはこちら

１．zipファイルダウンロードします
ダウンロード(coin-slider)

２．下記２つを取得します
coin-slider.min.js
coin-slider-styles.css

３．画像を配置します、画像の指定

<div id="coin">
<img src="images/a1.jpg" alt="" />
<img src="images/a2.jpg" alt="" />
<img src="images/a3.jpg" alt="" />
<img src="images/a4.jpg" alt="" />
<img src="images/a5.jpg" alt="" />
</div>

４．ｊｓとcssコード
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/coin-slider-styles.css" />
<script>$(document).ready(function() {
$('#coin').coinslider({ hoverPause: false });
});
< /script>

５．coin-slider.min.js の書換え　（最後の行の、最後の方）

width:100,
height:190,
spw:15,
sph:5,
delay:3000,
sDelay:20,
opacity:0.7,
titleSpeed:500,
effect:'rain',navigation:true,links:true,hoverPause:true};})(jQuery);

【jquery】jQuery Easing Pluginの使い方(jQuery Cycle Plugin)

#%E:154%#スライドショーを表示するAjaxライブラリです。
jQuery Easing Plugin　取得

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<script type="text/javascript">
$('#scrolldown').cycle({
    fx: 'scrollDown',
    easing: 'easeOutBounce',
    delay: -2000
});
</script>



<div id="cycle">
    <img src="./images/image1.jpg" width="100" height="100" alt="" />
    <img src="./images/image2.jpg" width="100" height="100" alt="" />
    <img src="./images/image3.jpg" width="100" height="100" alt="" />
</div>
＞＞＞＞＞＞＞＞＞＞

#%E:115%#サンプル【６】#%E:224%#

【jquery】jQuery Cycle Pluginの使い方

#%E:154%#スライドショーを表示するAjaxライブラリです。
jQuery Cycle Plugin　取得

※jQuery必須⇒こちらから

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('div#cycle').cycle();
});
</script>



<div id="cycle">
    <img src="./images/image1.jpg" width="100" height="100" alt="" />
    <img src="./images/image2.jpg" width="100" height="100" alt="" />
    <img src="./images/image3.jpg" width="100" height="100" alt="" />
</div>
＞＞＞＞＞＞＞＞＞＞

#%E:1%#サンプル

【jquery】jQueryを使うには

#%E:154%#jQuery公式サイト　の　ダウンロードページ#%E:224%#
ファイルをダウンロードし、自分のブログや、レンタルサーバに配置します
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

#%E:155%#リンクを指定するだけの方法
CDN（Contents Delivery Network）、コンテンツデリバリーネットワークを使う方法
Google Ajax API CDN

<script          src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

※SSL（https://）でも可能

カラーピッカー(Color Picker)

配布元：http://www.intelliance.fr/jquery/color_picker/

【javascript】アンカーをクリックし画像の表示／非表示を切り替える

１．クリック

２．画像表示

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../common/js/jquery-1.7.1.min.js"></script>
<style>
#box{
display:none;
}
</style>

<script type="text/javascript">
<!--
var i=0;
function disp(){
if(i%2==0)
document.getElementById("box").style.display="block";
else
document.getElementById("box").style.display="none";
i++;
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="javascript:disp();">クリック表示/非表示</a>

<div id="box">
<img src="./t01.jpg">
</div>

</body>
</html>

ハイパーリンクの色指定

a { color: #555555; }
初期表示
a:link{ color: #FF0000; }
未訪問であるハイパーリンクの色指定
a:visited{ color: #FF0000; }
訪問済みであるハイパーリンクの色指定
a:hover{ color: #FF0000; }
マウスポイント時のハイパーリンクの色指定
a:active{ color: #FF0000; }
選択中であるハイパーリンクの色指定
a:focus{ color: #FF0000; }
フォーカス時(テキストエリア等)のハイパーリンクの色指定

SEO対策テスト

SEOチェキ http://seocheki.net/
チェックしたいURLを入力してあげれば良いだけ。

※SEO対策っていうけど、お金かけないと、単語によっては、トップにはいけないのは常識

ニュースティッカーjQueryプラグイン

jQueryプラグインの　ニュースティッカー(News Ticker)を作成してみる。
いろいろ探してみましたが、
http://develo.org/2011/06/24/0352.html

こちらの方のニュースティッカーは、非常にわかりやすく、サンプルを書いてくださってました。
ありがたいです。

・CSS
・JSファイル
　jquery-1.7.1.min.js
　ticker.js
・HTML

-----------
cssソース
-----------

/* CSS Document */

* {
margin: 0;
padding: 0;
}

/* news */
div.ticker {
margin: 0px 0px 0px 0px;
width: 350px;
position: relative;
overflow: hidden;
border: 0px solid #369;
}

@media screen and (min-width: 321px) {
div.ticker {
width: 440px;
}
}
@media screen and (max-width: 320px) {
div.ticker {
width: 280px;
}
}

div.topics {
width: 350px;
height: 25px;
}

div.ticker ul {
height: 1.6em;
}

div.ticker ul li {
float: left;
display: inline;
clear: both;
text-align: left;
list-style-type: none;
position: relative;
line-height: 1.6em;
margin-bottom: -1.6em;
}

div#longitudinally ul li,
div#fade ul li {
left: 10px;
}

-----------
jsソース
-----------
１．jQueryをダウンロード　http://jquery.com/　　jquery-1.7.1.min.js
２．ticker.js　を　http://develo.org/2011/06/24/0352.html　からダウンロードしました。

<script type="text/javascript">
$(function(){
    $("#move1 li").newsTicker({type:"move1",speed1:2000,speed2:70});
});
</script>

-----------
HTMLソース
-----------
        <div class="topics">
           <div class="ticker" id="move1">
               <ul>
                      <li>11111111</li>
                      <li>2222222</li>
                      <li>3333333</li>
                      <li>4444444</li>
                      <li>5555555</li>
            </ul>
           </div>
       </div>

WinMergeファイルやフォルダの比較をする

開発時に良く使う、比較ツールです。

WinMerge 2.12.4 - 最新安定版（2013/01/07現在）

WinMergeは、Windows用の比較、マージツールです。