【前端】实际开发案例

开发案例

• 1. 奔跑的熊
• 2. 旋转木马
• 3. 背景换肤
• 4. tab栏切换
• 5. 下拉菜单
• 6. 发布留言
• • 1）原生JS实现
  • 2）vue 实现
  • 7. 动态生成表格
  • 8. 图片跟随鼠标移动
  • 9. 定时器实现
  • 10. 获取URL参数数据
  • 11. 拖动模态框(登陆界面)
  • 12. 放大镜效果
  • 13. 仿淘宝固定侧边栏
  • 14. 轮播图
  • 15. 导航栏背景图移动
  • 16. 记住用户名
  • 17. 手风琴效果
  • 18. 可视化示例图

    1. 奔跑的熊

                    Document            .ss {            width: 100%;            height: 450px;            background-image: url(/Picture/静态合集/山峰.jpg);        }                .ss .ss1 {            position: absolute;            width: 185px;            height: 100px;            top: 64%;            background: url(/Picture/静态合集/熊.png) no-repeat;            animation: xiong 1s steps(8) infinite, zhongxin 3s forwards;         }        @keyframes xiong {            0% {                background-position: 0 0;            }            100% {                background-position: -1500px 0;            }        }        @keyframes zhongxin {            0% {                left:0;            }            100% {                left:45%;                transform: translateX(-50%);            }        }                    

    2. 旋转木马

                    Document            body {            perspective: 1000px;            background-color: pink;        }        section {            position: relative;            transform-style: preserve-3d;            width: 300px;            height: 200px;            margin: 300px auto;            animation: xzmm 10s linear infinite;        }        section:hover {            animation-play-state: paused;        }        @keyframes xzmm {            0% {                transform: rotateY(0);            }            100% {                transform: rotateY(360deg);            }        }        section p {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;            background: url(https://blog.csdn.net/Picture/动图合集/雨滴.gif) no-repeat;        }        section p:nth-child(1) {            transform: translateZ(300px);        }        section p:nth-child(2) {            transform: rotateY(60deg) translateZ(300px);        }        section p:nth-child(3) {            transform: rotateY(120deg) translateZ(300px);        }        section p:nth-child(4) {            transform: rotateY(180deg) translateZ(300px);        }        section p:nth-child(5) {            transform: rotateY(240deg) translateZ(300px);        }        section p:nth-child(6) {            transform: rotateY(300deg) translateZ(300px);        }                                                                    

    3. 背景换肤

    点击图片，更换背景

                        Document                img {            position: relative;            width: 100px;            height: 100px;            margin: auto;            left: 20%;            margin-top: 50px;        }                    // 1. 获取元素        var imgs = document.getElementsByTagName('img');        var body = document.body;        // 2. 循环注册事件        for(var i = 0; i  
    4. tab栏切换
     
    跟着tab栏切换，内容也跟着变
     
                    tab栏切换            * {            margin: 0;            padding: 0;        }        .tab {            padding: 10px 20px;        }        .tab .tab_list {            background-color: #eef1ee;            height: 39px;            border: 1.5px solid #d8dad8;        }        .tab_list li {            float: left;            line-height: 38px;            padding: 0 20px;            list-style: none;            text-align: center;            cursor: pointer;        }        .tab_list .current {            position: relative;            top: -1px;            background-color: #c81623;            color: #fff;            border: 1.5px solid #b95c53;        }        .tab_con .item {            display: none;        }                            
    商品介绍
                    
    规格与包装
                    
    销后保障
                    
    商品评价
                    
    手机社区
                
                                        商品介绍模块内容                                        规格与包装模块内容                                        销后保障模块内容                                        商品评价模块内容                                        手机社区模块内容                                    var lis = document.getElementsByTagName('li');        var item = document.getElementsByClassName('item');        console.log(lis);        for(var i = 0; i  
    5. 下拉菜单
     
    鼠标经过，显示下拉菜单
     
                    下拉菜单            li { list-style: none; }        a {text-decoration: none;}        .nav>li {            float: left;            margin: 0 10px;        }        .nav li a {            /* background-color: pink; */            padding-left: 10px;        }        .nav>li>a:hover {            background-color: #eee;        }        .nav ul {            display: none;            position: absolute;            padding: 0px;            margin: 0;            /* width: 100%; */            border-left: 1px solid #FECC5B;            border-right: 1px solid #FECC5B;        }        .nav ul li {            border-bottom: 1px solid #FECC5B;        }        .nav ul li a {            padding: 0 10px;        }        .nav ul li a:hover {            background-color: #FFF5DA;        }        

    • 微博∨
      • 私信
      • 评论
      • @我
    • 微信∨
      • 私信
      • 评论
      • @我
    • QQ ∨
      • 私信
      • 评论
      • @我
    // 1. 获取元素 var nav = document.querySelector('.nav'); var span = document.querySelectorAll('#l'); var lis = nav.children; console.log(span); // 2. 循环注册事件 for(var i = 0; i

    6. 发布留言

    1）原生JS实现

    进行留言，删除等操作

                                        
                var textarea = document.getElementById('wenbenyu');        var input = document.getElementById('anniu');        var ul = document.querySelector('ul'); // 获取父节点        input.onclick = function() {            if(textarea.value == '') {                alert('你没有输入内容');                return false;            } else {                 // 1. 创建节点元素节点                var li = document.createElement('li');                li.innerHTML = textarea.value + '删除';                // 添加元素                ul.insertBefore(li, ul.children[0]);                // 删除元素                var as = document.querySelectorAll('a');                for(var i = 0; i  
    2）vue 实现
      
                
    在线便签
                    
                    {{index +1+'.'}} {{item }}                X            
                
                    {{ arr.length+ ' 组数据'}}                 clear              
            
        var app = new Vue({        el: "#app",        data: {            arr: [],            massage: '',            content: 222        },        methods: {            // 添加            add: function (p1) {                this.arr.push(p1);                this.massage = ''            },            // 移除            remove: function () {                this.arr.shift();            },            // 全删            del: function () {                this.arr = []            },            // 鼠标经过            delX: function (p1) {                massage = p1            }        }    })
     
    7. 动态生成表格
     
    动态生成表格，可以对其进行删除
     
                    动态表格            table {            width: 500px;            margin: 100px auto;            border-collapse: collapse;            text-align: center;        }        td, th {            border: 1px solid #333;        }        thead tr {            height: 40px;            background-color: #ccc;        }        

    姓名	科目	成绩	操作

    // 1. 准备数据 var dates = [ { name: '买买提', subject: 'Javascript', score: 100 }, { name: '古丽', subject: 'Javascript', score: 100 }, { name: '艾莉', subject: 'Javascript', score: 100 }, { name: '卖力', subject: 'Javascript', score: 100 }, ]; // 2. tbody创建行 var tbody = document.querySelector('tbody'); for(var i = 0; i

    8. 图片跟随鼠标移动

    图片随着鼠标一起移动

                    图片跟随鼠标移动            img {            position: absolute;        }                    var img = document.querySelector('img');        document.addEventListener('mousemove', function(e) {            console.log(e.clientX);            console.log(e.clientY);            img.style.left = e.pageX - 15 + 'px';            img.style.top = e.pageY - 15 + 'px ';        });    

    9. 定时器实现

    实现计时功能

                    定时器            span{            float: left;            width: 20px;            height: 20px;            background-color: #000;            color: #fff;            padding-left: 10px;            padding-right: 10px;            margin: 2px;        }        1    1    1            // 获取元素        var hour = document.querySelector('.hour'); // 小时        var minute = document.querySelector('.minute'); // 分钟        var second = document.querySelector('.second'); // 秒        var inputTime = +new Date('2022-12-26 14:41:00'); // 返回的是用户输入时间总的毫秒数        conutDown(); // 先调用一次        // 开启定时器        var timer = setInterval(conutDown, 1000);                function conutDown() {            var nowTIme = +new Date(); // 返回的时当前时间总的毫秒数            var times = (inputTime - nowTIme) / 1000; // time 是剩余时间总的毫秒数            if(times                 window.clearInterval(timer);            }            var h = parseInt(times / 60 / 60 % 24); // 时            h = h = 320){                goBack.style.display = "block";            } else {                goBack.style.display = "none";            }        }            

    14. 轮播图

                        轮播图            .focus {position: relative;            margin-left: 110px;            margin-top: 50px;            width: 500px;            height: 300px;            border-top: 10px solid rgb(22, 20, 20);             border-bottom: 10px solid rgb(22, 20, 20);             border-right: 10px solid rgb(1, 185, 41);             border-left: 10px solid rgb(1, 185, 41);             background-color: pink;            overflow:hidden;        }        .arrow-l {            position: absolute;            font-size: 30px;            width: 25px;            top: 130px;            padding-bottom: 4px;            color: rgba(255, 255, 255, 0.629);            background-color: rgba(0, 0, 0, 0.34);            border-top-right-radius:100px;            border-bottom-right-radius:100px;            display: none;            z-index: 3;            text-align: center;        }        .arrow-r {            position: absolute;            font-size: 30px;            width: 25px;            top: 130px;            text-align: center;            padding-bottom: 4px;            color: rgba(255, 255, 255, 0.629);            background-color: rgba(0, 0, 0, 0.34);            margin-left: 475px;            border-top-left-radius:100px;            border-bottom-left-radius: 100px;            display: none;            z-index: 3;        }        .focus ul {            position: absolute;            top: 0px;            left: 0px;            width: 600%;            z-index: 1;        }        ul li {            float: left;            display:inline;            width: 500px;            height: 300px;        }        ul img {            width: 500px;            height: 300px;        }        .focus ol {            position: relative;            top: 95%;            width: 200px;            left: 12%;            z-index: 3;        }        ol li {            float: left;            margin-left: 5px;            border-radius: 10px;            border: 1.5px solid #fff;            width: 8px;            height: 8px;        }        .current {            background-color: #fff;        }                         <                  >                 
                                
                 
                                
                 
                                
            
                // 简单动画函数封装        function animate(obj, target, callback) {            // 清除以前的定时器，只保留当前定时器            clearInterval(obj.timer);            obj.timer = setInterval(function() {                // console.log(obj.offsetLeft);                // 步长值                var step = (target - obj.offsetLeft) / 10;                // 判断正负，并解决小数点的问题                step = step > 0 ? Math.ceil(step) : Math.floor(step);                // console.log(step);                // 达到目标距离，结束定时器，执行回调函数                if(obj.offsetLeft == target) {                    clearInterval(obj.timer);                    // if(callback) {                    //     callback();                    // }                    callback && callback();                }                // 吧每次加一 这个步长值改为一个缓慢变小的值， 步长公式：（目标值 - 现在的位置） / 10                obj.style.left = obj.offsetLeft + step + 'px';                            }, 15);        }        var arrow_l = document.querySelector('.arrow-l');        var arrow_r = document.querySelector('.arrow-r');        // 1. 鼠标经过显示左右按钮，离开隐藏左右按钮        var focus = document.querySelector('.focus');        focus.addEventListener('mouseover', function() {            arrow_l.style.display = 'block';            arrow_r.style.display = 'block';            clearInterval(timer); // 停止自动播放            timer = null; // 清除定时器变量        })        focus.addEventListener('mouseout', function() {            arrow_l.style.display = 'none';            arrow_r.style.display = 'none';            // 鼠标离开开启定时器，自动播放            timer = setInterval(function() {                // 手动调用点击事件                arrow_r.click();            }, 2500);        })                // 获取focus宽度        var focusWidth = focus.clientWidth;        // 2. 动态生成小圆圈，有几张图片，就生成几个小圆圈        var ul = focus.querySelector('ul');        var ol = focus.querySelector('.circle');        for(var i=0; i