`
niunan
  • 浏览: 699980 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

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

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



我自己用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>
  • 大小: 30.5 KB
分享到：
| ACCESS中的内置函数
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics