jquery 实现易做图的效果

jquery 实现易做图的效果
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://zzzyk.com">中国留美学生与教授口角放狠话被控易做图已入狱</a>
            </li>
            <li>
                <a href="http://down.zzzyk.com">Lady Gaga尺度再开演唱会俯身秀翘臀 </a>
            </li>
</ul>

//源码教程下载地址 http://code.google.com/p/lovelong1/downloads/detail?name=jquery.wk.易做图-1.0.0.7z&can=2&q=#makechanges
//提供国个的jquery 易做图效果
http://www.pvmgarage.com/2009/12/nice-and-易做图-易做图-for-your-website-with-css3-and-jquery/
?>

补充：网页制作,jquery