码迷,mamicode.com
首页 > 其他好文 > 详细

16、运动框架

时间:2018-07-06 22:27:54      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:slide   切换   attr   init   lock   遍历   效果   透明度   stop   

//for in : 遍历对象 循环变量代表key
//for of : 遍历集合set map 循环变量代表value

//          var obj = {a : 1,b : 2,c : 3,d : 4};
//          for(var i in obj){
//              console.log(i);
//          } 
            var arr = [‘a‘,‘b‘,‘c‘,‘d‘];
            for(var i in arr){
                console.log(i); //i是下标
            }
            for(var a of arr){
                console.log(a); //a是内容
            }

一.运动框架

1. 获取非行内样式
2. 运动框架
    1> 清除上一次的计时器
    2> 开启新的计时器
        1>设置开关
        2>遍历json
            1>> 获取当前值
            2>> 计算速度
            3>> 判断属性是否到达目标
            4>> 设置运动
        3>判断开关,是否退出计时器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <script type="text/javascript" src="js/sport.js" ></script>
        <script type="text/javascript">
            var oDiv = document.getElementById("box");
            oDiv.onmouseenter = function(){
                sport(this,{width:300},function(){
                    sport(oDiv,{height:300},function(){
                        sport(oDiv,{opacity:30})
                    });
                });
//              sport(this,{height:300});
            }
            oDiv.onmouseleave = function(){
                sport(this,{opacity:100},function(){
                    sport(oDiv,{height:100},function(){
                        sport(oDiv,{width:100});
                    })
                })
            }
        </script>
    </body>
</html>

sport.js

//sport(‘oDiv‘,{width : 300,height: 300,opacity : 0.3})
function sport(obj,json,fn){
    //1.先清除上一次的计时器
    clearInterval(obj.timer);
    //2.开启新的计时器
    obj.timer = setInterval(function(){
        //假设一个变量为true,代表所有的属性都已经到达目标
        var stop = true;
        //遍历json对象,取出所有的属性及目标值
        for(var attr in json){
            //1.获取当前的值
            var cur = 0;
            if(attr == ‘opacity‘){
                cur = parseInt(parseFloat(getStyle(obj,attr)) * 100)
            }else{
                cur = parseInt(getStyle(obj,attr));
            }
            
            //2.计算速度
            var speed = (json[attr] - cur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //3.检测停止
            if(cur != json[attr]){
                stop = false;
            }
            if(attr == ‘opacity‘){
                //改变透明度
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = ‘alpha(opacity=‘ + (cur + speed) + ‘)‘;
            }else{
                //改变其它属性值
                obj.style[attr] = cur + speed + ‘px‘;
            }
//          console.log(cur,json[attr],speed);
        }
        if(stop){
            clearInterval(obj.timer);
            if(typeof fn == ‘function‘){
                fn();
            }
        }
    },30)
}
//获取非行内样式
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
}

二.轮播图

    1.先获取页面中所需要的元素
    2.给项目中添加相应的事件
        1.左右遮罩与左右按钮(移入移出事件)——————按钮显示(隐藏)
        2.左右按钮(点击事件) ——————————图片切换(当前下标) ----(zindex)
        3.所有的小图(移入移出事件)----透明度变换
        4.所有的小图 (点击事件)-----图片切换(改变当前下标)
    3.设置轮播(大图轮播---zindex)(小图轮播----ul的left值)
    4.自动轮播(计时器)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            li{
                list-style: none;
            }
            body{
                background: #CCCCCC;
            }
            #box{
                width: 400px;
                margin: 50px auto;
                height: 426px;
                overflow: hidden;
                border: 1px solid yellow;
            }
            #top{
                position: relative;
                height: 320px;
                
            }
            #top li{
                position: absolute;
                top: 0;
                left: 0;
            }
            #left{
                position: absolute;
                width: 200px;
                top: 0;
                left: 0;
                height: 320px;
                z-index: 1000;
            }
            #right{
                position: absolute;
                width: 200px;
                height: 320px;
                top: 0;
                right: 0;
                z-index: 1000;
            }
            #btn_l{
                position: absolute;
                background: url(img/btn.gif) no-repeat;
                height: 60px;
                width: 60px;
                left: 10px;
                top: 130px;
                z-index: 1001;
                opacity: 0;
                filter: alpha(opacity=0);
            }
            #btn_r{
                position: absolute;
                background: url(img/btn.gif) no-repeat 0 -60px;
                height: 60px;
                width: 60px;
                right: 10px;
                top: 130px;
                z-index: 1001;
                opacity: 0;
                filter: alpha(opacity=0);
            }
            #bottom{
                position: relative;
                
            }
            #small_ul{
                position: absolute;
                top: 0;
                left: 0;
            }
            #small_ul li{
                float: left;
            }
            #small_ul img{
                height: 90px;
                width: 120px;
                padding: 6px;
            }
        </style>
        <script type="text/javascript" src="js/sport.js" ></script>
        <script type="text/javascript">
            //
            window.onload = function(){
                //1.获取页面元素
                //获取大盒子
                let oBigBox = document.querySelector(‘#box‘);
//              //获取上半部
//              let oTop = document.querySelector(‘#top‘);
                //获取左遮罩
                let oLeftMark = document.querySelector(‘#left‘);
                //获取右遮罩
                let oRightMark = document.querySelector(‘#right‘);
                //获取左按钮
                let oLeftBtn = document.querySelector(‘#btn_l‘);
                //获取右按钮
                let oRightBtn = document.querySelector(‘#btn_r‘);
                //获取所有的大图
                let oBigPics = document.querySelectorAll(‘#top li‘);
//              //获取底部
//              let oBottom = document.querySelector(‘#bottom‘);
                //获取小图ul
                let oSmallUl = document.querySelector(‘#small_ul‘);
                //获取所有的小图
                let oSmallPic = document.querySelectorAll(‘#bottom li‘);
                //2.设置小图UL的总宽度
                oSmallUl.style.width = oSmallPic[0].offsetWidth * oSmallPic.length + ‘px‘;
                //3.给左遮罩和左按钮同时添加移入事件,使左按钮显示         
                oLeftMark.onmouseover = oLeftBtn.onmouseover = function(){
                    sport(oLeftBtn,{opacity : 100});
                }
                //4.给左遮罩和左按钮同时添加移出事件,使左按钮隐藏
                oLeftMark.onmouseout = oLeftBtn.onmouseout =  function(){
                    sport(oLeftBtn,{opacity:0});
                }
                //5.给右遮罩和右按钮同时添加移入事件,使右按钮显示 
                oRightMark.onmouseenter = oRightBtn.onmouseenter = function(){
                    sport(oRightBtn,{opacity : 100});
                }
                //6.给右遮罩和右按钮同时添加移出事件,使右按钮隐藏
                oRightMark.onmouseleave = oRightBtn.onmouseleave = function(){
                    sport(oRightBtn,{opacity : 0});
                }
                //定义一个控制图片轮播的下标
                let indexA = 0;
                //定义一个改变z-index的变量
                let zIndex = 1;
                //记录计时器
                let timer = null;
                slider();
                autoPlay();
                //7.给左右按钮添加点击事件
                oLeftBtn.onclick = function(){
                    indexA --;
                    if(indexA == -1){
                        indexA = oBigPics.length - 1;
                    }
                    slider();
                }
                oRightBtn.onclick = function(){
                    indexA ++;
                    if(indexA == oBigPics.length){
                        indexA = 0;
                    }
                    slider();
                }
                //8.给小图添加事件
                for(let i = 0,len = oSmallPic.length;i < len;i ++){
                    //移入时,透明度100%
                    oSmallPic[i].onmouseenter = function(){
                        sport(this,{opacity : 100});
                    }
                    //移出时,透明度50%
                    oSmallPic[i].onmouseleave = function(){
                        if(indexA != i){
                            sport(this,{opacity:50});
                        }
                    }
                    //点击时,轮播到当前点击的图片
                    oSmallPic[i].onclick = function(){
                        indexA = i;
                        slider();
                    }
                }
                //9.设置轮播
                function slider(){
                    //大图轮播
                    oBigPics[indexA].style.zIndex = ++ zIndex;
                    //小图轮播
                    if(indexA == 0){
                        sport(oSmallUl,{left : 0});
                    }else if(indexA == oSmallPic.length - 1){
                        sport(oSmallUl,{left : -(oSmallPic.length - 3) * oSmallPic[0].offsetWidth});
                    }else{
                        sport(oSmallUl,{left : -(indexA - 1) * oSmallPic[0].offsetWidth});
                    }
                    //初始化所有小图的透明度
                    for(let i = 0,len = oSmallPic.length;i < len;i ++){
                        sport(oSmallPic[i],{opacity:50});
                    }
                    sport(oSmallPic[indexA],{opacity:100});
                }
                //自动轮播
                function autoPlay(){
                    timer = setInterval(function(){
                        indexA ++;
                        if(indexA == oBigPics.length){
                            indexA = 0;
                        }
                        slider();
                    },3000)
                }
                //给大盒子添加移入移出事件
                oBigBox.onmouseenter = function(){
                    clearInterval(timer);
                }
                oBigBox.onmouseleave = function(){
                    autoPlay();
                }
            }
        </script>
    </head>
    <body>
        <div id="box">
            <ul id="top">
                <div id="left"></div>
                <div id="right"></div>
                <a href="javascript:;" id="btn_l"></a>
                <a href="javascript:;" id="btn_r"></a>
                <li style="z-index: 1 ";><img src="img/1.jpg" /></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"/></li>
                <li><img src="img/6.jpg"/></li>
            </ul>
            <div id="bottom">
                <ul id="small_ul">
                    <li><img src="img/1.jpg"/></li>
                    <li><img src="img/2.jpg"/></li>
                    <li><img src="img/3.jpg"/></li>
                    <li><img src="img/4.jpg"/></li>
                    <li><img src="img/5.jpg"/></li>
                    <li><img src="img/6.jpg"/></li>
                </ul>
            </div>
        </div>
    </body>
</html>




sport.js

function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//回调函数 : 将一个函数作为另一个函数的参数时。
function sport(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var stop = true;
        for(var attr in json){
            var cur = attr == ‘opacity‘ ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
            var speed = (json[attr] - cur) / 8; //基数
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(cur != json[attr]){
                stop = false;
            }
            if(attr == ‘opacity‘){
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = ‘alpha(opacity=‘ + (cur + speed) + ‘)‘;
            }else{
                obj.style[attr] = cur + speed + ‘px‘;
            }
        }
        if(stop){
            clearInterval(obj.timer);
            if(typeof fn === ‘function‘){
                fn();
            }
        }
    },30)
}

三.放大镜

1.瀑布流

响应式布局

<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            html {
                height: 100%;
            }
            body {
                height: 100%;
            }
            img {
                border: 0;
            }
            div.wrap {
                width: 100%;
                margin: 0 auto;
                overflow: hidden;
                position: relative;
                background: #DDD;
            }
            div.wrap div {
                width: 200px;
                padding: 4px;
                border: 1px solid #000;
                float: left;
                position: absolute;
            }
            div.wrap div h3 {
                line-height: 35px;
            }
            div.wrap div img {
                width: 200px;
            }
        </style>
        <script>
            /*
             * 
             */
            window.onload = function(){
                loading(‘wrap‘);
            }
            window.onresize = function(){
                loading(‘wrap‘);
            }
            
            //加载图片
            function loading(id,child,space){
                //初始化参数
                if(!id){
                    return;
                }
                child = child || ‘div‘;
                space = space || 10;
                //获取瀑布流的大盒子
                let oBigBox = document.getElementById(id);
                //获取所有的子节点
                let oChilds = oBigBox.getElementsByTagName(child);
                //获取大盒子的宽度
                let bigBoxWidth = oBigBox.offsetWidth;
                //获取单个子节点的宽度
                let childWidth = oChilds[0].offsetWidth;
                //alert(childWidth)
                //计算列数
                let colNum = Math.floor(bigBoxWidth / childWidth);
                //alert(colNum);
                //计算左右间隙
                let padding = Math.floor((bigBoxWidth - childWidth * colNum) / (colNum + 1));
                //初始化最一行的位置
                var arr = []; //放置所有子节点的坐标值{left:x,top:x}
                for(let i = 0;i < colNum;i ++){
                    arr[i] = new Object();
                    arr[i].left = padding * (i + 1) + (i * childWidth);
                    arr[i].top = space;
                }
                //加载
                for(let i = 0,len = oChilds.length;i < len;i ++){
                    var index = minTop(arr);
                    oChilds[i].style.position = ‘absolute‘;
                    oChilds[i].style.left = arr[index].left + ‘px‘;
                    oChilds[i].style.top = arr[index].top + ‘px‘;
                    //改变数组中top值
                    arr[index].top += oChilds[i].offsetHeight + space;
                    oBigBox.style.height = arr[index].top + ‘px‘;
                }
            }
            //求最小高度列的top值(下标)
            function minTop(arr){
                var min = arr[0].top; //第一个对象中top值
                var index = 0;
                for(let i = 0,len = arr.length;i < len;i ++){
                    if(min > arr[i].top){
                        min = arr[i].top;
                        index = i;
                    }
                }
                return index;
            }
        </script>
    </head>

2.放大镜

<head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script type="text/javascript">
            /*
             *  一。当鼠标移入遮罩时,滑块和大图所在的盒子显示
             *  二。当鼠标移出遮罩时,滑块和大图所在的盒子隐藏
             *  三。在遮罩上设置鼠标移动事件,做鼠标跟随的效果---边界
             *  四。计算滑块在小图上的移动比例
             *  五。设置大图的移动距离
             * 
             *  及格率: 及格人数 / 总人数
             *  移动比例: 当前滑块的left值 / 当前滑动移动的总范围
             *  
             */
            window.onload = function(){
                //获取页面所需元素
                const oBigBox = document.getElementById("div1");
                //获取小图
                const oSmallPic = document.querySelector(‘.small_pic‘);
                //获取遮罩
                const oMark = document.querySelector(‘.mark‘);
                //获取滑块
                const oFloat = document.querySelector(‘.float_layer‘);
                //获取大图盒子
                const oBigPic = document.querySelector(‘.big_pic‘);
                //获取大图
                const oBigImg = document.querySelector(‘.big_pic img‘);
                //给遮罩添加移入事件,滑块和大图所在的盒子显示
                oMark.onmouseenter = function(){
                    oFloat.style.display = ‘block‘;
                    oBigPic.style.display = ‘block‘;
                }
                //给遮罩添加移出事件,滑块和大图所在的盒子隐藏
                oMark.onmouseleave = function(){
                    oFloat.style.display = ‘none‘;
                    oBigPic.style.display = ‘none‘;
                }
                //给遮罩添加移动事件,实现滑块跟随并设置边界
                oMark.onmousemove = function(evt){
                    var e = evt || window.event;
                    let left = e.pageX - oBigBox.offsetLeft - oMark.offsetLeft - oFloat.offsetWidth / 2;
                    let top = e.pageY - oBigBox.offsetTop - oMark.offsetTop - oFloat.offsetHeight / 2;
                    //设置边界
                    if(left <= 0){
                        left = 0;
                    }else if(left >= oMark.offsetWidth - oFloat.offsetWidth){
                        left = oMark.offsetWidth - oFloat.offsetWidth;
                    }
                    if(top <= 0){
                        top = 0;
                    }else if(top >= oMark.offsetHeight - oFloat.offsetHeight){
                        top = oMark.offsetHeight - oFloat.offsetHeight;
                    }
                    oFloat.style.left = left + ‘px‘;
                    oFloat.style.top = top + ‘px‘;
                    
                    
                    //滑块在小图的移动比例
                    let pX = left / (oMark.offsetWidth - oFloat.offsetWidth);
                    let pY = top / (oMark.offsetHeight - oFloat.offsetHeight);
                    //设置大图的坐标值
                    oBigImg.style.left = - pX * (oBigImg.offsetWidth - oBigPic.offsetWidth) + ‘px‘;
                    oBigImg.style.top = - pY * (oBigImg.offsetHeight - oBigPic.offsetHeight) + ‘px‘;
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <div class="small_pic">
                <span class="mark"></span>   <!--遮罩层-->
                <span class="float_layer"></span>
                <img src="img/small.jpg" />
            </div>
            <div class="big_pic">
                <img src="img/big.jpg" />
            </div>
        </div>
    </body>

3.碰撞检测

html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="创建鸟" />
        <script type="text/javascript" src="js/create.js" ></script>
        <script type="text/javascript">
            //获取按钮
            let oBtn = document.getElementById("btn");
            oBtn.onclick = function(){
                new Bird();
            }
        </script>
    </body>
</html>
js:

class Bird{
    constructor(){
        this.ele = document.createElement(‘img‘); // 创建img
        //初始化鸟
        this.init();
    }
    init(){
        //设置src属性
        this.ele.src = ‘img/2.gif‘;
        //将鸟放到body里
        document.body.appendChild(this.ele);
        //初始化鸟的大小
        this.ele.style.width = ‘200px‘;
        this.ele.style.height = ‘200px‘;
        //定位
        this.ele.style.position = ‘absolute‘;
        //设置速度
        this.speedX = this.randomInt(5,10);
        this.speedY = this.randomInt(5,10);
        this.fly(); //调用飞的方法
        this.drag(); //调用拖拽的方法
    }
    //随机数
    randomInt(min,max){
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    //飞
    fly(){
        setInterval(()=>{
            let left = this.ele.offsetLeft + this.speedX;
            let top = this.ele.offsetTop + this.speedY;
            //设置边界
            if(left <= 0){
                left = 0;
                this.speedX *= -1;
            }else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
                left = document.documentElement.clientWidth - this.ele.offsetWidth;
                this.speedX *= -1;
            }
            if(top <= 0){
                top = 0;
                this.speedY *= -1;
            }else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
                top = document.documentElement.clientHeight - this.ele.offsetHeight;
                this.speedY *= -1;
            }
            this.ele.style.left =  left + ‘px‘;
            this.ele.style.top = top + ‘px‘;
        },30)
    }
    drag(){
        this.ele.onmousedown = (evt)=>{
            var e = evt || window.event;
            this.disX = e.offsetX;
            this.disY = e.offsetY;
            document.onmousemove = (evt) =>{
                var e = evt || window.event;
                let left = e.pageX - this.disX;
                let top = e.pageY - this.disY;
                //设置边界 
                if(left <= 0){
                    left = 0;
                }else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
                    left = document.documentElement.clientWidth - this.ele.offsetWidth;
                }
                if(top <= 0){
                    top = 0;
                }else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
                    top = document.documentElement.clientHeight - this.ele.offsetHeight;
                }
                this.ele.style.left = left + ‘px‘;
                this.ele.style.top = top + ‘px‘;
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
            document.ondragstart = function(){
                return false;
            }
        }
    }
}

16、运动框架

标签:slide   切换   attr   init   lock   遍历   效果   透明度   stop   

原文地址:https://www.cnblogs.com/zhongchao666/p/9275559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!