JQuery

1个成员

jquery 实现toolbar的效果

发表于 2017-02-01 2849 次查看

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/
?>

发表回复
你还没有登录,请先登录注册