採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
November 10, 2017
アニメーション（動く）スタンプ制作のポイントとなる5つのSTEPを90秒で解説します。
ぜひ動くスタンプ作りに挑戦してみてください！
STEP1. 余白をトリミング
STEP2. 並び順の調整
STEP3. ファイル容量の調整
STEP4. APNGデータの作成
STEP5. APNGの動作確認
February 1, 2012
<style>
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景圖片) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a')
.css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
//マウスオーバー時に縦位置94pxに0.5秒かけて移動
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
//マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
$(this).css({backgroundPosition: "-20px 35px"})
//移動完了後、元の位置に戻す
}})
})
});
</script>
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景圖片) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a')
.css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
//マウスオーバー時に縦位置94pxに0.5秒かけて移動
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
//マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
$(this).css({backgroundPosition: "-20px 35px"})
//移動完了後、元の位置に戻す
}})
})
});
</script>
html中放置
<ul id="demo">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
備註：詳細可參考demo中CSS ID+Script的作法，可分好幾種動畫。
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
出處：
http://snook.ca/technical/jquery-bg/
參考:
http://www.skuare.net/test/jBgpos.html
demo:
http://apao.zapto.org/~apao/jQuery/Background_Position/
March 24, 2010
以全美國為對象，2000年開始當現在設置的太陽能板，以動畫方式成現時空的感覺...
