jquery访中关村商城排行榜特效

niunan

浏览: 721171 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery XHTML HTML

目前公司的网站上要用到的效果，其实也算不上什么特效，无非也就是鼠标移上某些元素后某些元素消失某些元素显示而已，中关村商城的效果页面如下：

我自己用jquery做的页面示例在以下网址中：
http://www.5mdn.com/niunantest.htm

页面代码：

<!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>JS特效测试</title>

    <script src="js/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            // 第一次加载页面后，隐藏“第一名的小区域”，隐藏“除第一名以外其他名的大区域”
            $(".ph").each(function() {
                var thisObj = $(this);
                thisObj.find(".ph0").eq(0).hide();
                thisObj.find(".ph1:gt(0)").hide();
            });

            // 鼠标移到小区域上
            // 该范围内的所有小区域显示，然后显示当前小区域
            // 该范围内所有的大区域隐藏，然后显示与该小区域对应的大区域
            $(".ph0").mouseover(function() {
                var thisObj = $(this);
                thisObj.parent(".ph").find(".ph0").show();
                thisObj.hide();
                thisObj.parent(".ph").find(".ph1").hide();
                thisObj.next(".ph1").show();
            });
        });
    </script>

    <style type="text/css">
        .ph
        {
            border: 1px solid #f00;
            width: 180px;
            float: left;
            margin-right: 50px;
        }
        .ph0
        {
            margin-left: 5px;
            margin-right: 5px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dashed #00f;
        }
        .ph1
        {
            height: 60px;
            border-bottom: 1px dashed #00f;
            margin-left: 5px;
            margin-right: 5px;
            padding: 5px;
            background-color: #ffccff;
        }
        .block
        {
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #ff0000;
            color: #ffffff;
            font-weight: bold;
            float: left;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="ph">
        <div class="ph0">
            1. 排行榜第一名
        </div>
        <div class="ph1">
            <div class="block">
                1
            </div>
            排行榜第一名.....
        </div>
        <div class="ph0">
            2. 排行榜第二名
        </div>
        <div class="ph1">
            <div class="block">
                2
            </div>
            排行榜第二名.....
        </div>
        <div class="ph0">
            3. 排行榜第三名
        </div>
        <div class="ph1">
            <div class="block">
                3
            </div>
            排行榜第三名.....
        </div>
        <div class="ph0">
            4. 排行榜第四名
        </div>
        <div class="ph1">
            <div class="block">
                4
            </div>
            排行榜第四名.....
        </div>
        <div class="ph0">
            5. 排行榜第五名
        </div>
        <div class="ph1">
            <div class="block">
                5
            </div>
            排行榜第五名.....
        </div>
    </div>
    <div class="ph">
        <div class="ph0">
            1. 论坛热贴第一名
        </div>
        <div class="ph1">
            <div class="block">
                1
            </div>
            论坛热贴第一名.....
        </div>
        <div class="ph0">
            2. 论坛热贴第二名
        </div>
        <div class="ph1">
            <div class="block">
                2
            </div>
            论坛热贴第二名.....
        </div>
        <div class="ph0">
            3. 论坛热贴第三名
        </div>
        <div class="ph1">
            <div class="block">
                3
            </div>
            论坛热贴第三名.....
        </div>
        <div class="ph0">
            4. 论坛热贴第四名
        </div>
        <div class="ph1">
            <div class="block">
                4
            </div>
            论坛热贴第四名.....
        </div>
        <div class="ph0">
            5. 论坛热贴第五名
        </div>
        <div class="ph1">
            <div class="block">
                5
            </div>
            论坛热贴第五名.....
        </div>
    </div>
</body>
</html>

查看图片附件

分享到：

中关村商城广告切换纯净代码 | ACCESS中的内置函数

2009-08-08 11:04
浏览 1738
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery访中关村商城排行榜特效

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery访中关村商城排行榜特效

评论

发表评论

相关推荐

jquery制作select列表双向选择

锋利的jQuery实例－图片滚动

框架frame自适应内容高度

jQuery插件—获取URL参数

中关村网站产品参数页的参数纠错的制作

鼠标移到某一元素则在元素旁边出现弹出框

JQuery控制图片无缝滚动

jquery xpath详解

jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题！

jQuery控制元素间隔滚动!

jquery中筛选表格的特定行数后进行操作

jQuery插件_jcarousel(用于图片滚动)

制作多级滑动tab菜单

jQuery实战(四) - tab菜单

jQuery实战（三）

只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)

jQuery实战(二)

制作符合WEB标准的QQ弹出消息(jQuery)

jQuery实战(一)

符合WEB标准的浮动层（jQuery版）！

最近访客更多访客>>