`
niunan
  • 浏览: 730414 次
  • 性别: 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中的内置函数
评论
发表评论

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

相关推荐

    jQuery仿中关村在线网站内容图片上评论弹幕特效

    jQuery仿中关村在线网站内容图片上评论弹幕特效,效果不错

    jQuery省市区菜单联动代码.zip

    在网页开发中，jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本资源“jQuery省市区菜单联动代码.zip”提供了一种实现动态省市区选择联动的解决方案，尤其适用于需要用户输入...

    仿中关村在线背景大图登录页面模板html源码下载.zip

    另外，可能还会有背景图片的滚动或淡入淡出效果，这些都是通过JavaScript库如jQuery实现的。 4. **响应式设计**： 由于没有具体代码，我们假设这个模板采用了响应式设计，以便在不同设备和屏幕尺寸上都能正常工作...

    zol响应式jQ标签切换特效代码

    在这个“zol响应式jQ标签切换特效代码”中，我们主要关注的是如何利用jQuery库实现一种动态的、响应式的标签切换效果。 jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务。在响应式...

    ZOL五屏焦点图广告代码.rar

    4. **可能的jQuery库**：由于JavaScript代码中可能会使用到jQuery库，这是一个流行的JavaScript框架，可以简化DOM操作和动画效果，使得代码更简洁易读。 5. **兼容性和适配性**：为了确保在不同浏览器和设备上正常...

    zol首页flash3屏焦点图代码.rar

    【标题】"zol首页flash3屏焦点图代码.rar"是一个包含用于制作ZOL（中关村在线）首页上三屏切换的Flash焦点图效果的代码资源。这个代码主要用于网站设计，尤其是电子商务或者产品展示类网站，它能吸引用户的注意力并...

    ZOL五屏带箭头JS焦点图代码.rar

    【描述】"ZOL五屏带箭头JS焦点图代码"指的是这个代码是基于ZOL（中关村在线）网站的风格设计，具有五屏轮播的特性，并且在轮播两侧添加了箭头图标，用户可以通过点击箭头来切换不同的图片或内容。这种焦点图代码可以...

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