2012年06月05日

jquery ニュースティッカー、marquee

お願いします♪いいねとかつぶやいたりして下さい
 
このブログでもmarquee使ってるんだけどなんか微妙。
ということで自作してみました。

サンプル
http://www.host-sweet.com/hosts/view/100447/
にあるやつ。


思ったよりごちゃごちゃになったので、コード読み解いてね。
<?=$javascript->link("jquery.timers.js", false);//falseでヘッダに読み込む?>
<?=$javascript->link("jquery.spotlight.min.js", false);//falseでヘッダに読み込む?>

<?
	$ct = count($ninki);
?>
<script type="text/javascript">
	$(function() {
		
		<? if($ct != 0): ?>
		$('#marquee').spotlight();
		$('#marquee > #0').slideDown("slow");
		
		ct = <?=$ct;?>;
		i = 1;
		$(document).everyTime(3000,function(){
			
			hide = i-1;
			
			if(i == ct){
				$('#marquee > li').hide();
				i = 0;
			}
			
			$('#marquee > #' + hide).hide();
			
			$('#marquee').spotlight();
			$('#marquee > #' + i).slideDown("slow");
			i++;
			
		});
		<? endif; ?>
	});
</script>

<style type="text/css">
#marquee li {
		display:none;	
	}
</style>

<? if($ninki): ?>

<ul id="marquee" style="height:70px;border-top:1px dotted #333;border-bottom:1px dotted #333;padding:20px;">
    <? foreach($ninki as $key => $v): ?>
        <li id="<?=$key;?>" class="click">
            <div class="span-3" align="center"><img src="/app/webroot/files/icons/<?=$v['icon'];?>"><br /><?=$v['name'];?></div>
            <div class="span-14 last">
                 <b>ホスト <?=h($v['host_name']);?> 最高! by <?=h($v['name']);?></b> <a href="/hosts/view/<?=$v['host_id'];?>/" style="text-decoration:none;"><span class="icons ministar"><i></i><?=number_format($v['ninki']);?></span></a> <br />
        <?=h($v['coment']);?>
            </div>
            <div class="clear"></div>
        </li>
    <? endforeach; ?>
</ul>
<? endif; ?>

関連するタグ:
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ