SpringBoot 2.× 手把手零基础入门与进阶_技术问答

慕田峪6071243

我的为什么不一样

2020-05-08 0回答·908浏览
Java入门小白

有没有做成功的同学

2019-04-26 1回答·1093浏览
请叫我幸运女神的女儿

鼠标移上去后倒影变得很浅，其他都没什么问题

因为覆盖的原因，可以把z-index变的大一点

2018-07-17 1回答·1213浏览
学好底层

添加不了main_background !!!!

把你的for(var i=0;i<clear_main.length;i++) 换成 for(var i=0;i<clear_ctrl.length;i++)

2018-06-26 1回答·1185浏览
qq_弥猫深巷心如荒岛囚我终老_0

谁有这个课程

慕课网看就行了

2017-09-15 1回答·1170浏览
慕斯卡8624133

第七步获取模板修改ID添加背景图片加不上去呀？

仔细核实下代码，包括各种符号

2017-07-20 1回答·2318浏览
吾名曰空

.main-i_active和.ctrl-i_active

在 HTML 中虽然没有定义, 但是在 CSS样式中已经设定了它们的属性及值 -->页面加载时,浏览器会拿到这两个类
当js控制某个元素, 添加了这两个类, 浏览器就会自动加载在CSS样式中定义好的属性 ...
---------------
可以去了解一下浏览器怎样加载页面的.........QAQ

2017-03-19 1回答·1023浏览
请叫我橙子蛋
自动播放功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>预览图幻灯片</title>
    <style type="text/css">
        h1,h2{
            margin:0;
            padding:0;
            font-weight:normal;
        }
        html,body{
            margin:0;
            padding:0;
        }
        body{
            background-color:#fff;
            font-size:100%;
            color:#555;
            -webkit-font-smoothing:antialiased;
        }
        .slider{
            width:1280px;
            margin:0 auto;
            position:relative;
        }
        .slider .main{
            width:100%;
            height:400px;
            overflow:hidden;
            position:relative;
        }
        .slider .main .main-i{
            position:absolute;
            left:-50%;
            top:0;
            height:400px;
            opacity:0;
            transition:all 0.5s;
            -webkit-transition:all 0.5s;
            z-index:2;
        }
        .slider .main .main-i-right{
            left:50%;
        }
        #main_background,
        .slider .main .main-i-active{
            left:0;
            opacity:1;
        }
        #main_background{
            z-index:1;
        }
        .slider .main .main-i .caption{
            position: absolute;
            right:58%;
            top:20%;
            text-align:right;
            z-index:2;
        }
        .slider .main .main-i .caption h2{
            font-size:2.6rem;
            line-height:3rem;
            color:#b5b5b5;
            margin-right:3rem;
        }
        .slider .main .main-i .caption h1{
            font-size:4.6rem;
            color:#000;
            font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            margin-right:-5rem;
        }
        .slider .main .main-i .caption h1,
        .slider .main .main-i .caption h2{
            opacity:0;
            transition:all .8s 1s;
            -webkit-transition:all .8s .6s;
        }
        .slider .main .main-i-active .caption h1,
        .slider .main .main-i-active .caption h2{
            opacity:1;
            margin-right:0;
        }
        .slider .main .main-i img{
            display:block;
            position:relative;
            left:0;
            top:50%;
            z-index:1;
        }

        .slider .ctrl{
            position:absolute;
            left:0;
            bottom:-13px;
            height:13px;
            width:100%;
            text-align:center;
            z-index:9;
            font-size: 0;
        }
        .slider .ctrl .ctrl-i{
            display:inline-block;
            position:relative;
            height:13px;
            width:150px;
            background-color:#666;
            margin-left:1px;
            box-shadow:0 1px 1px rgba(0,0,0,0.3);
            transition:all 0.3s;
            -webkit-transition:all 0.3s;
        }
        .slider .ctrl .ctrl-i img{
            display:block;
            width:100%;
            border:0;
            position:absolute;
            left:0;
            bottom:50px;
            transition:all 0.3s;
            -webkit-transition:all 0.3s;
            opacity:0;
            z-index:0;
        }
        .slider .ctrl .ctrl-i:hover{
            background-color:#f0f0f0;
        }
        .slider .ctrl .ctrl-i:hover img{
            bottom:13px;
            opacity:1;
            -webkit-box-reflect:below 0px -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(transparent),
                color-stop(50%,transparent),
                to(rgba(255,255,255,0.3))
            );
        }
        .slider .ctrl .ctrl-i-active:hover,
        .slider .ctrl .ctrl-i-active{
            background-color:#000;
        }
        .slider .ctrl .ctrl-i-active:hover img{
            opacity:0;
        }

    </style>
</head>
<body>
    <div class="slider">
        
        <div class="main" id="template_main">
            <div class="main-i {{css}}" id="main_{{index}}">
                <div class="caption">
                    <h2>{{h2}}</h2>
                    <h1>{{h1}}</h1>
                </div>
                <img src="./imgs/{{index}}.jpg" alt="" class="slider_pic" />
            </div>
        </div>

        <div class="ctrl" id="template_ctrl">
            <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
                <img src="./imgs/{{index}}.jpg" alt="" />
            </a>
        </div>

    </div>

    <script type="text/javascript">
        var data=[
            {img:1,h1:'DUET',h2:'Creative'},
            {img:2,h1:'DEVIL',h2:'Friendly'},
            {img:3,h1:'COMPATRIOT',h2:'Tranquilent'},
            {img:4,h1:'HUSSLER',h2:'Insecure'},
            {img:5,h1:'REBEL',h2:'Loving'},
            {img:6,h1:'SEEKER',h2:'Passionate'},
            {img:7,h1:'FRIEND',h2:'Crazy'},
        ];
        var num=1;

        // 获取DOM节点
        var g=function(id){
            if(id.substr(0,1)=='.'){
                return document.getElementsByClassName(id.substr(1));
            }

            return document.getElementById(id);

        }

        // 添加幻灯片的操作及对应的按钮
        function addSliders(){
            var tpl_main=g('template_main').innerHTML
                            .replace('/^\s*/','')
                            .replace('/\s*$/','');
            var tpl_ctrl=g('template_ctrl').innerHTML
                            .replace('/^\s*/','')
                            .replace('/\s*$/','');

            // 定义最终输出的HTML的变量
            var out_main=[],
                out_ctrl=[];

            // 遍历数据
            for(i in data){
                var _html_main=tpl_main
                                .replace(/{{index}}/g,data[i].img)
                                .replace(/{{css}}/g,['','main-i-right'][i%2])
                                .replace(/{{h1}}/g,data[i].h1)
                                .replace(/{{h2}}/g,data[i].h2);
                var _html_ctrl=tpl_ctrl
                                .replace(/{{index}}/g,data[i].img);

                out_main.push(_html_main);
                out_ctrl.push(_html_ctrl);
            }

            g('template_main').innerHTML=out_main.join('');
            g('template_ctrl').innerHTML=out_ctrl.join('');

            // 加一背景图片
            g('template_main').innerHTML+=tpl_main
                                .replace(/{{h1}}/g,data[0].h1)
                                .replace(/{{h2}}/g,data[0].h2);
            g('main_{{index}}').id="main_background";

        }

        // 幻灯片切换
        function switchSlider(n){
            num=n;
            console.log(num);
            var main=g('main_'+n);
            var ctrl=g('ctrl_'+n);

            var clear_main=g('.main-i');
            var clear_ctrl=g('.ctrl-i');
            for(i=0;i<clear_ctrl.length;i++){
                clear_ctrl[i].className=clear_ctrl[i].className.replace(' ctrl-i-active','');
                clear_main[i].className=clear_main[i].className.replace(' main-i-active','');
            }

            main.className+=' main-i-active';
            ctrl.className+=' ctrl-i-active';

            // 切换的时候把当前的图添加到背景图
            setTimeout(function(){
                g('main_background').innerHTML=main.innerHTML;
            },1000);

        }

        // 调整图片位置
        function movePics(){
            var slider_pics=g('.slider_pic');
            for(i=0; i<slider_pics.length;i++){
                slider_pics[i].style.marginTop=(-1*slider_pics[i].clientHeight/2)+'px';
            }
        }

        //自动播放
        function autoPlay(){
            setInterval(function(){
                console.log(num);
                switchSlider(num);
                num++;
                if(num>7){
                num=1;
                }
            },3000);

        }

        // 定义何时处理幻灯片输出
        window.onload=function(){
            addSliders();
            setTimeout(function(){
                movePics();
            },100);
            switchSlider(1);
            autoPlay();
        }
    </script>
</body>
</html>
2017-03-15 4回答·3022浏览
陌上出尘泪
两个标题是怎么弄的

已采纳慕工具人的回答
.slider .main .main-i .caption h2{
font-size: 30px;
color: #999;
line-height: 30px;
text-align: right;
}
.slider .main .main-i .caption h3{
font-size: 40px;
color: #333;
line-height: 40px;
text-align: right;
font-family: "楷体";
}
.slider .main .main-i h2{
margin-right:100px ;
transition: all 1s ease .5s;
}
.slider .main .main-i h3{
margin-right:-100px ;
transition: all 1s ease .5s;
}
2017-02-08 1回答·1469浏览
慕少5500217

replace替换

已采纳 hope_HLY 的回答

首先，前半部分 ['','main-i_right'] 是个数组，有两个元素，一个为空字符串，一个为
main-i_right 其次，计算 i%2的值，最后将计算出来的值和前面的数组看成一个整体。
eg: ['','main-i_right'][7%2]---->['','main-i_right'][1]---->main-i_right
['','main-i_right'][6%2]----->['','main-i_right'][0]----->' '

2016-10-18 2回答·1686浏览
qq_活到老学到老_1

第七步d的问题

我也是，第七步代码帖进去，报错：
Uncaught TypeError: Cannot read property 'className' of undefined
at switchSlider (index.html:224)
at window.onload (index.html:241)
查找原因，
//5.3清除active样式；
for (var i = 0; i < clear_ctrl.length; i++) {
clear_ctrl[i].className = clear_ctrl[i].className.replace('ctrl-i_active','');
clear_main[i].className = clear_main[i].className.replace('main-i_active','');
}
第五步，for循环的条件， i < clear_ctrl.length，必须取控制按钮的长度，不能取clear_main.length

2016-10-17 3回答·819浏览
守候你的季节

在这个案例的基础上增加了自动轮播、导航箭头控制轮播以及将 HTML中控制按钮中的 switchSlider 移到了js文件中，从而实现结构、行为的分离

main.js中第46行的注释写错了，你们懂的，不加 [0]得到的是一个伪数组

2016-09-13 1回答·1339浏览

先将文字安排好初始样式（初始位置），再添加个结束样式（最终位置），再统一用css3的transition触发，

我这里写了个小例子，只需要对class名进行更改就可以出现动画效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .div .a{margin-top:15px}
        .div .b{margin-top:40px}
        .div .a,
        .div .b{transition:all .8s}
        .div-end .a,
        .div-end .b{margin-top:0px;transition:all .8s}
    </style>
</head>
<body>
<div class="div">     //这里只需要改成div-end就会出现动画效果
<div class="a">HELLO</div>
<div class="b">HERE</div>
</div>
</body>
</html>

2016-08-31 2回答·901浏览

欧阳小绿

请问这是什么编辑器呢？

Sublime Text

2016-07-28 2回答·835浏览
qq_默默向上游_0

图片没有显示,审查元素里有7个img

var main=g('.main_'+n);
var ctrl=g('.ctrl_'+n);
81，82行调用的是id，前面没有点，
var main=g('main_'+n);
var ctrl=g('ctrl_'+n);
这样就对了哈

2016-07-26 1回答·1806浏览
慕的地3655991

replace(/{{index}}/g, data[i].img)这句里面的{{}}起什么作用？？

2016-07-06 6回答·2081浏览
momoyy123

['','main-i-right'][i%2]什么意思

已采纳益铭的回答

左边是数组arr,arr[0]="",arr[1]="main-i-right"，右边是取出数组中元素，通常用数字索引，像我左边写的那样，老师用i%2这个表达式来求得0或1，其实就是i为奇数得1，i为偶数得0。

2016-06-02 2回答·1819浏览
yufch90

复制当背景的问题

楼主，你问题解决了没有，我应该也是你这个问题，浏览器的控制台上显示data【i】未定义，一直在找都找不到原因，data【i】明明是全局的啊，怎么出现未定义呢

2016-03-20 2回答·820浏览
CR7天天向上

关于源码上传

太谢谢了，弄懂了问题

2016-03-11 2回答·874浏览
Xu_Cloudragon

浏览器窗口缩小，按钮会变化

把按钮大小单位px

2016-01-26 1回答·940浏览
丫丫yy

遇到问题了，大神求解

看了半天都看不出你的问题在哪里，上代码吧

2015-12-21 1回答·902浏览
StarCrew

预览图片没有显示

被覆盖的原因，不过下次提问题还是记得贴个代码哈~

2015-12-15 2回答·934浏览
黑涩丶co

<div class="main-i" id="main_background"> <div class="caption"> <h2>Crazy</h2> <h3>FRIEND</h3> </div> <img src="../img/{{index}}.jpg" class="picture" style="margin-top: -674.5px;"> </div> 求教怎么会是这样呢

怎么会是哪样？

2015-11-27 1回答·3039浏览
QMT

图片定位问题

css截图

2015-10-26 3回答·776浏览
玥天

优化背景切换

.replace(/{{h2}}/g,data[i].h1)
.replace(/{{h3}}/g,data[i].h2)
这个错了吧，i没定义

2015-09-05 1回答·1176浏览
心若冰清_1207

图片垂直居中时，获取到的图片高度大于图片的实际高度

2015-08-17 3回答·945浏览
hamsecret

第7步之后报错

在“5.3 清除他们的active样式“这里，如果for循环用了“clear_main.length”，存在数组越界问题，因为我们在前面做背景时加了一个main_background，for循环把它改为"clear_ctrl.length"就没问题了；

2015-07-28 5回答·1098浏览
smilelove

#main_background

已采纳 arlenhui 的回答

可以的

2015-07-15 2回答·1295浏览
qq_放飞梦想_6

在哪儿可以下载到源码呢

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Preview Slideshow</title>
   <style type="text/css">
       *{
           padding: 0;
           margin: 0;
       }
       body{
           padding: 50px 0;
           background-color:#fff;
           font-size:14px;
           font-family: 'Avenir Next';
           color:#555;
           -webkit-font-smooth:antialiased;
       }
       .slider .main, .slider .main .main-i, .slider {
           width: 100%;
           height: 400px;
           position: relative;
       }
       /*幻灯片区域的样式*/
       .slider .main{
           overflow: hidden;
       }
       /*每个幻灯片的样式*/
       .slider .main .main-i{}
       .slider .main .main-i img{
           width: 100%;
           position: absolute;
           left: 0;
           top: 50%;
           z-index: 1;
       }
       .slider .main .main-i .caption{
           position: absolute;
           right: 50%;
           top: 30%;
           z-index: 9;
       }
       .slider .main .main-i .caption h2{
           line-height: 50px;
           font-size: 40px;
           text-align: center;
           color: b5b5b5;
       }
       .slider .main .main-i .caption h3{
           line-height: 50px;
           font-size: 70px;
           text-align: center;
           color: #000;
           font-family: 'Open Sans Condensed';
       }

       /*控制按键区域的样式*/
       .slider .ctrl{
           width: 100%;
           height: 13px;
           line-height: 13px;
           text-align: center;
           position: absolute;
           left: 0;
           bottom: -13px;
       }
       .slider .ctrl .ctrl-i{
           display: inline-block;
           width: 100px;
           height: 13px;
           background-color: #666;
           box-shadow: 0 1px 1px rgba(0,0,0,.3);
           position: relative;
           margin-left: 1px;
       }
       .slider .ctrl .ctrl-i img{
           width: 100%;
           position: absolute;
           left: 0;
           bottom: 50px;
           z-index: 1;
           opacity: 0;
           transition:all .2s;
       }
       /*hover 到控制按钮*/
       .slider .ctrl .ctrl-i:hover{
           background-color: #f0f0f0;
       }
       .slider .ctrl .ctrl-i:hover img{
           bottom: 13px;
           -webkit-box-reflect:below 0px -webkit-gradient(
               linear,
               left top,
               left bottom,
               from(transparent),
               color-stop(50%,transparent),
               to(rgba(255,255,255,.3))
               );
           opacity: 1;
       }
       /*控制按钮 avtive 状态*/
       .slider .ctrl .ctrl-i_active:hover,
       .slider .ctrl .ctrl-i_active{
           background-color: #000;
       }
       .slider .ctrl .ctrl-i_active:hover img{
           opacity: 0;
       }
       /*幻灯片切换的样式*/
       .slider .main .main-i{
           opacity: 0;
           position: absolute;
           right: 50%;
           top: 0;
           transition:all .5s;
           z-index: 2;
       }
       .slider .main .main-i_right{
           right: -50%;
       }
       .slider .main .main-i h2{
           margin-right:60px;
       }
       .slider .main .main-i h3{
           margin-right: -45px;
       }
       .slider .main .main-i h2,
       .slider .main .main-i h3{
           opacity: 0;
           transition:all 1s .8s;
       }
       #main_background,
       .slider .main .main-i_active{
           right: 0;
           opacity: 1;

       }
       #main_background{
           z-index: 1;
       }
       .slider .main .main-i_active h2,
       .slider .main .main-i_active h3{
           margin-right: 0px;
           opacity: 1;
       }
       .slider .main .main-i .caption{
           margin-right: 15%;
       }

   </style>

</head>
<body>
   <div>
   
       <div id="template_main">
           <div class="main-i {{class}}" id="main_{{index}}">
               <div>
                   <h2>{{h2}}</h2>
                   <h3>{{h3}}</h3>
               </div>
               <img src="images/{{index}}.jpg" alt="">
           </div>
       </div>

       <div id="template_ctrl">
               <a href="
               javascript:switchSlidder({{index}});" id="ctrl_{{index}}"><img src="images/{{index}}.jpg" alt=""></a>
       </div>
   </div>
   <script type="text/javascript">
   //1.数据定义
       var data=[
               {img:1,h2:'Creative',h3:'DUET'},
               {img:2,h2:'Friendly',h3:'DEVIL'},
               {img:3,h2:'Tranquilent',h3:'COMPATRIOT'},
               {img:4,h2:'Insecure',h3:'HUSSLER'},
               {img:5,h2:'Loving',h3:'REBEL'},
               {img:6,h2:'Passionate',h3:'SEEKER'},
               {img:7,h2:'Crazy',h3:'FRIEND'},
       ];
   //2.定义一个通用函数
   function g (id) {
       if (id.substr(0,1)=='.') {
           return document.getElementsByClassName(id.substr(1));
       }
       return document.getElementById(id);
   }
   //3添加幻灯片的操作（所有幻灯片和对应的按钮）
   function addSliders () {
       //3.1获取模板
       var tpl_main=g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
       var tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
       //3.2定义最终输出的html变量
       var out_main=[];
       var out_ctrl=[];
       //3.3遍历所有数据
       for (i=0;i<data.length;i++){
           var _html_main=tpl_main.replace(/{{index}}/g,data[i].img)
                                   .replace(/{{h2}}/g,data[i].h2)
                                   .replace(/{{h3}}/g,data[i].h3)
                                   .replace(/{{class}}/g,['','main-i_right'][i%2]);
           var _html_ctrl=tpl_ctrl.replace(/{{index}}/g,data[i].img);
           out_main.push(_html_main);
           out_ctrl.push(_html_ctrl);
           //3.4把html回写到对应DOM里边
           g('template_main').innerHTML=out_main.join('');
           g('template_ctrl').innerHTML=out_ctrl.join('');
           //增加 #main_background
           g('template_main').innerHTML += tpl_main.replace(/{{index}}/g,'{{index}}')
                                                  .replace(/{{h2}}/g,data[i].h2)
                                                  .replace(/{{h3}}/g,data[i].h3);
           g('main_{{index}}').id='main_background';
       }

   }

   function switchSlidder(n) {
       var main=g('main_'+n);
       var ctrl=g('ctrl_'+n);
       //获取所有的幻灯片、所有的控制按钮
       var clear_main=g('.main-i_active');
       var clear_ctrl=g('.ctrl-i_active');
       //清除他们的active样式
       for(i=0; i<clear_main.length; i++){
       clear_ctrl[i].className=clear_ctrl[i].className.replace(' ctrl-i_active','');
       clear_main[i].className=clear_main[i].className.replace(' main-i_active','');
       }
       //为当前的幻灯片加样式
       main.className += ' main-i_active';
       ctrl.className += ' ctrl-i_active';
       //切换时复制上一张幻灯片到main_backgroud中
       setTimeout(function () {
           g('main_background').innerHTML=main.innerHTML;
       },1000);
   }
   //动态的调整图片的margin-top以使其垂直居中
   function movePicture() {
       var pictures=g('.picture');
       for(var i=0;i<pictures.length;i++){
           pictures[i].style.marginTop=(-1*pictures[i].clientHeight)/2+'px';
       }
   }
   window.onload=function () {
       addSliders();
       switchSlidder(4);
       setTimeout(function(){
           movePicture();
       },100);
   }
   </script>
</body>
</html>

2015-07-10 2回答·674浏览
andy_z

浏览器像素不一样，图片top问题，

2015-07-05 3回答·1676浏览

数据加载中...