网页左侧可展开收缩的信息框tabSlideOut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <title>网页左侧可展开收缩的信息框tabSlideOut </title>     <style type="text/css" media="screen">    body{padding:0;margin:0;  background:#39424b; font-family: verdana;} a {color:#176092; text-decoration:none;}    a:hover {text-decoration:underline;}    .slide-out-div {       padding: 20px;        width: 250px;        background: #f2f2f2;        border: #29216d 2px solid;    }     </style>    <script src="//myjs.jz123.cn/img/jquery1.js" type="text/javascript"></script>    <script src="//myjs.jz123.cn/img/jquery2.js" type="text/javascript"></script>                  <script>         $(function(){             $('.slide-out-div').tabSlideOut({                 tabHandle: '.handle',                 pathToTabImage: 'http://myjs.jz123.cn/img/contact_tab.gif',                          imageHeight: '122px',                   imageWidth: '40px',                   tabLocation: 'left',                  speed: 300,                 action: 'click',                 topPos: '200px',                 fixedPosition: false              });         });         </script></head><body>    <div class="slide-out-div">        <a class="handle" href="http://www.jz123.cn/plus/rssmap.html">Content</a>        <h3>联系 & 订阅</h3>        <p>联系站长家园：<a href="mailto:jz123cn@126.com">jz123cn@126.com</a></p>        <p>感谢您光顾站长家园，希望这里提供的一切资源信息，对您有用。</p>        <p>订阅我：<a href="http://www.jz123.cn">www.jz123.cn</a></p>    </div></body></html>

这个效果相信大家都比较熟悉了，因为类似的特效已经看到过不少，tabSlideOut只是其中的一款。它同样基于jquery来实现，不同之处或许只是它的美化吧，稍稍漂亮了那么一丁点儿，所以低一度第一眼就瞧上了，翻译了过来，与大家分享——

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。