千葉 外房、茂原 いすみ 大原のホームページ作成、SEO、アクセス解析ならお任せください。
ＳＣＣ や アクションスクリプト・Ｊａｖａスクリプト等をメモしてあります。
細かい部品やソースコードがメモしてありコーディング時、すぐに使えるようにしています。
- CSS関連のメモ -
spanタグについて
spanタグは、インライン要素。
インライン要素はwidthやpadding、marginといったものを指定しても有効になりません。
指定したい場合は、inline-blockに変更します
- JAVA関連のメモ -
☆ TOPへ戻るボタンがスクロールすると出る
1,Jqueryを呼び込む（head）
<script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
2,footer部にhtmlを記述
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
3,ＣＳＳを記述
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}
</style>
4,スクリプトを記述
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
);
});
</script>
☆ ロールオーバー
1,ファイル名の最後に「_off」ってついてる場合、同名の「_on」のファイルに入れ替わるって感じ。
2,使用する画像の名前の後ろに_on , _off を付ける。
3,head要素内に下記を記述してJSファイルを読み込む。
<script type="text/javascript" src="smartRollover.js"></script>4,JSファイルの中身 DL
function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match("_off."))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartRollover);
}
- アクションスクリプト関連のメモ -
☆ キラキラ
var num:int = 5;
//キラキラの土台を設置するためのBitmapを配置
var base:BitmapData = new BitmapData(1000, 150, false, 0x000000);
var baseM:Bitmap = new Bitmap(base);
//黒い部分は透けて見えるようにブレンドモードをスクリーン
baseM.blendMode = BlendMode.SCREEN;
addChild(baseM);
//キラキラを表現するためのBitmapをbaseの上に配置
//4分の1で作成してから4倍にすることによって
//大きなキラキラがときどき出現する
var wrap:BitmapData = new BitmapData(1000/4, 150/4, false, 0x000000);
//smoothingをtrue
var wrapM:Bitmap = new Bitmap(wrap, PixelSnapping.NEVER, true);
wrapM.scaleX = wrapM.scaleY = 4;
wrapM.blendMode = BlendMode.SCREEN;
addChild(wrapM);
//タイマー設定、タイマーイベントスタート
var timer:Timer = new Timer(30);
timer.addEventListener(TimerEvent.TIMER, loop);
timer.start();
function loop(e:Event):void {
//処理が軽くなるように描画が終わるまでロック
base.lock();
//baseを黒で塗りつぶすことで前回の描画をクリア
base.fillRect(base.rect, 0x000000);
//base上にランダムに白色の点を描画
for (var i=0; i<num; i++) {
var px = Math.random()*stage.stageWidth;
var py = Math.random()*stage.stageHeight;
}
//描画が終わったらロックを外して表示
base.unlock();
//baseをwrapに描画
wrap.draw(base);
}