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

中关村商城广告切换纯净代码

FirebugJ#CSSXHTMLHTML 
阅读更多
效果如图：



原以为用firebug把页面主要代码搞下来后或许会产生些错误，结果没想到弄下来后啥错误都没有。。呵呵。。。只要把样式也搞下来就行了。。

效果网址：http://www.5mdn.com/adtest.htm

HTML页面代码： 
<!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>
    <style type="text/css">
        /* 全局CSS定义 */
        body
        {
            font: 12px/20px simsun;
            color: #333;
            margin: 0;
        }
        div, form, img, ul, ol, li, dl, dt, dd, h1, h2
        {
            margin: 0;
            padding: 0;
            border: 0;
        }
        div, img, input, select, ul, dl, dt, dd
        {
            float: left;
        }
        h2
        {
            display: inline;
        }
        ul
        {
            list-style-type: none;
        }
        a
        {
            text-decoration: none;
            color: #333;
        }
        a:hover, div a:hover, .Alc dt a:hover
        {
            text-decoration: underline;
            color: #f60;
        }
        /* 颜色属性 */
        .bai12
        {
            color: #fff;
        }
        .hui6
        {
            color: #666;
        }
        .hui9
        {
            color: #999;
        }
        .hoc
        {
            color: #c00;
        }
        .lan12, .fa a, fia a
        {
            color: #36c;
        }
        .fal
        {
            font-family: arial;
        }
        .hoc12, .ho14b, .ho12b
        {
            color: #c00;
        }
        .lan12, .lan12i, .fa a, .lan14b, .lan14, .fia a, .A_back, .lan14bi
        {
            color: #36c;
        }
        .fi, .lan12i, .fia a, .A_back, .lan14bi
        {
            text-decoration: underline;
        }
        .b
        {
            font-weight: bold;
        }
        /* 滚动广告样式 */
        .Am_1
        {
            width: 540px;
            position: relative;
        }
        .Am_1 img
        {
            padding: 1px;
            border: 1px solid #D0E1F0;
        }
        .Am_1 ul
        {
            position: absolute;
            width: 135px;
            top: 0;
            right: 0;
            border-top: 1px solid #BED5EC;
            line-height: 16px;
        }
        .Am_1 li
        {
            width: 115px;
            padding: 11px 10px;
            height: 33px;
            float: left;
            background: url(http://icon.zol-img.com.cn/zol_mall/index/0905/a1.gif);
        }
        .Am_1 li.act
        {
            padding-left: 18px;
            height: 34px;
            background-position: 0 -60px;
            margin: -1px 0 -1px -8px;
            position: relative;
            color: #c00;
        }
        .Am_1 li.act a
        {
            color: #c00;
        }
        .Am_1 li.act a:hover
        {
            color: #f60;
        }
    </style>
</head>
<body>
    <div class="Am_1">
        <div style="width: 406px; height: 220px;" id="fc">
            <div style="display: none;">
                <a title="佳能500D 1510万像素 超值套装低价抢购" target="_blank" href="http://www.zol.com/detail/1/goods_6b6de6c8b15a34fbf9bf7bf0861f9c1f.html">
                    <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/389.jpg"
                        onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>
            <div style="display: block;">
                <a title="技嘉M1022中关村商城首发" target="_blank" href="http://www.zol.com/detail/6/goods_711e9a9bacc7e0fa529d6901052af061.html">
                    <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/386.gif"
                        onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>
            <div style="display: none;">
                <a title="GARMIN 610 中关村商城 超低价促销" target="_blank" href="http://www.zol.com/detail/1/goods_6a7fc17474ae6786eb1525c8b0f90169.html">
                    <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/388.gif"
                        onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>
            <div style="display: none;">
                <a title="卡巴斯基 全功能安全软件2010（三年版）" target="_blank" href="http://www.zol.com/detail/6/goods_f64fb5bd61088b47e5fa2e23d5a0bdf7.html">
                    <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/378.jpg"
                        onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>
        </div>
        <ul id="show_text">
            <li class=""><span onmouseout="setAuto()" onmouseover="clearAuto();Mea(0);"><a title="佳能500D 1510万像素 超值套装低价抢购"
                target="_blank" href="http://www.zol.com/detail/1/goods_6b6de6c8b15a34fbf9bf7bf0861f9c1f.html">
                佳能500D 1510万像素 超值套装低价抢购</a></span></li><li class="act"><span onmouseout="setAuto()"
                    onmouseover="clearAuto();Mea(1);"><a title="技嘉M1022中关村商城首发" target="_blank" href="http://www.zol.com/detail/6/goods_711e9a9bacc7e0fa529d6901052af061.html">
                        技嘉M1022中关村商城首发</a></span></li><li class=""><span onmouseout="setAuto()" onmouseover="clearAuto();Mea(2);">
                            <a title="GARMIN 610 中关村商城 超低价促销" target="_blank" href="http://www.zol.com/detail/1/goods_6a7fc17474ae6786eb1525c8b0f90169.html">
                                GARMIN 610 中关村商城 超低价促销</a></span></li><li class="" style="margin-top: 0px;"><span
                                    onmouseout="setAuto()" onmouseover="clearAuto();Mea(3);"><a title="卡巴斯基 全功能安全软件2010（三年版）"
                                        target="_blank" href="http://www.zol.com/detail/6/goods_f64fb5bd61088b47e5fa2e23d5a0bdf7.html">
                                        卡巴斯基 全功能安全软件2010（三年版）</a></span></li></ul>
    </div>

    <script type="text/javascript">
        var n = 0;
        var obj = document.getElementById("show_text");
        var fc = document.getElementById("fc");
        function Mea(v) {
            n = v;
            setBg(v);
            plays(v);
        }
        function setBg(v) {
            for (var i = 0; i < 4; i++) {
                if (v == i) {
                    obj.getElementsByTagName("li")[i].className = "act";
                    if (v == 3) {
                        obj.getElementsByTagName("li")[3].style.marginTop = "-2px";
                    } else {
                        var p = obj.getElementsByTagName("li")[3].style.marginTop;
                        if (p == "-2px") {
                            obj.getElementsByTagName("li")[3].style.marginTop = "0px";
                        }
                    }
                } else {
                    obj.getElementsByTagName("li")[i].className = "";
                }
            }
        }
        function plays(v) {
            try {
                with (fc) {
                    filters[0].Apply();
                    for (var i = 0; i < 4; i++) {
                        (i == v) ? children[i].style.display = "block" : children[i].style.display = "none";
                    }
                    filters[0].play();
                }
            } catch (e) {
                var d = document.getElementById("fc").getElementsByTagName("div");
                for (var j = 0; j < 4; j++) {
                    (j == v) ? d[j].style.display = "block" : d[j].style.display = "none";
                }
            }
        }
        function clearAuto() {
            clearInterval(autoStart);
        }
        function setAuto() {
            autoStart = setInterval("auto()", 2000);
        }
        function auto() {
            n++;
            if (n >= 4) n = 0;
            Mea(n);
        }
        setAuto(); 
	</script>

</body>
</html>
  • 大小: 55.4 KB
分享到：
| jquery访中关村商城排行榜特效
评论
发表评论

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

相关推荐

    js广告图片切换完整代码

    这种功能可以模仿许多知名网站，比如中关村在线，通过定时切换展示不同的广告图片来吸引用户的注意力。下面我们将深入探讨如何使用JavaScript实现这一功能。 首先，我们需要了解基本的HTML结构来承载这些广告图片。...

    类似翻牌的flash广告切换效果.rar

    描述中提到的“在中关村网站见到过”，暗示这种广告切换效果曾在知名的科技资讯网站中关村上应用，表明它是被认可和采用的。"鼠标不用点击，自己翻转切换广告"意味着这是一种自动轮播的广告模式，通过编程设置定时器...

    ecshop仿中关村商城模板

    标题中的“ecshop仿中关村商城模板”指的是基于ECSHOP电子商务系统开发的一款与中关村商城设计风格相似的网站模板。ECSHOP是一款开源的PHP购物系统，它提供了丰富的功能和自定义选项，使得开发者可以方便地构建和...

    仿中关村商城网站源码-带限时抢购功能_Ecshop内核

    php+mysql仿中关村商城网站源码-带限时抢购功能 第一步: 访问install目录进行安装， 第二步: 访问install目录进行安装 打开http://域名/bak 用户名：admin 密：123456 还原数据库 还原后: 账号:admin 密码:...

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

    【描述】"ZOL五屏焦点图广告代码"中的“ZOL”可能是指中关村在线（ZOL.com.cn），这是一个知名的IT产品信息和资讯平台。这里的“五屏焦点图”指的是广告设计中的一种布局方式，即在一个广告区域设置五个不同的展示...

    ZOL五屏焦点图广告代码

    ZOL（中关村在线）是中国知名的科技资讯网站，其五屏焦点图广告设计是网页头部的一种常见布局，可以展示五个不同的广告或重要信息板块，每个板块通常以大图配以文字说明的形式呈现，用户可以通过自动轮播或手动点击...

    ZOL五屏flash焦点图广告代码

    "ZOL五屏flash焦点图广告代码"是一个专门用于构建网页动态焦点图的资源，它适用于像中关村在线（ZOL）这样的网站，用以展示产品或服务的亮点。这种类型的广告代码通常采用Flash技术，使得图片轮播效果更加生动和吸引...

    中关村信息港全站

    综合以上分析，这个压缩包的内容可能涵盖了中关村信息港的数据库备份、网站源代码、特定项目或活动的文档，以及可能关联到其他域名的资源。对于IT专业人士来说，这些数据可以用于研究网站架构、数据分析、学习编程...

    中关村报价系统源码

    # 广告与栏目更好地关联，并全面使用混合广告位(一个广告位同时支持图片、FLASH、或代码)。 # 更加灵活的文档内容页面，url完全自定义，增加文档附加页页数（共支持4个文档页面），所有页面允许分页与生成静态。 # ...

    京东商城广告案例分析.ppt

    京东商城是中国知名的电子商务平台，其广告案例分析展示了京东在品牌发展、广告策略、核心竞争力以及市场定位等方面的独特之处。京东商城的目标是成为国内最大的电子商务公司，并在全球排名前五，其使命是让购物变得...

    仿中关村在线首页弹出式广告插件(jQuery版)

    根据给定的文件信息，我们可以了解到一个仿制中关村在线首页弹出式广告插件的实现细节，该插件基于jQuery框架编写。此插件可广泛应用于网页中，用于展示弹出式广告，其技术特点和实现逻辑如下： 1. 插件使用jQuery...

    我在中关村做JS的日子

    在中关村工作，JS开发者往往需要处理各种挑战，比如优化代码性能，确保网站的跨平台兼容性，以及在保障用户体验的同时，实现高效的数据处理和传输。此外，安全问题也不容忽视，例如防止XSS（跨站脚本攻击）和CSRF...

    中关村高新入库申请材料

    【中关村高新入库申请材料】是针对企业希望加入中关村高新技术企业库所必需准备的一系列文档，这一过程对于企业来说至关重要，因为它能为企业带来诸多优惠政策、资金支持以及品牌提升。以下是相关知识点的详细介绍：...

    python爬虫之中关村自动登录.zip

    代码仅供参考学习~代码仅供参考学习~代码仅供参考学习~代码仅供参考学习~代码仅供参考学习~中关村自动登录中关村自动登录是指通过爬虫脚本模拟用户在中关村在线官方网站上进行自动登录，以方便执行需要登录权限的...

    中关村手机爬虫

    爬取页面手机信息，并且通过mysql进行插入。方便查询！

    中关村IT报价系统源码

    【中关村IT报价系统】是一个专为信息技术领域设计的软件应用，它主要服务于中关村地区，提供实时、准确的IT产品价格信息。系统经过测试，确保在运行过程中无误，能够为用户带来稳定的服务体验。 该系统的核心功能...

    仿中关村游戏模板一套(dede)

    【标题】"仿中关村游戏模板一套(dede)"指的是基于DEDE CMS（织梦内容管理系统）设计的一款网站模板，专门用于构建游戏类网站。这个模板在设计上参考了知名的科技资讯平台中关村在线的游戏频道，旨在为游戏爱好者提供...

    中关村在线-3.8.2.

    软件名称：中关村在线 APK名称：com.zol.android 最新版本：3.8.2 支持ROM：1.6及更高版本 界面语言：简体中文 软件大小：5.57 M 开发者：zol.com.cn(CBS Interactive 中国) 发现者： adou232 应用简介 中关村在线...

    可用模拟攒机，模拟模拟中关村攒机系统

    标题中的“可用模拟攒机，模拟模拟中关村攒机系统”表明这是一个可以模拟中关村电脑组装流程的应用或服务。这种系统通常用于教学、测试配置或者让用户在购买前预览不同硬件组合的效果。模拟攒机软件通常包括各种硬件...

    旧版中关村在线

    旧版中关村在线，模仿该版本开发其他App

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