jquery 实现toolbar的效果
css教程 代码
ul{ list-style:none;margin:0;padding:0;}
ul li{line-height:22px;border-bottom:1px dashed #ccc;width:400px;}
ul li a{display:block;position:relative;}
ul li span{display:block;width:300px;height:350px;background:#f7f7f7;border:5px solid #eaeaea; position:absolute;z-index:9;}
iframe{border:none; width:100%;height:100%;margin:0;padding:0;}
js代码
$(function(){
$('ul a').hover(function(){
$(this).after('<span><iframe src="'+$(this).attr('href')+'"></iframe></span>');
},function(){
$('span').fadeOut('slow',function(){$(this).remove()});
});
html代码
<ul>
<li>
<a href="http://php100.com">中国留美学生与教授口角放狠话 被控恐怖分子已入狱</a>
</li>
<li>
<a href="http://down.php100.com">Lady Gaga尺度再开 演唱会俯身秀翘臀 </a>
</li>
</ul>
//源码教程下载地址 http://code.google.com/p/lovelong1/downloads/detail?name=jquery.wk.toolbar-1.0.0.7z&can=2&q=#makechanges
//提供国个的jquery toolbar效果
http://www.pvmgarage.com/2009/12/nice-and-simple-toolbar-for-your-website-with-css3-and-jquery/
?>