|
|
@@ -0,0 +1,135 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box{
|
|
|
+ width: 300px;
|
|
|
+ height: 50px;
|
|
|
+ background-color: red;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box"></div>
|
|
|
+ <div class="box"></div>
|
|
|
+ <div class="box"></div>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ var oBox = document.getElementsByClassName("box");
|
|
|
+ var timer1 = null;
|
|
|
+ var timer2 = null;
|
|
|
+
|
|
|
+ // 方法一
|
|
|
+ for(var i=0;i<3;i++){
|
|
|
+ oBox[i].onmouseenter = function(){
|
|
|
+ addWidthFun(this);
|
|
|
+ }
|
|
|
+ oBox[i].onmouseleave = function(){
|
|
|
+ reduceWidthFun(this);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function addWidthFun(obj){
|
|
|
+ clearInterval(obj.timer2)
|
|
|
+ obj.timer1 = setInterval(function(){
|
|
|
+ if(obj.offsetWidth > 500){
|
|
|
+ clearInterval(obj.timer1);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ obj.style.width = (obj.offsetWidth + 5) + "px";
|
|
|
+
|
|
|
+ },16)
|
|
|
+ }
|
|
|
+
|
|
|
+ function reduceWidthFun(obj){
|
|
|
+ clearInterval(obj.timer1)
|
|
|
+ obj.timer2 = setInterval(function(){
|
|
|
+ if(obj.offsetWidth < 300){
|
|
|
+ clearInterval(obj.timer2);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ obj.style.width = (obj.offsetWidth - 5) +"px";
|
|
|
+ },16)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 方法二
|
|
|
+ // 对象的方法内this指向的是当前对象，但如果方法内嵌套了函数那么函数内的this指向的是window
|
|
|
+ // 当出现函数嵌套的时候， 内部函数可以使用外部函数的变量
|
|
|
+ // for(var i=0;i<3;i++){
|
|
|
+ // // 创建一个新属性timer给到每一个横向，用作控制变长的setInterval
|
|
|
+ // oBox[i].timer = null;
|
|
|
+ // oBox[i].onmouseenter = function(){
|
|
|
+ // var that = this;
|
|
|
+ // clearInterval(that.timer2)
|
|
|
+ // // console.log(this);
|
|
|
+ // that.timer = setInterval(function(){
|
|
|
+ // // console.log(that);
|
|
|
+ // that.style.width = (that.offsetWidth +5) +"px";
|
|
|
+ // if(that.offsetWidth > 500){
|
|
|
+ // clearInterval(that.timer)
|
|
|
+ // }
|
|
|
+ // },16)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // for(var j=0;j<3;j++){
|
|
|
+ // // 创建新属性timer2给到每一个横向，用作控制变短的setInterval
|
|
|
+ // oBox[j].timer2 = null;
|
|
|
+ // oBox[j].onmouseleave = function(){
|
|
|
+ // var that = this;
|
|
|
+ // clearInterval(that.timer)
|
|
|
+ // that.timer2 = setInterval(function(){
|
|
|
+ // that.style.width = (that.offsetWidth - 5) + "px";
|
|
|
+ // if(that.offsetWidth<300){
|
|
|
+ // clearInterval(that.timer2)
|
|
|
+ // }
|
|
|
+ // },16)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // var a = 0;
|
|
|
+ // a = 1;
|
|
|
+ // a = 2;
|
|
|
+ // a = 3;
|
|
|
+ // console.log(a);
|
|
|
+
|
|
|
+
|
|
|
+ // 鼠标移入控制元素不断变长
|
|
|
+ // oBox.onmouseenter = function(){
|
|
|
+ // clearInterval(timer2);
|
|
|
+ // timer1 = setInterval(function(){
|
|
|
+ // oBox.style.width = (oBox.offsetWidth+5)+"px";
|
|
|
+ // if(oBox.offsetWidth>500){
|
|
|
+ // clearInterval(timer1);
|
|
|
+ // }
|
|
|
+ // },16)
|
|
|
+ // }
|
|
|
+ // // 鼠标移出后控制元素不断变短
|
|
|
+ // oBox.onmouseleave = function(){
|
|
|
+ // clearInterval(timer1);
|
|
|
+ // timer2 = setInterval(function(){
|
|
|
+ // oBox.style.width = (oBox.offsetWidth-5) + "px";
|
|
|
+ // if(oBox.offsetWidth<300){
|
|
|
+ // clearInterval(timer2)
|
|
|
+ // }
|
|
|
+ // },16)
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
