销量排名 可以滑动的效果

用两个层，其中一个层一开始全部隐藏。

用鼠标移至另一个层时，把隐藏的层显示，当前的层隐藏。这样就有一个滑动的效果。

 

<?php $this->assign('top_goods', get_top10(0)); ?>
<!-- {foreach from=$top_goods item=goods name=no}-->

{if $smarty.foreach.no.iteration eq 1}

<dd>
<p style="display:none" id="rr{$smarty.foreach.no.iteration}" onmouseover="disnoo('{$smarty.foreach.no.iteration}')">
<span class="sz" >{$smarty.foreach.no.iteration}</span><a href="{$goods.url}" ><span>{$goods.short_name}</span></a>
</p>

<div id="r{$smarty.foreach.no.iteration}">
<img src="{$goods.thumb}" height="160" width="150" />
<span class="sz">{$smarty.foreach.no.iteration}</span><a href="{$goods.url}"><span>{$goods.short_name}</span></a></a>
</div>

</dd>
{else}


<dd>
<p id="rr{$smarty.foreach.no.iteration}" onmouseover="disnooo('{$smarty.foreach.no.iteration}')">
<span class="sz" >{$smarty.foreach.no.iteration}</span><a href="{$goods.url}" ><span>{$goods.short_name}</span></a>
</p>

<div id="r{$smarty.foreach.no.iteration}" style="display:none">
<img src="{$goods.thumb}" height="160" width="150" />
<span class="sz">{$smarty.foreach.no.iteration}</span><a href="{$goods.url}"><span>{$goods.short_name}</span></a></a>
</div>

</dd>
{/if}
<!-- {/foreach} -->

<script type="text/javascript">
function disnooo(id){
//alert(id);
var i=1
for(i=1;i<={$goods.count};i++){
document.getElementById('rr'+i).style.display='block';
document.getElementById('r'+i).style.display='none';
}
document.getElementById('rr'+id).style.display='none';
document.getElementById('r'+id).style.display='block';
}
</script>

 

 

随心工作室