一、client家族
- client 可视区域
offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是内容的大小
图片1.png
二、检测屏幕宽度(可视区域)
- ie9及其以上的版本 window.innerWidth
标准模式 document.documentElement.clientWidth
怪异模式 document.body.clientWidth
- 封装函数
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
- 检测屏幕分辨率
clientWidth 返回的是 可视区大小 浏览器内部的大小、
window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关。
三、 window.onresize 事件（改变窗口大小）
onresize 事件会在窗口或框架被调整大小时发生，响应式常用。
function fun() { 语句 }
fun 是函数体的意思
fun() 调用函数 的意思
- 改变窗口大小时改变背景颜色：
reSize();//先执行一遍，使窗口不改变时有初始效果
window.onresize = reSize;//不能加括号，加括号相当于直接出执行结果
function reSize(){
var clientW = client().width;
1.
if(clientW > 960){
document.body.style.backgroundColor = "pink";
}
else if(clientW > 640){
document.body.style.backgroundColor = "red";
}
else {
document.body.style.backgroundColor = "yellow";
}
}
四、冒泡机制
- 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
-
从里层到外层
IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window - 以下事件不冒泡：blur、focus、load、unload
- 阻止冒泡
1 if(event && event.stopPropagation)
2 {
3 event.stopPropagation(); // w3c 标准
4 }
5 else
6 {
7 event.cancelBubble = true; // ie 678 ie浏览器
8 }
5.判断当前对象
var targetId = event.target ? event.target.id : event.srcElement.id;
-
点击隐藏
function $(id) {
return document.getElementById(id);
}
$("login").onclick = function(event){
$("mask").style.display = "block";
$("show").style.display = "block";
// 隐藏滚动条
document.body.style.overflow = "hidden";
var event = event || window.event ;
// 取消冒泡
if(event && event.stopPropagation){
event.stopPropagation();
}
else {
event.cancelBubble = true ;
}
}
document.onclick = function(event){
var event = event || window.event ;
//判断是不是当前的id
var targetId = event.target ? event.target.id : event.srcElement.id;
if(targetId!="show"){
$("mask").style.display = "none";
$("show").style.display = "none";
document.body.style.overflow = "visible";
}
}
-
获取选中文字 弹出框
思路：onmosueup事件，鼠标弹起，弹出框，框的位置是clientX和clientY。
获取用户选中内容兼容性的写法：
if(window.getSelection)
{
txt = window.getSelection().toString(); // 转换为字符串
}
else
{
txt = document.selection.createRange().text; // ie 的写法
}
综合代码：
$("text").onmouseup = function(event){
var event = event || window.event ;
var x = event.clientX;
var y = event.clientY;
var txt ;
//获取选中文字
if(window.getSelection){
txt = window.getSelection().toString();
}
else {
txt = document.selectin.createRange().text;//ie
}
//判断文字是否为空
if(txt){
show(x,y,txt);
}
}
// document.onclick = function(event){ //用onclick包括弹起和按下，防止冒泡
// var event = event || window.event ;
// var targetId = event.target ? event.target.id : event.srcElement.id;
// if(targetId!="demo"){
// $("demo").style.display = "none";
// }
// }
document.oncmousedown = function(event){ // 用onclick包括弹起和按下，防止冒泡
var event = event || window.event ;
var targetId = event.target ? event.target.id : event.srcElement.id;
if(targetId!="demo"){
$("demo").style.display = "none";
}
}
function show(xx,yy,txttxt){
setTimeout(function(){ //加定时器防止选择很多 有bug
$("demo").style.display = "block";
$("demo").style.left = xx +"px";
$("demo").style.top = yy +"px";
$("demo").innerHTML = txttxt;
},400)
}
- 动画原理
- 让盒子的offsetLeft 每次都加上自己定义的步长！
10+10 = 20 + 10 - Math.abs(-5) 取绝对值函数
function $(id) {
return document.getElementById(id);
}
$("btn200").onclick = function(){
animate($("box"),200);
animate($("box1"),400);
}
$("btn400").onclick = function(){ //error
animate($("box"),400);
animate($("box1"),800);
}
var timer = null;
var index = 20;
var arr = [];//error
arr.index = 10;
function animate(obj,target){
var speed = target > obj.offsetLeft ? 5 : -5 ;//判断盒子左移还是右移
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;// 要定义在定时器里，每次的值不一样
if (Math.abs(result) <= 5) {
clearInterval(obj.timer);
obj.style.left = target +"px";//result的值有5px的误差，使盒子移到该到的位置。
}
obj.style.left = obj.offsetLeft + speed + "px";
},30)
}
- 轮播图
<script type="text/javascript">
function animate(obj,target){
clearInterval(obj.timer);
var speed = obj.offsetLeft<target ? 20 : -20 ;//判断盒子左移还是右移
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;// 要定义在定时器里，每次的值不一样
obj.style.left = obj.offsetLeft + speed + "px"; //不能放在最后，要在最后矫正误差
if (Math.abs(result) <= 20)
{
clearInterval(obj.timer);
obj.style.left = target +"px";//result的值有5px的误差，使盒子移到该到的位置。
}
},20)
}
window.onload = function () {
var all = document.getElementById("all");
var screen = document.getElementById("screen");
var ul = document.getElementById("ul");
var ullis = ul.children;
var www = ul.children[0];
//先克隆
ul.appendChild(ul.children[0].cloneNode(true));//克隆第一张图片放在最后面
//创建小li
var ol = document.createElement("ol");
all.appendChild(ol);
for(var i = 0 ;i < ullis.length-1; i++){
var li = document.createElement("li");
li.innerHTML = i+1;
ol.appendChild(li);
}
ol.children[0].className = "current";
//开始动
var ollis = ol.children ;
for(i = 0 ; i < ollis.length ; i ++) {
ollis[i].index = i; //获取索引值
ollis[i].onmouseover = function(){
for(var j = 0;j < ollis.length;j++){
ollis[j].className = ""; //清空所有类名
}
this.className = "current";
animate(ul,-this.index*500);
key = square = this.index;
}
}
//添加定时器
var timer = null; //不会冲突，这是轮播图定时器
var key = 0;//存图片的张数
var square = 0; //方块
timer = setInterval(auto,1000);//开启
function auto(){
key++;
if(key>ullis.length-1){
ul.style.left = 0;//出错
key = 1;//第六张就是第一张，第六张之后就是第二张
}
animate(ul,-key*500);
// 方块
square++;
if(square>ollis.length-1){
square = 0;
}
for (i = 0;i<ollis.length;i++){
ollis[i].className = "";
}
ollis[square].className = "current";
}
all.onmouseover = function(){
clearInterval(timer);
}
all.onmouseout = function(){
timer = setInterval(auto,1000);
}
}
</script>
总结：轮播图写了三遍弄清了整体思路。
第一步：获取元素。
第二步：设置鼠标滑过的效果。
第三步：设置整体定时器。
第四部：解决两个定时器的矛盾问题。
网友评论