jQuery开发的热搜词文字标签云模板代码

特效代码 潘老师 3个月前 (12-10) 55 ℃ (0) 扫码查看



jQuery开发的metro风格热搜词文字标签云模板代码,蓝色色调,矩形文字,鼠标放上去有遮挡效果,效果不错。这也是一款仿百度新闻热搜词的特效,可用于图片或文字钢琴jquery效果。

效果

核心代码

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.caption').hover(function(){
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
    }, function() {
        $(".cover", this).stop().animate({top:'50px'},{queue:false,duration:300});
    });
});
</script>
        
</head>
<body>

<div class="da_div">
    <div class="boxgrid caption">
        欢迎加入中国食用菌商务网
        <div class="boxcaption cover">
            <p><a href="#" target="_blank">欢迎加入中国食用菌商务网</a></p>
        </div>
    </div>
    
    <div class="boxgrid  boxgrid2 caption">
        查看食用菌行情
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">查看食用菌行情</a></p>
        </div>
    </div>
    
    <div class="boxgrid boxgrid3 caption">
        最新买卖求购信息
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">最新买卖求购信息</a></p>
        </div>
    </div>    

    <div class="boxgrid  boxgrid2 reci caption">
        冬季食用菌保暖知识
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">冬季食用菌保暖知识</a></p>
        </div>
    </div>
    
    <div class="boxgrid reci2 caption">
        欢迎订阅食用菌市场杂志
        <div class="boxcaption cover">
            <p><a href="#" target="_blank">欢迎订阅食用菌市场杂志</a></p>
        </div>
    </div>
    
    <div class="boxgrid boxgrid2 reci2 caption">
        打造食用菌品牌
        <div class="boxcaption boxcaption2 cover">
            <p><a href="#" target="_blank">打造食用菌品牌</a></p>
        </div>
    </div>

</div>    

资源下载


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/project/tx/12375.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】