低一度

顶部横幅

可伸展收缩的信息框tabSlideOut

2010-9-13 - diyidu - 网页设计 - Views

先看演示吧：tabSlideOut

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

一起来看最基本的实现代码——

<!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=utf-8"/>
 <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="http://www.diyidu.cn/UPLOAD/js/jquery1.js" type="text/javascript"></script>
    <script src="http://www.diyidu.cn/UPLOAD/js/jquery2.js" type="text/javascript"></script>
        
         <script>
         $(function(){
             $('.slide-out-div').tabSlideOut({
                 tabHandle: '.handle',
                 pathToTabImage: 'http://www.diyidu.cn/UPLOAD/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://link-for-non-js-users">Content</a>
        <h3>联系 & 订阅</h3>
        <p>联系低一度：<a href="mailto:wpaoli@gmail.com">diyidu@126.com</a></p>
        <p>感谢您光顾低一度博客，希望这里提供的一切资源信息，对您有用。</p>
        <p>我的群：①9073456，②20132017。</p>
        <p>订阅我：<a href="http://feed.diyidu.cn">feed.diyidu.cn</a></p>
    </div>

</body>
</html>

相关文件：jquery1.js  jquery2.js  contact_tab.gif

关键词 // tabSlideOut jQuery 低一度 网页设计
出处：低一度，链接：http://www.diyidu.cn/post/tabslideout.html

上一篇：出几道数字推理题，大家玩玩 下一篇：内页“回顶部”“写评论”JS代码

随机推荐

to "可伸展收缩的信息框tabSlideOut"

  • 晓潘博客
    #5 晓潘博客 回复该留言 2010-9-13 15:06:03
    这个样式有点儿类似左岸读书右侧边上的“分享到”，他是jiathis提供的服务，我想桶哥如果明白其原理的话，完全可以开一个这样的服务，然后以你的影响力，会让许多站长都加入进来一起使用的。
  • mice
    #18 mice 回复该留言 2010-9-14 2:30:03
    给那个“回顶部”和“写评论”这两个跳转链接，加个jq的平滑滚动效果，会不会舒服点？

Add comment

验证码