您的位置:首页 - 教程 - 网页特效 - 正文
jQuery仿百度新闻标签盒子特效
效果:http://hovertree.com/texiao/jquery/66/

源码下载:
http://hovertree.com/h/bjaf/baidureci.htm

效果图:


代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery百度新闻热搜词代码 - 何问起</title><base target="_blank" />
<link href="http://hovertree.com/texiao/jquery/66/css/hovdertreeBox.css" rel="stylesheet" type="text/css" />
<style>.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue;}</style>
</head>
<body>

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/66/js/script.js"></script>

<div class="hovertreeinfo"><h1>jQuery仿百度新闻热搜词代码</h1>
<a href="http://hovertree.com/h/bjaf/hovertreebox.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
</div>
<div class="hovdertreeBox">
<ul class="artist_l">
<li class="tag1">
<div class="tag_txt">
jQuery彩色手风琴特效适合移动端<br />内容<span class="tag_yellow">分组收藏</span>夹
</div>
<a href="http://hovertree.com/h/bjaf/vk9yjrpm.htm">jQuery彩色手风琴特效适合移动端<br />内容<span class="tag_yellow">分组收藏</span>夹</a>
</li>
<li class="tag1 tag2">
<div class="tag_txt">
CSS3 3D和2D旋转<br />旋转<span class="tag_yellow">翻转</span>区别
</div>
<a href="http://hovertree.com/code/css/css3dxuanzhuan.htm">CSS3 3D和2D旋转<br />旋转<span class="tag_yellow">翻转</span>区别</a>
</li>
<li>
<div class="tag_txt">
音乐播放图标<br />旋转和停止
</div>
<a href="http://hovertree.com/h/bjaf/kqud99m6.htm">音乐播放图标<br />旋转和停止</a>
</li>
<li class="tag3">
<div class="tag_txt">
小图片列表<br />大图切换
</div>
<a href="http://hovertree.com/hvtimg/">小图片列表<br />大图切换</a>
</li>
<li>
<div class="tag_txt">
只弹琴<br />不说爱
</div>
<a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm">只弹琴<br />不说爱</a>
</li>
<li class="tag3">
<div class="tag_txt">
小图片列表<br />大图切换
</div>
<a href="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">小图片列表<br />大图切换</a>
</li>
<li class="tag1">
<div class="tag_txt">
jQuery全部版本下载<br />什么<span class="tag_yellow">版本</span>都有
</div>
<a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery全部版本下载<br />什么<span class="tag_yellow">版本</span>都有</a>
</li>
<li class="tag1 tag2">
<div class="tag_txt">
何问起<br />网页<span class="tag_yellow">特效</span>库
</div>
<a href="http://hovertree.com/texiao/">
何问起<br />网页<span class="tag_yellow">特效</span>库
</a>
</li>
<li>
<div class="tag_txt">
何问起<br />题库
</div>
<a href="http://hovertree.com/tiku/">何问起<br />题库</a>
</li>
<li class="tag1 tag2">
<div class="tag_txt">
图片<br />Base 64<span class="tag_yellow">在线</span>编码
</div>
<a href="http://tool.hovertree.com/a/base64/">
图片<br />Base 64<span class="tag_yellow">在线</span>编码
</a>
</li>
<li class="tag1">
<div class="tag_txt">
超炫酷<br />就在<span class="tag_yellow">天边</span>划一道弧线
</div>
<a href="http://keleyi.com/keleyi/phtml/html5/5.htm">
超炫酷<br />就在<span class="tag_yellow">天边</span>划一道弧线
</a>
</li>
<li class="tag3">
<div class="tag_txt">
弹出大图层<br />点击图片
</div>
<a href="http://hovertree.com/h/bjaf/flurt6nt.htm">弹出大图层<br />点击图片</a>
</li>
</ul>
</div>
</body>
</html>

评论: