J.chong

@media all and ...... max-width -1 ;

max-width:1024px，在1024以下 包括1024，所以更严谨的作法是 @media all and (min-width: 1024px) and (max-width:1099px)
min-width:1200px ，在1200之上 包括1200

    @media all and (min-width: 1200px) {
        .box{
            width: 1200px;
            background: red;
        }
    }

    @media all and (min-width: 1024px) and (max-width:1199px) {
        .box{
            width: 1024px;
            background: blue;
        }
    }

    @media all and (min-width: 400px) and (max-width: 1023px) {

        .box{
            width: 400px;
            height: 400px;
            background: yellow;
        }
    }

    @media all and (min-width: 220px) and (max-width: 399px) {

        .box{
            width: 220px;
            height: 220px;
            background: pink;
        }
    }
    @media all and (max-width: 219px) {

        .box{
            width: 220px;
            height: 220px;
            background: #000;
        }
    }

@media all and (orientation:portrait){ /*豎屏，即高>寬*/
    something....
}
 
@media all and (orientation:landscape){ /*橫屏，即高<寬*/
    something....
}

---

<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=medium-dpi" />

主流分辨率

iso: 320 - 480

240320(一般不考虑)、320480、480800(多)、640960(多) 480854 1280720 8001280 10801920

A.页面设置固定宽度320px，margin居中，左右留白用背景填充

B.通过media，根据不同的分辨率去设置不同的样式

C.通过100%、flex或rem等手段，等比例缩放 1rem= 1个html上设置的字体大小

---

一、事件 ：touchstart/touchmove/touchend

二、touchEvent:

touches-当前位于屏幕的所有手指的一个列表；
targetTouches位于当前DOM元素上的手指的一个列表
changedTouches:涉及当前事件的手指的一个列表;

防止有些手機瀏覽器下默認拖動

    document.ontouchmove = function (e) {
        e.preventDefault();
    };

图片切换示例1

百度评分

onmouseout时清除，利用cur变量循环，利用onclick来设置cur，如果cur小于0，则不设置，一旦onclick设置了cur值，即发生点击，则out时保持onclick状态
百度评分原理

---

文字上飘

防止重复点击：

if(obj.b) { return; }
obj.b = !0;
...

中间开始依次两边走原理

5 4 6 3 7 2 8 1 9 0 10

//方案一：
以首个5个基点：
即 num2 = -1 +2 -3 +4 -5 +6....  //中间协助得到下面数的变量；
再利用5，依次相加
num = 5 4 6 3 7 ...//实际要用到的数；

文字上飘

---

图片点击左右飘走

利用transition
图片点击左右飘走

---

图片同步与交叉走

图片同步与交叉走

---

商品价格计算

主要分清作用域名，上面部分在一个循环里，下面则需要整个div查找元素来确定，写在sum()里，确保每次事件都可调用到；
商品价格计算

---

奇偶选择

Math.floor( i / 8 ) ，则 1-8列里，得到的都为0
Math.floor( i / 8 ) ，则 9-15列里，得到的都为1

i%2 == 0 则为偶数
i%2 == 1 则为奇数

奇偶选择

---

图片无缝切换原理

<quoteblock>

【】表示当前显示，两张图片需要2个变量 ；<br />
1、页面上总显示2张图片； 【1】 - 1<br />
2、点击--> 瞬间第2张图片地址切换-->整个div向左运动-400   1 - 【2】<br />
3、再次点击--> 时,改变图片地址 2 - 3，瞬间重置div为left:0,这是直接拉回，视觉看不出，最后再次做运动 2 - 【3】<br />
4、所以div总在 -400与0之间<br />
5、连续点击闪动，运动未解决禁止重复点击<br />

</quoteblock>
图片无缝切换原理

---

图片抖动掉落

    function getArr(index) { //index即为左边的个数
        var arr = []
        arr[0] = index;
        var len = Math.max(index, img.length - 1 - index);//左右两边最大的
        var a = b = index;
        for (var i = 0; i < len; i++) {
            if (a > 0) {
                a--;
                arr.push(a)
            }
            if (b < img.length - 1) {
                b++
                arr.push(b)
            }
        }
        return arr;
    }

//如console.dir(getArr(5))  === >  5 4 6 3 7 2 8 1 9 0

图片掉落

for套for矩形排列

// 5 x 5
    var str = ''
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 5; j++) {
            str += '<...top:' + i % 5 * 90 ;left:' + j * 90 .../>'
        }
    }

先抖动再掉落时，按顺序依次落下须使用回调函数外一个变量，内一个变量，否则出问题
图片抖动掉落

---

多组菜单自动播放

原理：两个变量，控制父级变量inow,控制子级变量num，关系为：1:0,1:1,1:2.....

2:0,2:1,2:2.....等，分别控制，切换为，当num到达最大值是切换到第二级的条件是num = ..length, if里切换inow的值为0,1,2,3.....

多组菜单自动播放