javascript与html5实战

其他 2019-02-23 19:39:03 阅读次数: 0
版权声明：分享才能获得最大的价值 https://blog.csdn.net/qq_32252957/article/details/86429295

建议阅读人群: 前端学过html5、css、javascript的开发者
经过一些实战，各位程序员就可以开始学习一些框架了，如jquery、boostrap、vue.js、angular、react等等。
源代码图片等地址: 轮播图项目资源

参考文档：MSDN IconFont
分享一个小模块的实战，是轮播图的实现。

效果

整体布局样式:
整体样式
主菜单内容:
主菜单内容

流程图:
流程图

代码部分:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合实例</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main" id="main">
        <div class="menu-box"></div>
        <!-- 子菜单 -->
        <div class="sub-menu hide" id="sub-menu">
            <!-- 手机、配件 -->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">手机、配件</div>
                    <div class="sub-row">
                        <span class="bold mr10">手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">以旧换新</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">手机配件：</span>
                        <a href="">手机壳</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">手机存储卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">数据线</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">充电器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">电池</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">运营商：</span>
                        <a href="">中国联通</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">中国移动</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">中国电信</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">智能设备：</span>
                        <a href="">智能手环</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">智能家居</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">智能手表</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">娱乐：</span>
                        <a href="">耳机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">音响</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">收音机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">麦克风</a>
                    </div>
                </div>
            </div>
            <!-- 电脑 -->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">电脑</div>
                    <div class="sub-row">
                        <span class="bold mr10">电脑：</span>
                        <a href="">笔记本</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">平板</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">一体机</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">电脑配件：</span>
                        <a href="">显示器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">CPU</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">主板</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">硬盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">电源</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">显卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">游戏设备：</span>
                        <a href="">游戏机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">耳机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">游戏软件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">网络产品：</span>
                        <a href="">路由器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">网络机顶盒</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">交换机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">存储卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">网卡</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">外部产品：</span>
                        <a href="">鼠标</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">键盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">U盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">移动硬盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">鼠标垫</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">电脑清洁</a>
                    </div>
                </div>
            </div>
            <!-- 家用电器 -->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">家用电器</div>
                    <div class="sub-row">
                        <span class="bold mr10">电视：</span>
                        <a href="">国产品牌</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">韩国品牌</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">欧美品牌</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">空调：</span>
                        <a href="">显示器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">柜式</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">中央</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">壁挂式</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">冰箱：</span>
                        <a href="">多门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">对开门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">三门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">双门</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">洗衣机：</span>
                        <a href="">滚筒式洗衣机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">迷你洗衣机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">洗烘一体机</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">厨房电器：</span>
                        <a href="">油烟机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">洗碗机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">燃气灶</a>
                    </div>
                </div>
            </div>
            <!-- 家具 -->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">家具</div>
                    <div class="sub-row">
                        <span class="bold mr10">家纺：</span>
                        <a href="">被子</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">枕头</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">四件套</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">床垫</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">灯具：</span>
                        <a href="">台灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">顶灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">节能灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">应急灯</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">厨具：</span>
                        <a href="">烹饪锅具</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">餐具</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">菜板刀具</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">家装：</span>
                        <a href="">地毯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">沙发垫套</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">装饰字画</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">照片墙</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">窗帘</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">生活日用：</span>
                        <a href="">收纳用品</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">浴室用品</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">雨伞雨衣</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主菜单 -->
        <div class="menu-content" id="menu-content">
            <div class="menu-item">
                <a href="">
                    <span>手机、配件</span>
                    <i>&#xe665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>电脑</span>
                    <i>&#xe665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>家用电器</span>
                    <i>&#xe665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>家具</span>
                    <i>&#xe665;</i>
                </a>
            </div>
        </div>
        <!-- 图片轮播 -->
        <div class="banner" id="banner">
            <a href="">
                <div class="banner-slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
        </div>
        <!-- 上一张、下一张按钮 -->
        <!-- 表示一个死链接，当用户链接时，void(0)计算为0， 但Javascript
        上没有任何效果 button定义公共的按钮样式，prev和next分别定义不同的样式 -->
        <a href="javascript:void(0)" class="button prev" id="prev"></a>
        <a href="javascript:void(0)" class="button next" id="next"></a>
        <!-- 圆点导航 -->
        <div class="dots" id="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

style.css整体样式:

*{
    margin: 0;
    padding: 0;
}
/* web端unicode引用，不支持多色图标 */
@font-face {font-family: 'iconfont';
    src: url('../img/font/iconfont.eot');
    src: url('../img/font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../img/font/iconfont.woff') format('woff'),
    url('../img/font/iconfont.ttf') format('truetype'),
    url('../img/font/iconfont.svg#iconfont') format('svg');
}

ul{
    list-style: none;
}

a:link,a:visited{
    text-decoration: none;
    color:#5e5e5e;
}

body{
    font-family: "微软雅黑";
    color: #14191e;
    background-color: #FFFFF0;
}

.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    /* overflow属性指定如果内容溢出一个元素的框，会发生什么
    默认值是visible */
    overflow: hidden;
    position: relative;
}

.banner{
    width: 1200px;
    height: 460px;
    /*
    relative定位: 
    相对定位元素的定位是相对其正常位置 
     */
    overflow: hidden;
    position: relative;
}

.banner-slide{
    width: 1200px;
    height: 460px;
    /*
    默认定位: static,HTML元素的默认值，即没有定位，元素出现在正常的流中
    absolute定位:
    绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有已定位的
    父元素，那么它的位置相对于<html>
     */
    position: absolute;
    background-repeat: no-repeat;
    display: none; /*该元素不会被显示*/
}

.slide1{
    /* 注意 background: 会覆盖各个默认属性，因此需要具体来设置 */
    background-image: url("../img/bg1.jpg");
}

.slide2{
    /* 注意 background: 会覆盖各个默认属性，因此需要具体来设置 */
    background-image: url("../img/bg2.jpg");
}

.slide3{
    /* 注意 background: 会覆盖各个默认属性，因此需要具体来设置 */
    background-image: url("../img/bg3.jpg");
}

/* 选中所选的轮播图 */
.slide-active{
    display: block;
}

.button{
    /* absolute元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位 */
    position: absolute;
    width: 40px;
    height: 80px;
    /* left属性规定元素的左边缘。该属性定义了定位元素左边距边界与其包含块左边界之间的偏移 */
    left: 244px;
    /* top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移 */
    top: 50%;
    margin-top: -40px;
    background: url(../img/arrow.png) no-repeat center center;
}

.button:hover{
    background-color: #333;
    opacity: 0.8;
    filter:alpha(opacity=80); /* IE8 及其更早版本 */
}

.prev{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
}

.next {
    /*需要设置left,因为上面css设置了*/
    left: auto;
    right: 0px;
}

.dots{
    position: absolute;
    right: 0px;
    bottom: 24px;
    text-align: right; /*文本的对齐方式*/
    padding-right: 24px;
}

.dots span{
    /* 圆点在同一水平线上 */
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 12px;
    background: rgba(7, 17, 27, 0.4);
    margin-left: 8px;
    /* 添加阴影, 阴影的大小时2px,阴影的颜色是白色，并且是内阴影
    box-shadow: h-shadow v-shadow blur spread color inset */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
    cursor: pointer;
}

.dots span.active{
    box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
    background: #fff;
}

/* 导航菜单 */
.menu-box{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0;
    top: 0;
    /* rgba和opacity都能实现透明效果，但最大的不同是opacity作用于元素
    以及元素内的所有内容的透明度，而rgba只作用于元素的颜色或其背景色 */
    background: rgba(7, 17, 27, 0.4);
    opacity: 0.5;
    /* div.menu-box和div.banner都是动态定位(非static定位),因此要设置z-index堆叠 */
    z-index: 1;
}

.menu-content{
    width: 244px;
    height: 454px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding-top: 6px;
}

.menu-item{
    height: 64px;
    line-height: 66px;
    font-size: 16px;
    /* 上下填充是0px 左右填充是5px */
    padding: 0 24px; 
    cursor: pointer;
    position: relative;
}

.menu-item a:link, .menu-item a:visited{
    color: #fff;
}

.menu-item a{
    display: block;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 8px;
    height: 63px;
}

.menu-item:last-child a{
    border-bottom: none;
}

.menu-item i{
    /* 绝对定位的元素的位置相对于最近的已定位父元素，如果父元素没有已定位的父元素
    我们应该让div.menu-item为相对定位 */
    position: absolute; 
    right: 32px;
    font-size: 24px;
    /* 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移 */
    top: 2px;
    font-family: "iconfont";
    font-style: normal;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
}

.sub-menu{
    width: 730px;
    height: 458px;
    border: 1px solid #d9dde1;
    background: #fff;
    position: absolute;
    left: 244px;
    z-index: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.inner-box{
    width: 100%;
    height: 100%;
    background: url(../img/fe.png) no-repeat;
    display: none;
}

.sub-inner-box{
    width: 652px;
    margin-left: 40px;
    overflow: hidden;
}

.title{
    color: #f01414;
    font-size: 16px;
    line-height: 16px;
    margin: 28px 0 30px 0;
    font-weight: bold;
}

.sub-row{
    margin-bottom: 25px;
}

.bold{
    /* 数字定义由粗到细的字符，400等同与normal,而700等同与bold */
    font-weight: bold; 
}

.mr10{
    margin-right: 10px;
}

.ml10{
    margin-left: 10px;
}

.hide{
    display: none;
}

script.js

//封装一个代替getElementById()的方法
function byId(id){
   return typeof(id) === "string" ? document.getElementById(id) : id;
}

var index = 0, 
    timer = null,
    pics = byId("banner").getElementsByTagName("div"),
    dots = byId("dots").getElementsByTagName("span"),
    prev = byId("prev"),
    next = byId("next"),
    len = pics.length,
    menu = byId("menu-content"),
    subMenu = byId("sub-menu"),
    innerBox = subMenu.getElementsByClassName("inner-box"),
    // getElementsByClassName()方法返回文档中所有指定类名的元素集合
    //IE8及以下浏览器不支持这种方法
    menuItems = menu.getElementsByClassName("menu-item");

function slideImg(){
    var main = byId("main");
    //鼠标指针移动到指定的元素上时发生, 则清除定时器，离开继续
    main.onmouseover = function() {
        if(timer) clearInterval(timer);
    }
    main.onmouseout = function() {
        timer = setInterval(function() {
            index ++;
            if(index >= len) {
                index = 0;
            }
            //切换图片
            changeImg();
        }, 3000);
    }
    main.onmouseout(); // 自动在main上触发鼠标离开的事件

    //遍历所有圆点，且绑定点击事件，点击圆点切换图片
    for(var j = 0; j < len; j++) {
        // 给所有span添加一个id的属性，值为j,作为当前span的索引
        dots[j].id = j;
        dots[j].onclick = function() {
            index = this.id;
            changeImg();
        }
    }

    //下一张
    next.onclick = function() {
        index++;
        if(index >= len) index = 0;
        changeImg();
    }

    //上一张
    prev.onclick = function() {
        index --;
        if(index < 0) index = len - 1;
        changeImg(); 
    }

    // 导航菜单
    //遍历主菜单，且绑定事件
    for(var k = 0; k < menuItems.length; k++) {
        menuItems[k].setAttribute("data-index", k); //非标准属性不能直接使用element.xx   
        menuItems[k].onmouseover = function() {
            // 给每一个menu-item定义data-index属性，作为索引
            var idx = this.getAttribute("data-index");
            subMenu.className = "sub-menu";//将子菜单hide类去掉，显示
            //鼠标滑过时隐藏所有的div.inner-box,然后指定div.inner-box显示出来
            for(var m = 0; m < menuItems.length; m++){
                if(m == idx){
                    innerBox[idx].style.display = "block";
                    //将鼠标指向的主菜单中的菜单项背景设置，便于查看
                    menuItems[m].style.background = "rgba(0, 0, 0, 0.1)";
                    continue;
                }
                innerBox[m].style.display = "none";
                menuItems[m].style.background = "none";
            }
        }

        menu.onmouseout = function() {
            subMenu.className = "sub-menu hide";
        }

        //鼠标滑出div.menu主菜单，滑入div.sub-menu子菜单，则继续显示
        subMenu.onmouseover = function() {
            this.className = "sub-menu";
        }

        //鼠标滑出子菜单本身也需要隐藏
        subMenu.onmouseout = function() {
            this.className = "sub-menu hide";
        }
    }
}

//切换图片
function changeImg(){
    // 遍历banner下所有的div及dots下所有的span,将div隐藏,将span清除类
    for(var i = 0; i < len; i++){
        pics[i].style.display = "none";
        dots[i].className = "";
    }
    // 根据index索引找到当前div和当前span,将其显示出来
    pics[index].style.display = "block";
    dots[index].className = "active";
}

slideImg();

总结: 基本上学习到这里就需要学习各种开发框架，站在巨人肩膀上更有效率的做事情，接下来我会对照vue.js官方文档分享一些vue.js开发的初中级知识

猜你喜欢

转载自blog.csdn.net/qq_32252957/article/details/86429295
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022