描述js响应式、js原生滚动图

133 阅读1分钟
js响应式:
/*在页面开始添加*/
// 防抖:让一个函数在频繁触发,一定时间只执行一次
window.onresize = r;
function r(resizeNum) {
	var winW = window.innerWidth;
	document.getElementsByTagName("html")[0].style.fontSize = winW * 0.15625 + "px";//代替所有media,在640px宽度的大小的移动端,font-size=100px,1rem=100px
	if (winW > window.screen.width && resizeNum <= 10) {
		setTimeout(function () {
			r(++resizeNum);
		}, 100);
	}
	else {
		document.getElementsByTagName("body")[0].style.opacity = 1;
	}
};
	setTimeout(r(0), 100);

描述js响应式:
响应式是根据不同屏幕大小写出不同的适应代码的解决方案。如果用css响应式,可视用medie写出常用屏幕宽度,并在你每个屏幕里设置html的font-size大小。页面书写可以是rem去完成如果使用js
用js判断屏幕大小并设置font-size大小,设置页面时用rem完成

js原生滚动图:
  //滚动方法
        function scrolling() {
            document.querySelector(".showImg").scrollLeft += 5;//每次原来的基础上滚动5px
            if (document.querySelector(".showImg").scrollLeft >= 200) {
                document.querySelector(".contents").appendChild
                    (document.querySelector(".contents").children[0])//把第一张图片放到最后一张图片的位置
                document.querySelector(".showImg").scrollLeft = 0;
            }
            timeer1=setTimeout(scrollings,500)
        }
        // document.getElementById("but").onclick = scrollings;
        window.onload=function(){
            scrollings();
        }
        document.querySelector(".showIMg").onmouseover=function(){
            clearTimeout(timeer1)
        }
        document.querySelector(".shouwImg").onmouseout=function(){
            scrollings();
        }