响应式网站——兰途科技项目开发问题及解析（首页index.html）

本文链接：https://blog.csdn.net/zxy9602/article/details/78232144

1、首页index.html

（1）导航下轮播图——下边对应class为—“b-tab”三个小按钮，点击后不会使得颜色变化

对应知识点疑难：

a、fn

a-1:fn作为一个匿名函数的缩写。

(function(){
    ....
})();

a-2:$.fn

$.fn.xxx是可以用对象来调用的命名空间，例如，

$.fn.input()可以写为$('.abc').input()

对于jQuery而言，$.fx作为jQuery的一个特效。

b、fn&&fn()

在这个表达式中，“&&”是一个逻辑表达式，它是可以实现逻辑短路。

&&：true && true ——true

||：true || xx ——true

b-1——&&：a>0 && b<0 a=-1,b=-1 false

（当看到a=-1 <0，false，由于表达式为“&&”，不用考虑第二个，即为false）

b-2——||：a>0 || b>0 a=1,b=-1true

（当看到a=1 >0，true，由于表达式为“||”，不用考虑第二个，即为true）

注意：在fn&&fn()中

c、clearInterval()与setInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout

clearInterval()方法的参数必须是setInterval()返回的ID值，要注意的是：要使用clearInterval()，在创建执行

定式操作时，要使用全局变量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setInterval</title>
</head>
<body>
<p>显示当前时间:</p>
<p id="demo"></p>
<button οnclick="myStopFunction()">停止时间</button>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
</script>
</body>
</html>

d、fadeIn() 与fadeOut()

作用：改变被选元素的不透明度

fadeIn()：表示从可见——隐藏，即“淡出”

fadeOut()：表示从隐藏——可见，即“淡入”

注意：“！==”与 “！=”

该注意项可引申为“=、==、===”

a、=：用于赋值，int i=2

b、==：用于判断，if(1==2) false

c、===：作为“==”的升级加强型

若 55=="55"，返回true（==表示只强调“值相等”）

若 55==="55"，返回false（===表示强调“值相等+类型相同”）

（2）经典案例部分轮播不显示——“.classic”

a、resize()方法

作用：用于对浏览器大小改变次数的计数。

当浏览器大小改变的时候，相对应的计数系数会发生相应的变化

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
$(document).ready(function(){
$(window).resize(function() {
  $("span").text(x+=1);
});

});
</script>
</head>
<body>
<p>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>
</body>
</html>

b、setTimeout()与clearTimeout()

setTimeout()与setInterval()同样都是为了定时器而设计的。

——setTimeout()与setInterval()区别

b1：setTimeout(a(),500)在500ms时，触发一次a()，但是它不会每隔500ms调用一次setTimeout执行a()，而是在整个代码段执行了a()后500ms，才会再执行a()。若a()执行了200ms，所以这一过程执行完的时间为“700ms”

b2：setInterval(a(),500)表示每隔500ms时，触发一次a()，它表示无论执行的函数a()所运行多长时间，都是每隔500ms，更新一次，所以这一过程执行完的时间为“500ms”

使用方式：

(1)若不希望连续调用产生彼此的干扰，就用setTimeout()

(2)若需要固定时间执行某个方法，就用setInterval()

c、each()

each()方法用于遍历操作的实现，

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

该函数段表示点击“button”之后，会依次遍历“li”，同时依次弹出alert该li元素所对应的文本值。

d、animate()

作用：表示css属性集的自定义动画，该方法通过css样式，把元素从一个状态改变为另一种状态，css属性值发生了变化，即产生了一种动画效果。

语法1：

$(selector).animate(styles,speed,easing,callback)

styles：样式改变{width/marginLeft/...}，只有数值改变，没有“margin-left”字符串的表示

speed：速度改变，单位为ms，同时还有属性值low/fast/normal

easing：不同的动画点中设置动画速度的 easing 函数，内置的函数有——swing()、linear()

callback：表示animate执行完毕，要执行的函数。

语法2：

$(selector).animate(styles,options)

options：表示speed、easing、callback的缩写，为可选项。

styles：表示必选项。

e、append()与prepend()

append()：表示被选元素结尾插入元素

prepend()：表示被选元素开头插入元素

引申——append()与appendTo()区别

append()：$(selector).append(content)

appendTo()：$(content).appendTo(selector)

注意——“marginLeft”的使用规范

由于在animate()中，样式只能使用的是DOM样式，而非CSS样式。

（3）css样式文件

a、translate、transform 与 transition 区别

transform是变形,下面有translate

transform: rotate旋转/scale缩放/skew扭曲/translate移动/matrix矩阵变形
transform连写:rotate scale skew translate

translate移动，transform:translateX(10px)/translateY(10px)

transition是平滑过渡动画，用于鼠标单击，获得焦点，对元素触发的时候平滑的过渡动画

transition:all 1s ease 1s;

b、background中，background-size

background:rgb对应radial-gradient

b-1:background-size：cover、length（宽|高）、precentage（百分比）

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

b-2:radial-gradient表示径向渐变，

c、position:relative 与 position:absolute区别

c-1：position:relative表示对父元素设置的相对定位

c-2：position:absolute表示对子元素设置的绝对定位

同时，

position:fixed——绝对定位，相对于浏览器窗口进行定位

position:relative——相对定位，相对于正常位置进行定位

position:static——默认值，元素出现在正常的流中

position:absolute——绝对定位，相对于除static以外的第一个父元素进行定位

position:inherit——规定从父元素继承position的值

d、display:none 与 display:block 区别

display:none——会隐藏元素

display:block——会将行内元素转换为块级元素，即会“换行”

display:inline——会将块内元素转换为行内元素，即会消除元素换行

e、display:none 与overflow:hidden、visiality: hidden区别

display:none——隐藏元素，不占用网页的任何空间，即“彻底消失”

overflow:hidden——让超出的部分进行隐藏，即设置属性的时候，会根据你设置的宽、高，把多余的部分进行裁剪掉，

visiality:hidden——是把对应的那个层隐藏了，内容看不到，但是它仍占用的有空间。也就是说，对应的元素，仍然还具有“宽、高”相关属性。

f、z-index

表示设置层叠的顺序。

z-index对应的值越大，即元素将会排在值小的前面。z-index越大，优先级越高。

默认值为z-index:0,z-index 仅能在定位元素上奏效

响应式网站——兰途科技 项目开发问题及解析（首页index.html）

响应式网站——兰途科技项目开发问题及解析（首页index.html）