本文目录

JavaScript 焦点图

🌙
手机阅读
本文目录结构

焦点图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>焦点图</title>
    <style>
        ul,li{
            list-style: none;
        }
        #outer{
            width: 400px;
            height: 300px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
        }
        #inner{
            width: 2000px;
            height: 300px;
            position: absolute;
            left:0;
            overflow: auto;
        }
        #inner div{
            width: 400px;
            height: 300px;
            float: left;
        }
        #ulHead{
            position: absolute;
            top: 250px;
            right: 20px;
        }
        #ulHead li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: orange;
            border: 1px solid darkgreen;
            margin-right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div style="background:olive;"> 111111</div>
        <div style="background:blueviolet;"> 222222</div>
        <div style="background:aquamarine;"> 333333</div>
        <div style="background:chocolate;"> 444444</div>
        <div style="background:darkgoldenrod;"> 555555</div>
    </div>
    <ul id="ulHead">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>
<script>
    var innerDiv=document.getElementById("inner");
    var ulHeadLi=document.getElementById("ulHead").getElementsByTagName("li");
    for(var i= 0,len=ulHeadLi.length;i<len;i++){
        ulHeadLi[i].index=i;
        ulHeadLi[i].onclick=function(){
            startMove(innerDiv,{"left":-this.index*400})
        }
    }
    function startMove(ele, json, fnEnd) {//json是一个包含样式的JSON格式字符串;
//        var MAX=58;//如果是匀速运动,可以通过这个数控制匀速;
        clearInterval(ele.timer);
        ele.timer=setInterval(function (){
            var booleanTarget=true;
            for(var name in json) {//枚举JSON里面的属性和目标值;
                var iTarget=json[name];//目标值;
                if(name=='opacity') {//透明度因为要写兼容性处理,2种写法,所以opacity需要X100;
                    var cur=Math.round(parseFloat(setCss(ele, name))*100);
                } else if(name=='background'){
                    var cur=json[name];
                } else {
                    var cur=parseInt(setCss(ele, name));//对象的初始值;
                }
                var speed=(iTarget-cur)/2;//速度=(目标值-初始值)/一个数,属于减速运动;取速度;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度的取整;
//                if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是匀速,可以通过这个来控制速度;

                if(name=='opacity') {//如果输入透明度,需要为80这种的,不能是0.8
                    ele.style.filter='alpha(opacity:'+(cur+speed)+')';
                    ele.style.opacity=(cur+speed)/100;
                }else if(name=='background'){
                    ele.style[name]=cur;
                } else {
                    ele.style[name]=cur+speed+'px';
                }
                if(cur!=iTarget) {
                    booleanTarget=false;
                }
            }
            if(booleanTarget) {
                clearInterval(ele.timer);
                if(typeof fnEnd==="function") {
                    fnEnd();
                }
            }
        }, 20);
    }
    function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
        if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };

</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了