仕事でソース書くのメンドーとか思った際のjQuery Libraryの書留。
よくやるのは定番のLightbox、Slideswitch、オンマウスで不透明度を落とすくらい。
PHPが使えないときのJavascriptとか。
年月日取得
<script language=JavaScript>
<!--
now = new Date();
year = now.getYear(); if (year < 2000) year = year + 1900;
month = now.getMonth()+1;
day = now.getDate();
wk = new Array("日","月","火","水","木","金","土");
document.write(""+year+"年"+month+"月"+day+"日");
// -->
</script>
<script>
FixScroll('tab', {parent: 'side',bottomBorder: 'infinite'});
</script>
<div id="tab"></div>
先に
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7");
</script>
または
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
を読み込ませる。
あああjQuery news ticker
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../js/jquery_ticker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#normal li").newsTicker({type:"normal"});//普通の
$("#move1 li").newsTicker({type:"move1"});//スピーディにきて一旦停止、左に消えるときは遅い
$("#fade li").newsTicker({type:"fade"});//フェードイン
$("#longitudinally li").newsTicker({type:"longitudinally"});//下から上へ
});
</script>
jQueryの最新版を読み込む
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
要素をスライドさせる
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.bxSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').bxSlider({
mode: 'slide', //slide,fade,ticker
auto: 'true', //自動再生
speed: 1000, //切り替えスピード
pause: 3500, //停止時間
width: 430, //幅
wrapper_class: 'class名' //要素を囲むclass名
});
});
</script>
jQueryでページトップへ戻るリンクを作成
<script type="text/javascript">
<!--
$(function(){ //ページトップへスクロール
$("#toTop a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
-->
</script>
スクロールが100に達したらボタン表示機能付き
<script type="text/javascript">
<!--
$(function(){ //ページトップへスクロール
var topBtn = $("#toTop");
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
$("#toTop a").click(function(){ //ページトップへ戻る
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
-->
</script>
jquery.colors.js
<script src="http://newsmixer.googlecode.com/svn/trunk/pie/public/jquery.color.js"type="text/javascript"></script>
<script type="text/javascript">
<!--
//jquery.color.js
$(function() {
$('#nav4 li a').hover(
function(){
$(this).stop().animate({'background-position-x': '0px'},200);
},
function () {
$(this).stop().animate({'background-position-x': '-300px'},300);
}
);
});
-->
</script>
Lightbox
<script src="http://okinawa.town-nets.jp/js/lightbox.js" type="text/javascript"></script>
<script type="text/JavaScript">
<!--
function popup_img(img_url,evt){ //ライトボックス
var text = "<img src='"+img_url+"'>";
var div = document.getElementById('popup');
var style = div.style;
var cx; var cy;
if (! evt) { evt = event; }
cx = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
cy = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
style.left = (cx + 16) + 'px';
style.top = (cy - 12) + 'px';
div.innerHTML = text;
style.zIndex = 9999;
style.display = 'block';
}
function popdown(){
document.getElementById( 'popup' ).style.display = 'none';
}
-->
</script>
