找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1997|回复: 9

[求助] 这样的滑动门效果如果实现?

[复制链接]
发表于 2010-12-21 10:43:24 | 显示全部楼层 |阅读模式
小菜菜想了半天没想出来办法。哪位大侠教教?
test.gif
发表于 2010-12-21 13:36:03 | 显示全部楼层
类似于京东商城侧栏的滑动是么
回复 支持 反对

使用道具 举报

发表于 2010-12-21 14:57:24 | 显示全部楼层
相对绝对定位可以做,再加个js。js就只是换个样式就可以了。具体html css 可参考如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑动</title>
</head>
<style>
.conTxt-L {float:left;width:106px;padding:30px 0 0;_overflow:hidden;}
.conTxt-L li {height:34px;width:100px;margin:10px auto 0;padding:1px;line-height:34px;border:1px solid #DEE9F5; list-style:none;}
.conTxt-L li  a {display:block;height:34px;width:100px;text-decoration:none;color:#000;background-color:#FAFDFF;text-align:center;outline:none;}
.conTxt-L li  a:hover {background:#E3F1FF;color:#094085;}
li.navH {position:relative;height:40px;width:104px;border-color:#A6B7D5;border-right:none;background:#FFF;}
li.navH a,li.navH a:hover {position:absolute;height:40px;width:106px;background:#E3F1FF;line-height:40px;color:#094085;font-weight:bold;}       
.conTxt-R {float:left;width:692px;height:auto;padding:1px;border:1px solid #A6B7D5;}
.conTxt-R-txt {width:682px;height:auto;padding:5px;background-color:#E3F1FF;}

</style>
<body >
<div>               
    <ul class="conTxt-L">
        
                <li><a hidefocus="true" href="#">11</a></li>
                <li  class="navH"><a href="#">22</a></li>
                <li><a hidefocus="true" href="#">33</a></li>
                <li><a hidefocus="true" href="#">44</a></li>
                <li><a hidefocus="true" href="#">55</a></li>
                <li><a hidefocus="true" href="#">66</a></li>
                <li><a hidefocus="true" href="#">77</a></li>
            
    </ul><!--/conTxt-L-->
   
    <div class="conTxt-R"><!--右侧框架边框及1px留白-->            
        <div class="conTxt-R-txt"><!--右侧5px内边距-->
                        
            <!--右侧文字内容区域开始-->
            <div class="Txt"  style="height:500px;">                                                   
                    
            </div><!--/Txt-->
            <!--右侧文字内容区域结束-->               
            
        </div><!--/conTxt-R-txt-->               
    </div><!--/conTxt-R-->
    <div class="clear"></div>
</div>
</body>
</html>

[[i] 本帖最后由 xiongdan506 于 2010-12-21 15:00 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2010-12-21 15:30:55 | 显示全部楼层
头晕眼花
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-12-21 17:57:43 | 显示全部楼层
二楼的正确,只不过最上面的那个大的是放头像个人信息之类的,JS不会写。小菜菜啊。哪位大侠写个完整的?
回复 支持 反对

使用道具 举报

发表于 2010-12-21 20:44:16 | 显示全部楼层
二楼的不错啊
回复 支持 反对

使用道具 举报

发表于 2010-12-21 21:30:02 | 显示全部楼层
原帖由 [i]chinashuang 于 2010-12-21 17:57 发表
二楼的正确,只不过最上面的那个大的是放头像个人信息之类的,JS不会写。小菜菜啊。哪位大侠写个完整的?


最上面的那块 ,固定不动?
回复 支持 反对

使用道具 举报

发表于 2010-12-22 05:49:06 | 显示全部楼层
谢谢,已经下载,研究去~
回复 支持 反对

使用道具 举报

发表于 2010-12-31 15:53:35 | 显示全部楼层
不是都一样的吗?。。只是样子不一样而已 改改样式就行啦
回复 支持 反对

使用道具 举报

发表于 2011-1-5 16:08:08 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-3-6 08:17 , Processed in 0.069152 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表