zoukankan html css js c++ java

JS封装动画框架,网易轮播图,旋转轮播图

1. JS封装运动框架

// 多个属性运动框架  添加回调函数
function animate(obj,json,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
        for(var attr in json){   // attr  属性     json[attr]  值
            //开始遍历 json
            // 计算步长    用 target 位置 减去当前的位置  除以 10
            // console.log(attr);
            var current = 0;
            if(attr == "opacity")
            {
                current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                // console.log(current);
            }
            else
            {
                current = parseInt(getStyle(obj,attr)); // 数值
            }
            // console.log(current);
            // 目标位置就是  属性值
            var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //判断透明度
            if(attr == "opacity")  // 判断用户有没有输入 opacity
            {
                if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                {
                    // obj.style.opacity
                    obj.style.opacity = (current + step) /100;
                }
                else
                {  // obj.style.filter = alpha(opacity = 30)
                    obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

                }
            }
            else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }
            else
            {
                obj.style[attr] = current  + step + "px" ;
            }

            if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
            {
                flag =  false;
            }
        }
        if(flag)  // 用于判断定时器的条件
        {
            clearInterval(obj.timer);
            // alert("ok了");
            if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
            {
                fn(); // 函数名 +  （）  调用函数  执行函数
            }
        }
    },30)
}
function getStyle(obj,attr) {  //  谁的      那个属性
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
    }
}

2. 网易轮播图

效果图

算是原理图吧

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易轮播图</title>
    <link rel="stylesheet" href="css/css.css">

    <script src="js/myJS.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
    <div class="slider" id="slider">
        <div class="slider-main" id="slider_mian">
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/1.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/2.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/3.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/4.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/5.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/6.jpg" alt=""></a></div>
        </div>
    </div>
    <div class="slider-ctrl" id="slider_ctrl">
        <span class="slider-ctrl-pre"></span>
        <span class="slider-ctrl-next"></span>
    </div>
</div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
img {
    vertical-align: bottom;
}
.box {
     310px;
    height: 270px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.slider {
     100%;
    height: 220px;
    background-color: red;
}
.slider-ctrl {
    text-align: center;
}
.slider-ctrl-con {
    display: inline-block;
     35px;
    height: 20px;
    background: url("../images/icon.png") no-repeat -24px -782px;
    margin: 10px 0 0 5px;
    cursor: pointer;
    text-indent: 99em;
    overflow: hidden;
}
.current {
    background-position: -24px -762px;
}
.slider-ctrl-pre,
.slider-ctrl-next {
    position: absolute;
    top: 50%;
    margin-top: -35px;
    display: inline-block;
     30px;
    height: 34px;
    background: url("../images/icon.png") no-repeat;
    opacity: 0.8;
    cursor: pointer;
}
.slider-ctrl-pre {
    left: 0;
    background-position: 5px top;
}
.slider-ctrl-next {
    right: 0;
    background-position: -4px -45px;
}
.slider-main {
     200%;
    height: 100%;
    background-color: orange;
}
.slider-mian-img {
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

window.onload = function () {
    var slider = $("slider");
    var slider_mian = $("slider_mian"); // 存放图片的盒子
    var slider_main_imgs = slider_mian.children; // 图片数组
    var slider_ctrl = $("slider_ctrl"); // pageControl
    var slider_ctrls = slider_ctrl.children;

    // 加载pageontrol
    for (var i=0;i<slider_main_imgs.length;i++) {
        var span = document.createElement("span");
        span.className = "slider-ctrl-con";
        span.innerHTML = slider_main_imgs.length - i;
        slider_ctrl.insertBefore(span,slider_ctrls[1]);
    }
    slider_ctrl.children[1].className = "slider-ctrl-con current";
    for (var i=1;i<slider_main_imgs.length;i++) {
        slider_main_imgs[i].style.left = slider.offsetWidth + "px";
    }

    // 添加点击事件
    var showIndex = 0;
    for (var index in slider_ctrls) {
        slider_ctrls[index].onclick = function () {
            if (this.className == "slider-ctrl-pre") { // 点击了左按钮
                animate(slider_main_imgs[showIndex],{left:slider.offsetWidth});
                showIndex--;
                if (showIndex < 0) {
                    showIndex = slider_main_imgs.length - 1;
                }
                slider_main_imgs[showIndex].style.left = -slider.offsetWidth + "px";
                animate(slider_main_imgs[showIndex],{left:0});
            } else if (this.className == "slider-ctrl-next") { // 点击了右按钮
                autoPlay();
            } else { // 其他按钮
                // alert(showIndex);
                var willShow = this.innerHTML - 1;
                if (willShow > showIndex) { // 点击了正在展示图片的右侧按钮
                    // 将要显示的图片立刻定位到右面
                    slider_main_imgs[willShow].style.left = slider.offsetWidth + "px";
                    animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth}); // 当前图片慢慢走出去
                    animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来
                    showIndex = willShow;
                } else if (willShow < showIndex) {
                    // 将要显示的图片立刻定位到左面
                    slider_main_imgs[willShow].style.left = -slider.offsetWidth + "px";
                    animate(slider_main_imgs[showIndex],{left:slider.offsetWidth}); // 当前的图片慢慢走出去
                    animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来
                    showIndex = willShow;
                }
            }
            pageControl();
        }
    }

    // pageControl变化
    function pageControl() {
        for (var i=1;i<=slider_ctrls.length - 2;i++) {
            slider_ctrls[i].className = "slider-ctrl-con";
        }
        slider_ctrls[showIndex + 1].className = "slider-ctrl-con current";
    }

    // 开启定时器
    var timer = null;
    timer = setInterval(autoPlay,3000);
    function autoPlay() {
        animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth});
        showIndex++;
        if (showIndex > slider_main_imgs.length - 1) {
            showIndex = 0;
        }
        slider_main_imgs[showIndex].style.left = slider.offsetWidth + "px";
        animate(slider_main_imgs[showIndex],{left:0});
        pageControl();
    }
    // 清除定时器
    $("js_box").onmouseover = function () {
        clearInterval(timer);
    }
    $("js_box").onmouseout = function () {
        clearInterval(timer);
        timer = setInterval(autoPlay,3000);
    }
}

2.旋转轮播图

效果图

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css">
    <script src="js/myJS.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
    <div class="slider" id="js_slider">
        <ul>
            <li><a href="javascript:;"><img src="images/slidepic1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic5.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic6.jpg" alt=""></a></li>
        </ul>
    </div>
    <div class="arrow" id="js_arrow">
        <a href="javascript:;" class="pre"></a>
        <a href="javascript:;" class="next"></a>
    </div>
</div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.slider {
     1200px;
    height: 600px;
    margin: 100px auto;
    position: relative;
}
ul {
     100%;
    height: 100%;
}
ul li {
    position: absolute;
    top: 100px;
    left: 200px;
}
ul li img {
     100%;
}
.arrow {
     100%;
    background-color: orange;
    opacity: 0;
    position: absolute;
    top: 50px;
}
.pre,.next {
     76px;
    height: 112px;
    position: absolute;
    background: url("../images/prev.png") no-repeat;
    top: 0;
}
.pre {
    left: 0;
}
.next {
    right: 0;
    background: url("../images/next.png") no-repeat;
}

JavaScript

window.onload = function () {
    var arrow = $("js_arrow"); // 左右按钮的盒子,整体控制左右按钮的显示与隐藏
    var box = $("js_box");
    var lis = $("js_slider").children[0].children; // 图片集合
    var pre = arrow.children[0]; // 左按钮
    var next = arrow.children[1]; // 右按钮
    box.onmouseover = function () {
        animate(arrow,{opacity:100});
    }
    box.onmouseout = function () {
        animate(arrow,{opacity:0});
    }
    //  存储了每个图片的信息
    var json = [
        {   //  1
            400,
            top:20,
            left:50,
            opacity:20,
            zIndex:2
        },
        {  // 2
            550,
            top:70,
            left:0,
            opacity:80,
            zIndex:3
        },
        {   // 3
            800,
            top:100,
            left:200,
            opacity:100,
            zIndex:4
        },
        {  // 4
            550,
            top:70,
            left:600,
            opacity:80,
            zIndex:3
        },
        {   //5
            400,
            top:20,
            left:750,
            opacity:20,
            zIndex:2
        },
        {   //6
            350,
            top:0,
            left:425,
            opacity:10,
            zIndex:1
        }
    ];
    var flag = true; // 控制动画的标记
    change();
    pre.onclick = function () {
        if (flag == true) { // flag为true时才可以做动画
            json.push(json.shift()); // 交换json
            flag = false; // 立即将flag修改为false,来控制动画
            change();
        }
    }
    next.onclick = function () {
        if (flag == true) {
            json.unshift(json.pop());
            flag = false;
            change();
        }
    }

    function change() {
        for (var i=0;i<lis.length;i++) {
            animate(lis[i],json[i],function () {
                // 回调函数,修改控制动画的标记
                flag = true;
            });
        }
    }
}

查看全文

相关阅读:
阿铭每日一题 day 1 20180111
计算机网络之基础链路
 android学习笔记对话框合集
 android 音乐播放器简单实现
 Service的生命周期&Service绑定方法
 android学习笔记 Service
android学习笔记 activity生命周期&任务栈&activity启动模式
 android 短信助手demo
android 显示意图
 java 多线程断点下载demo

原文地址：https://www.cnblogs.com/gchlcc/p/6761839.html

最新文章
冒泡排序
 二分查找
 归并排序
 linux任务计划cron
日常运维二
 日常运维
 正则
 Linux shell基础知识
 Linux软件包安装和卸载
 Linux文件压缩和打包