pic show

sowdf · Mar 12, 2016 · a6c6662 · a6c6662
1 parent 08e2733
commit a6c6662
Show file tree

Hide file tree

Showing 12 changed files with 591 additions and 0 deletions.
diff --git a/.idea/.name b/.idea/.name
diff --git a/.idea/dictionaries/caozhihui.xml b/.idea/dictionaries/caozhihui.xml
diff --git a/.idea/javascript.iml b/.idea/javascript.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/javascript中的运动/js中的运动.html b/javascript中的运动/js中的运动.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<script>
+    window.onload = function(){
+
+        var oDiv = document.getElementById('div1');
+        oDiv.onclick = function(){
+            startMove(this, {
+                width:200,
+                height:300
+            },10);
+        }
+    }
+    function startMove( obj, json,fn ){
+        clearInterval(obj.iTimer);
+        var iCur = 0;
+        var iSpeed = 0;
+        obj.iTimer = setInterval(function(){
+            var iBtn = true;
+            for(var attr in json){
+                var iTarget = json[attr];
+                if(attr == 'opacity'){
+                    iCur = Math.round(css(obj,'opacity') * 100);
+                }else{
+                    iCur = parseInt(css(obj,attr))
+                }
+                iSpeed = (iTarget - iCur ) * 0.2;
+                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
+
+                if (iCur != iTarget) {
+                    iBtn = false;
+                    if(attr =='opacity'){
+                        obj.style.opacity = (iCur + iSpeed) / 100;
+                        obj.style.filter = 'alpha(opacity='+(iCur + iSpeed)+')';
+                    }else{
+                        obj.style[attr] = iCur + iSpeed + 'px';
+                    }
+                }
+            }
+            if(iBtn){
+                clearInterval(obj.iTimer);
+                fn && fn.call(obj);
+            }
+        },30);
+
+    }
+    function css(obj, attr){
+        if(obj.currentStyle){
+            return obj.currentStyle[attr];
+        }else{
+            return getComputedStyle(obj, false)[attr];
+        }
+    }
+</script>
+<style>
+    #div1 { width:100px; height:100px; background:red; sss}
+</style>
+<body>
+<div id="div1">
+
+</div>
+</body>
+</html>
diff --git a/javascript中的运动/startMove.js b/javascript中的运动/startMove.js
@@ -0,0 +1,43 @@
+/**
+ * Created by caozhihui on 16/3/12.
+ */
+function startMove( obj, json,fn ){
+    clearInterval(obj.iTimer);
+    var iCur = 0;
+    var iSpeed = 0;
+    obj.iTimer = setInterval(function(){
+        var iBtn = true;
+        for(var attr in json){
+            var iTarget = json[attr];
+            if(attr == 'opacity'){
+                iCur = Math.round(css(obj,'opacity') * 100);
+            }else{
+                iCur = parseInt(css(obj,attr))
+            }
+            iSpeed = (iTarget - iCur ) * 0.2;
+            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
+
+            if (iCur != iTarget) {
+                iBtn = false;
+                if(attr =='opacity'){
+                    obj.style.opacity = (iCur + iSpeed) / 100;
+                    obj.style.filter = 'alpha(opacity='+(iCur + iSpeed)+')';
+                }else{
+                    obj.style[attr] = iCur + iSpeed + 'px';
+                }
+            }
+        }
+        if(iBtn){
+            clearInterval(obj.iTimer);
+            fn && fn.call(obj);
+        }
+    },30);
+
+}
+function css(obj, attr){
+    if(obj.currentStyle){
+        return obj.currentStyle[attr];
+    }else{
+        return getComputedStyle(obj, false)[attr];
+    }
+}
diff --git a/javascript中的运动/图片展示.html b/javascript中的运动/图片展示.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<style>
+    ul { width:330px; margin:100px auto; position:relative; }
+    ul li { list-style:none; float:left; width:100px; height:100px; background:red; margin:10px 0 0 10px; }
+</style>
+<script src="startMove.js"></script>
+<script>
+    window.onload = function(){
+        var oUl = document.getElementById('ul1');
+        var aLi = oUl.getElementsByTagName('li');
+        /*
+        * 存在的问题
+        * 要使视觉保持一致
+        * position优先解析问题 同一块内
+        * offsetLeft 问题
+        * 要使放大的时候位置不变，left,top 增加宽高的一半
+        * */
+        var arr = [];
+        var zIndex = 1;
+        for(var i=0; i<aLi.length; i++){
+            arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop})
+        }
+        for(var i=0; i<aLi.length; i++){
+            aLi[i].index = i;
+            aLi[i].style.left = arr[i].left + 'px';
+            aLi[i].style.top = arr[i].top + 'px';
+            aLi[i].style.position = 'absolute';
+            //位置变动重置margin
+            aLi[i].style.margin = 0;
+            aLi[i].onmouseover = function(){
+                this.style.zIndex = zIndex++;
+                this.style.background = 'green';
+                startMove(this,{
+                    width : 200,
+                    height :200,
+                    left : arr[this.index].left - 50,
+                    top : arr[this.index].top - 50
+                });
+            }
+            aLi[i].onmouseout = function(){
+                this.style.background = 'red';
+                startMove(this,{
+                    width : 100,
+                    height :100,
+                    left : arr[this.index].left,
+                    top : arr[this.index].top
+                });
+            }
+        }
+    }
+</script>
+<body>
+<ul id="ul1">
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+</ul>
+</body>
+</html>
diff --git a/javascript中的运动/缓冲原理.html b/javascript中的运动/缓冲原理.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<style>
+    div{ width:100px; height:100px; position:absolute; top:0; left:800px; background:red; }
+</style>
+<script>
+    window.onload = function(){
+        var oDiv = document.getElementById('div1');
+        oDiv.onclick = function(){
+            var timer = null;
+            timer = setInterval(function(){
+                var iSpeed = (500 - oDiv.offsetLeft) * 0.3;
+                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
+                if( oDiv.offsetLeft == 500){
+                    clearInterval(timer);
+                }
+                oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
+            },30);
+        }
+    }
+</script>
+<body>
+    <div id="div1">
+
+    </div>
+</body>
+</html>
diff --git a/javascript中的运动/问题.txt b/javascript中的运动/问题.txt
@@ -0,0 +1,6 @@
+公用定时器的问题
+多值运动的问题
+定时器问题
+同时运动的问题
+回调 
+加减速