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

最新推荐文章于 2022-08-12 22:43:53 发布

learning_1

最新推荐文章于 2022-08-12 22:43:53 发布

阅读量96

点赞数

分类专栏： jQuery 文章标签： jQuery XHTML HTML ViewUI

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

[img]/upload/attachment/133558/330a20df-597b-320c-8ed6-ec51625bb924.jpg[/img]

我自己用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>

learning_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery访中关村商城排行榜特效

目前公司的网站上要用到的效果，其实也算不上什么特效，无非也就是鼠标移上某些元素后某些元素消失某些元素显示而已，中关村商城的效果页面如下：[img]/upload/attachment/133558/330a20df-597b-320c-8ed6-ec51625bb924.jpg[/img]我自己用jquery做的页面示例在以下网址中：http://www.5mdn.com...
复制链接

扫一扫

专栏目录