您的位置: 首页  >  IT文章  >  5、瀑布流、九宫格之位置交换（普通模式和发布订阅/观察者模式）、跑马灯效果、卷轴展开效果、“几”字形选项卡、胶卷式放映、放大镜、锚点

5、瀑布流、九宫格之位置交换（普通模式和发布订阅/观察者模式）、跑马灯效果、卷轴展开效果、“几”字形选项卡、胶卷式放映、放大镜、锚点

分类: IT文章 • 2024-09-24 14:00:31 
一、瀑布流
所谓瀑布流图片，就是随着鼠标往下拉，图片无穷无尽，但又不是死循环。因为这次拉到底后，后面的才显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
            font-size: 50px;
            color: white;
        }
        div{
             1050px;
            margin:0 auto;
        }
        div ul{
             200px;
            float: left;
            margin: 0 5px;
        }
        div ul li{
             100%;
            background: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5c2ddf7c938c5a6ae54f0b1ab390b9fe") no-repeat center #e1e1e1;
            margin-bottom: 10px;
        }
        div ul li img{
            display: block;
             100%;
        }
    </style>
</head>
<body>
<div>
    <ul><!--<li><img realImg="1.jpg" alt=""/></li>--></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>
<script>
    var oDiv=document.getElementsByTagName('div')[0];
    var aUl=oDiv.getElementsByTagName('ul');
    var aLi=oDiv.getElementsByTagName('li');
    var aImg=oDiv.getElementsByTagName('img');
    //此处是自己造的假数据
    var data=[
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517855671_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517857750_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517860171_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518058703_mthumb.jpg"},
        {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518060703_mthumb.jpg"}
    ];
    function rnd(n,m){
        return Math.round(Math.random()*(m-n)+n);
    }
    function makeArray(arg){
        var ary=[];
        if('getComputedStyle' in window){
            ary=Array.prototype.slice.call(arg);
        }else{
            for(var i=0; i<arg.length; i++){
                ary.push(arg[i])
            }
        }
        return ary;
    }
    function win(attr){
        return document.documentElement[attr]||document.body[attr];
    }
    //1.动态创建1个li,li的宽度不管，高度随机，内容是img；
    function createLi(){
        var oLi=document.createElement('li');
        oLi.style.height=rnd(100,300)+'px';
        oLi.innerHTML='<img realImg="'+data[rnd(0,9)].src+'" alt=""/>';
        return oLi;
    }
    //2.创建50个li，每次都插入最短的ul
    function li50(){
        for(var i=0; i<50; i++){
            var oLi=createLi();
            var ary=makeArray(aUl);
            ary.sort(function(a,b){
                return a.offsetHeight- b.offsetHeight;
            });
            ary[0].appendChild(oLi);
        }
    }
    li50();
    showImg();
    window.onscroll=function(){
        var scrollBottom=win('scrollTop')+win('clientHeight');
        showImg();//延迟加载图片，只要图片进入可视区，才显示图片
        if(scrollBottom>=win("scrollHeight")){
            li50();//不管是否进入可视区，只要满足条件，都会动态创建50个；
        }
    };
    function showImg(){
        var scrollBottom=win('scrollTop')+win('clientHeight');
        for(var i=0; i<aLi.length; i++){
            var imgPos=aLi[i].offsetTop+aLi[i].offsetHeight;
            if(imgPos<scrollBottom){
                aImg[i].src=aImg[i].getAttribute('realImg');
                aImg[i].parentNode.style.height='auto';
            }
        }
    }
</script>
</body>
</html>

二、九宫格之位置交换
1、普通模式（DOM二级事件）
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>九宫格之位置交换</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .whole {
             480px;
            height: 480px;
            padding: 5px;
            background: #CFC;
            position: relative;
            margin: 100px auto;
        }
        .whole .single {
             150px;
            height: 150px;
            margin: 5px;
            cursor: move;
            user-select: none;
            background: #FF9;
            overflow: hidden;
            float: left;
        }
        .whole .single img {
             100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
<div class="whole">
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
</div>
</body>
</html>
<script>
    /*第一步：准备（订阅、解除订阅、发布）方法*/
    function on(ele, type, fn) {
        if (ele.addEventListener) {
            ele.addEventListener(type, fn, false);
        } else {
            if (!ele["onEvent" + type]) {
                ele["onEvent" + type] = [];
                ele.attachEvent("on" + type, function () {
                    run.call(ele)
                });
            }
            var single = ele["onEvent" + type];
            for (var i = 0; i < single.length; i++) {
                if (single[i] == fn)return;
            }
            single.push(fn);
        }
    }
    function off(ele, type, fn) {
        if (ele.removeEventListener) {
            ele.removeEventListener(type, fn, false);
        } else {
            var single = ele["onEvent" + type];
            if (single && single.length) {
                for (var i = 0; i < single.length; i++) {
                    if (single[i] == fn) {
                        single[i] = null;
                        return;
                    }
                }
            }
        }
    }
    function run(ele, type, event) {
        var single = ele["custom" + type];
        if (single && single.length) {
            for (var i = 0; i < single.length; i++) {
                if (typeof single[i] == "function") {
                    single[i].call(ele, event);
                } else {
                    single.splice(i, 1);
                    i--;
                }
            }
        }
    };
    /*第二步：准备与动画相关的方法*/
    function animate(ele, obj, duration) {
        var allBegin = {};//用来保存多个方向begin；
        var allChange = {};//用来保存多个方向的change;
        var flag = 0;//用来记录各个方向的距离是否有效
        for (var attr in obj) {
            var target = obj[attr]
            var begin = getCss(ele, attr);
            var change = target - begin;
            if (change) {//判断一下此方向的运动距离有效，不为0
                allBegin[attr] = begin;
                allChange[attr] = change;
                flag++;
            }
        }
        if (!flag) return; //如果各个方向的运动距离都是0，则结束动画的执行
        var interval = 15;
        var times = 0;
        clearInterval(ele.timer);
        function step() {
            times += interval;
            if (times < duration) {
                for (var attr in allChange) {
                    var change = allChange[attr];
                    var begin = allBegin[attr];
                    var val=times/duration*change+begin;
                    setCss(ele, attr, val);
                }
            } else {
                for (var attr in allChange) {
                    var target = obj[attr];
                    setCss(ele, attr, target);
                }
                clearInterval(ele.timer);
            }
        }
        ele.timer = setInterval(step, interval);
    }
    function getCss(ele, attr) {
        if (window.getComputedStyle) {
            return parseFloat(window.getComputedStyle(ele, null)[attr]);
        } else {
            if (attr == "opacity") {
                //opacity:0.5;
                //filter:Alpha(opacity=50); 
                var filter = ele.currentStyle.filter;
                var reg = /alpha(opacity=(d+(?:.d+)?))/;
                if (reg.test(filter)) {// IE8 以及更早的浏览器
                    return RegExp.$1 / 100;
                } else {
                    return 1;//如果没有给不透明度赋值，则应该把默认值1返回
                }
            } else {
                return parseFloat(ele.currentStyle[attr]);
            }
        }
    }
    function setCss(ele, attr, val) {
        if (attr == "opacity") {
            ele.style.opacity = val;
            ele.style.filter = "alpha(opacity=" + val * 100 + ")";
        } else {
            ele.style[attr] = val + "px";
        }
    }
    function processThis(fn, context) {
        return function (event) {
            fn.call(context, event);
        };
    }
    function Drag(ele) {
        this.minX = null;
        this.minY = null;
        this.maxX = null;
        this.maxY = null;
        this.ele = ele;
        this.selfDown = processThis(this.down, this);
        this.selfMove = processThis(this.move, this);
        this.selfUp = processThis(this.up, this);
        on(this.ele, "mousedown", this.selfDown);
    }
    /*第三步：准备拖拽的类*/
    Drag.prototype.down = function (event) {
        this.minX = this.ele.offsetLeft;
        this.minY = this.ele.offsetTop;
        this.maxX = event.pageX;
        this.maxY = event.pageY;
        if (this.ele.setCapture) {
            this.ele.setCapture();
            on(this.ele, "mousemove", this.selfMove);
            on(this.ele, "mouseup", this.selfUp);
        } else {
            on(document, "mousemove", this.selfMove);
            on(document, "mouseup", this.selfUp);
        }
        event.preventDefault();
        this.ele.style.zIndex = ++index;
    };
    Drag.prototype.move = function (event) {
        this.ele.style.left = this.minX + (event.pageX - this.maxX) + "px";
        this.ele.style.top = this.minY + (event.pageY - this.maxY) + "px";
        var ele = this.ele;
        this.allCover = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item == ele)continue;
            //以下检测item是否在this.ele的右、下、左、上方
            var isRight = item.offsetLeft > ele.offsetLeft + ele.offsetWidth;
            var isBottom = item.offsetTop > ele.offsetTop + ele.offsetHeight;
            var isLeft = ele.offsetLeft > item.offsetLeft + item.offsetWidth;
            var isTop = ele.offsetTop > item.offsetTop + item.offsetHeight;
            if (isRight || isBottom || isLeft || isTop) {
              item.style.backgroundColor = "";
            } else {
              this.allCover.push(item);
              item.style.backgroundColor = "red";
            }  
        }
    };
    Drag.prototype.up = function (event) {
        if (this.ele.releaseCapture) {
            this.ele.releaseCapture();
            off(this.ele, "mousemove", this.selfMove);
            off(this.ele, "mouseup", this.selfUp);
        } else {
            off(document, "mousemove", this.selfMove);
            off(document, "mouseup", this.selfUp);
        }
        var allCover = this.allCover;
        if (allCover && allCover.length) {
            for (var i = 0; i < allCover.length; i++) {
                var item = allCover[i];
                //计算被拖拽的元素和撞上的元素之间的距离，并且把距离保存到distance属性上
                //可以先找一个距离四周图片都相等的位置，然后再移动、看效果
                item.distance = Math.sqrt(Math.pow(this.ele.offsetLeft - item.offsetLeft, 2)
                        + Math.pow(this.ele.offsetTop - item.offsetTop, 2));
                item.style.backgroundColor = "";
            }
            //排序，找出和被拖拽元素距离最短（重合面积最大）的那个元素
            allCover.sort(function (one, two) {
                return one.distance - two.distance
            });
            var shortest = allCover[0];
            shortest.style.backgroundColor = "orange";
            this.ele.style.backgroundColor = "orange";
            //交换位置
            animate(shortest, {left: this.ele.left, top: this.ele.top}, 700);
            animate(this.ele, {left: shortest.left, top: shortest.top}, 700);
            var left = this.ele.left;
            var top = this.ele.top;
            this.ele.left = shortest.left;
            this.ele.top = shortest.top;
            shortest.left = left;
            shortest.top = top;
        } else {//如果没有撞上的元素，则返回原始位置
            animate(this.ele, {left: this.ele.left, top: this.ele.top}, 700);
        }
    };
    /*第四步：碰撞检测*/
    var index = 0;
    var items = document.getElementsByClassName("single");
    for (var i = items.length - 1; i >= 0; i--) {
        //从后往前逐个定位。
        //如果从前往后逐个定位，随着前面的脱离文档流，后面的会移动到前面的位置，最终都叠加到第一张图片的上面。
        var item = items[i];
        item.style.left = (item.left = item.offsetLeft) + "px";
        item.style.top = (item.top = item.offsetTop) + "px";
        item.style.position = "absolute";
        new Drag(item)
    }
</script>
2、发布订阅/观察者模式（在实例上订阅，在实例执行事件时发布，含DOM二级事件）
发布/订阅模式中，发布者只要做好消息的发布，而不关心消息有没有订阅者订阅。而观察者模式则要求两端同时存在
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>九宫格之位置交换</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .whole {
             480px;
            height: 480px;
            padding: 5px;
            background: #CFC;
            position: relative;
            margin: 100px auto;
        }
        .whole .single {
             150px;
            height: 150px;
            margin: 5px;
            cursor: move;
            user-select: none;
            background: #FF9;
            overflow: hidden;
            float: left;
        }
        .whole .single img {
             100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
<div class="whole">
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
    <div class="single"><img src=""></div>
</div>
</body>
</html>
<script>
    /*第一步：准备（订阅、解除订阅、发布）方法*/
    function on(ele, type, fn) {//把方法订阅给实例或文档
        if (ele.addEventListener) {
            ele.addEventListener(type, fn, false);
        } else {
            if (!ele["onEvent" + type]) {
                ele["onEvent" + type] = [];
                ele.attachEvent("on" + type, function () {
                    run.call(ele)
                });
            }
            var single = ele["onEvent" + type];
            for (var i = 0; i < single.length; i++) {
                if (single[i] == fn)return;
            }
            single.push(fn);
        }
    }
    function off(ele, type, fn) {
        if (ele.removeEventListener) {
            ele.removeEventListener(type, fn, false);
        } else {
            var single = ele["onEvent" + type];
            if (single && single.length) {
                for (var i = 0; i < single.length; i++) {
                    if (single[i] == fn) {
                        single[i] = null;
                        return;
                    }
                }
            }
        }
    }
    function run(ele, type, event) {
        var single = ele["custom" + type];
        if (single && single.length) {
            for (var i = 0; i < single.length; i++) {
                if (typeof single[i] == "function") {
                    single[i].call(ele, event);
                } else {
                    single.splice(i, 1);
                    i--;
                }
            }
        }
    };
    /*第二步：准备与动画相关的方法*/
    function animate(ele, obj, duration) {
        var allBegin = {};//用来保存多个方向begin；
        var allChange = {};//用来保存多个方向的change;
        var flag = 0;//用来记录各个方向的距离是否有效
        for (var attr in obj) {
            var target = obj[attr]
            var begin = getCss(ele, attr);
            var change = target - begin;
            if (change) {//判断一下此方向的运动距离有效，不为0
                allBegin[attr] = begin;
                allChange[attr] = change;
                flag++;
            }
        }
        if (!flag) return; //如果各个方向的运动距离都是0，则结束动画的执行
        var interval = 15;
        var times = 0;
        clearInterval(ele.timer);
        function step() {
            times += interval;
            if (times < duration) {
                for (var attr in allChange) {
                    var change = allChange[attr];
                    var begin = allBegin[attr];
                    var val=times/duration*change+begin;
                    setCss(ele, attr, val);
                }
            } else {
                for (var attr in allChange) {
                    var target = obj[attr];
                    setCss(ele, attr, target);
                }
                clearInterval(ele.timer);
            }
        }
        ele.timer = setInterval(step, interval);
    }
    function getCss(ele, attr) {
        if (window.getComputedStyle) {
            return parseFloat(window.getComputedStyle(ele, null)[attr]);
        } else {
            if (attr == "opacity") {
                //opacity:0.5;
                //filter:Alpha(opacity=50); 
                var filter = ele.currentStyle.filter;
                var reg = /alpha(opacity=(d+(?:.d+)?))/;
                if (reg.test(filter)) {// IE8 以及更早的浏览器
                    return RegExp.$1 / 100;
                } else {
                    return 1;//如果没有给不透明度赋值，则应该把默认值1返回
                }
            } else {
                return parseFloat(ele.currentStyle[attr]);
            }
        }
    }
    function setCss(ele, attr, val) {
        if (attr == "opacity") {
            ele.style.opacity = val;
            ele.style.filter = "alpha(opacity=" + val * 100 + ")";
        } else {
            ele.style[attr] = val + "px";
        }
    }
    function processThis(fn, context) {
        return function (event) {
            fn.call(context, event);
        };
    }
    /*第三步：准备拖拽的类*/
    function Drag(ele) {
        this.minX = null;
        this.minY = null;
        this.maxX = null;
        this.maxY = null;
        this.ele = ele;
        this.selfDown = processThis(this.down, this);
        this.selfMove = processThis(this.move, this);
        this.selfUp = processThis(this.up, this);
        on(this.ele, "mousedown", this.selfDown);
    }
    Drag.prototype.on = function (type, fn) {//把方法订阅给实例
        if (!this["custom" + type]) {
            this["custom" + type] = [];
        }
        var single = this["custom" + type];
        for (var i = 0; i < single.length; i++) {
            if (single[i] == fn)return this;
        }
        single.push(fn);
        return this;
    };
    Drag.prototype.down = function (event) {
        this.minX = this.ele.offsetLeft;
        this.minY = this.ele.offsetTop;
        this.maxX = event.pageX;
        this.maxY = event.pageY;
        if (this.ele.setCapture) {
            this.ele.setCapture();
            on(this.ele, "mousemove", this.selfMove);
            on(this.ele, "mouseup", this.selfUp);
        } else {
            on(document, "mousemove", this.selfMove);
            on(document, "mouseup", this.selfUp);
        }
        event.preventDefault();
        run(this,"custDown", event);
    };
    Drag.prototype.move = function (event) {
        this.ele.style.left = this.minX + (event.pageX - this.maxX) + "px";
        this.ele.style.top = this.minY + (event.pageY - this.maxY) + "px";
        run(this,"custMove", event);
    };
    Drag.prototype.up = function (event) {
        if (this.ele.releaseCapture) {
            this.ele.releaseCapture();
            off(this.ele, "mousemove", this.selfMove);
            off(this.ele, "mouseup", this.selfUp);
        } else {
            off(document, "mousemove", this.selfMove);
            off(document, "mouseup", this.selfUp);
        }
        run(this, "custUp", event);
    };
    /*第四步：碰撞检测*/
    var index = 0;
    var items = document.getElementsByClassName("single");
    for (var i = items.length - 1; i >= 0; i--) {
        //从后往前逐个定位。
        //如果从前往后逐个定位，随着前面的脱离文档流，后面的会移动到前面的位置，最终都叠加到第一张图片的上面。
        var item = items[i];
        item.style.left = (item.left = item.offsetLeft) + "px";
        item.style.top = (item.top = item.offsetTop) + "px";
        item.style.position = "absolute";
        new Drag(item).on("custDown", increaseIndex).on("custMove", testHit).on("custUp", changePosition);
    }
    function increaseIndex() {
        this.ele.style.zIndex = ++index;
    }
    function testHit() {
        var ele = this.ele;
        this.allCover = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item == ele)continue;
            //以下检测item是否在this.ele的右、下、左、上方
            var isRight = item.offsetLeft > ele.offsetLeft + ele.offsetWidth;
            var isBottom = item.offsetTop > ele.offsetTop + ele.offsetHeight;
            var isLeft = ele.offsetLeft > item.offsetLeft + item.offsetWidth;
            var isTop = ele.offsetTop > item.offsetTop + item.offsetHeight;
            if (isRight || isBottom || isLeft || isTop) {
              item.style.backgroundColor = "";
            } else {
              this.allCover.push(item);
              item.style.backgroundColor = "red";
            }  
        }
    }
    function changePosition() {
        var allCover = this.allCover;
        if (allCover && allCover.length) {
            for (var i = 0; i < allCover.length; i++) {
                var item = allCover[i];
                //计算被拖拽的元素和撞上的元素之间的距离，并且把距离保存到distance属性上
                //可以先找一个距离四周图片都相等的位置，然后再移动、看效果
                item.distance = Math.sqrt(Math.pow(this.ele.offsetLeft - item.offsetLeft, 2)
                        + Math.pow(this.ele.offsetTop - item.offsetTop, 2));
                item.style.backgroundColor = "";
            }
            //排序，找出和被拖拽元素距离最短（重合面积最大）的那个元素
            allCover.sort(function (one, two) {
                return one.distance - two.distance
            });
            var shortest = allCover[0];
            shortest.style.backgroundColor = "orange";
            this.ele.style.backgroundColor = "orange";
            //交换位置
            animate(shortest, {left: this.ele.left, top: this.ele.top}, 700);
            animate(this.ele, {left: shortest.left, top: shortest.top}, 700);
            var left = this.ele.left;
            var top = this.ele.top;
            this.ele.left = shortest.left;
            this.ele.top = shortest.top;
            shortest.left = left;
            shortest.top = top;
        } else {//如果没有撞上的元素，则返回原始位置
            animate(this.ele, {left: this.ele.left, top: this.ele.top}, 700);
        }
    }
</script>
三、跑马灯效果
实现原理：将图片复制一份放到第一份图片后面；第一份图片从显示区左边界跑出多少、第二份图片就从显示区右边界跑入多少；第一份图片完全跑出显示区时，第二份图片则完全跑入显示区。此时瞬间切换至轮播开始时的状态。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        div{
            position: relative;
             800px;
            height: 200px;
            border: 5px solid lightgreen;
            margin:10px auto;
            overflow: hidden;
        }
        div ul{
            position: absolute;
            left:0;
            top:0;
        }
        div ul li{
             200px;
            height: 200px;
            float: left;
        }
        div ul li img{
            100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></li>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></li>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/></li>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/></li>
    </ul>
</div>
<script>
    var oUl=document.getElementsByTagName('ul')[0];
    var lis=oUl.getElementsByTagName('li');
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=lis.length*lis[0].offsetWidth+'px';
    var left=null;
    var timer=setInterval(function(){
        left-=3;
        if(left<-oUl.offsetWidth/2){
            left=0;
        }
        oUl.style.left=left+'px'
    },20)
</script>
</body>
</html>

四、卷轴展开效果
实现原理：（1）利用绝对定位固定好起始位置；（2）利用遮罩将右轴右侧的部分遮住；（3）让右轴和遮罩同时同速度向右运动！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诏书</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #animate {
            margin: 40px auto;
             1100px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }
        #back {
             1100px;
            height: 500px;
            position: absolute;
            left: 40px;
            top: 95px;
        }
        #leftAxis {
            position: absolute;
            left: 0;
        }
        #rightAxis {
            position: absolute;
            left: 16px;
        }
        #rightWhiteMark {
            position: absolute;
            left: 70px;
            top:95px;
        }
    </style>
</head>
<body>
<div id="animate">
    <div id="back"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145027pf0jh29z4nhlljr5.png"/></div>
    <div id="leftAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div>
    <div id="rightWhiteMark"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/26/193935vzzlvazlrkgcxxv6.png"/></div>
    <div id="rightAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div>
</div>
</body>
<script>
    var animate=document.getElementById("animate");
    var rightAxis = document.getElementById("rightAxis");
    var rightWhiteMark = document.getElementById("rightWhiteMark");
    var timer = setInterval(function () {
        var rightAxisLeft=getComputedStyle(rightAxis).left;
        var rightWhiteMarkLeft=getComputedStyle(rightWhiteMark).left;
        if(parseFloat(rightAxisLeft)>=923){
            rightAxisLeft=923+"px";
            clearInterval(timer);
        }
        rightAxis.style.left=(parseFloat(rightAxisLeft)+10)+"px";
        rightWhiteMark.style.left=(parseFloat(rightWhiteMarkLeft)+10)+"px";
    }, 20)
</script>
</html>

五、“几”字形选项卡
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            612px;
            border:2px red solid;
            margin: 0 auto;
        }
        ul{
            overflow: hidden;
        }
        li{
            list-style: none;
            background:red;
            float: left;
             200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 2px solid orange;
        }
        li.on{
            background: green;
            border-bottom: none;/*让该卡头的下边框为“none”*/
            height: 32px;/*卡头的内容高度设置为：原内容的高度+卡头下边框的宽度。*/
        }
        .box div{
            background:green;
            display: none;
            612px;
            height:200px;
            font-size: 30px;
            border-top: none;/*在开始写样式时，就把展示区上边框设置成“none”*/
        }
        .box div.on{
            display: block;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <ul>
        <li>中国</li>
        <li class="on">日本</li>
        <li>韩国</li>
    </ul>
    <div>中国是老大</div>
    <div class="on">日本是老二</div>
    <div>韩国是老三</div>
</div>
<script>
    var box = document.getElementById('box');
    var ul = document.getElementsByTagName('ul')[0];
    var lis = box.getElementsByTagName('li');
    var divs = box.getElementsByTagName('div');
    for(var i=0;i<lis.length;i++){
        lis[i].qiancheng = i;
        lis[i].onmouseover = function(){
            for(var j=0;j<lis.length;j++){
                lis[j].className = '';
                divs[j].className = '';
            }
            this.className = 'on';
            divs[this.qiancheng].className = 'on';
        }
    }
    ul.onmouseout=function () {
        for(var j=0;j<lis.length;j++){
            if(j===1){
                lis[j].className = 'on';
                divs[lis[j].qiancheng].className = 'on';
                continue;
            }
            lis[j].className = '';
            divs[j].className = '';
        }
    }
</script>
</body>
</html>

六、胶卷式放映
图片像电影的胶卷一样，一帧帧地放映，且可以任意删减图片帧数，不会影响放映效果。
所用技术为：CSS3动画和原生JavaScript。
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>胶卷式放映</title>
  <style type="text/css" id="style1">
    * {
      margin: 0;
      padding: 0;
      font-family:"楷体"
    }
    body{
      background: black;
    }
    #wrap {
       150px;
      height: 120px;
      margin: 200px auto;
      perspective: 2000px;
    }
    #wrap ul {
       100%;
      height: 100%;
      transform-style: preserve-3d;
      animation:move 12s 3.2s infinite ;
    }
    #wrap ul li {
      top: 0;
      left: 0;
      position: absolute;
       148px;
      height: 118px;
      line-height: 118px;
      text-align: center;
      font-size: 118px;
      background: grey;
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      overflow: hidden;
    }
    .shadow{
       1200px;
      height: 1200px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -600px;
      margin-top: -600px;
      background: radial-gradient(600px 600px at center,rgba(50,50,50,0.8),rgba(0,0,0,0));
      transform: rotateX(90deg) translateZ(-150px);
    }
  </style>
</head>
<body>
<div id="wrap">
  <ul>
    <li>！</li>
    <li>师</li>
    <li>程</li>
    <li>工</li>
    <li>端</li>
    <li>前</li>
    <li>的</li>
    <li>秀</li>
    <li>优</li>
    <li>最</li>
    <li>上</li>
    <li>史</li>
    <li>历</li>
    <li>类</li>
    <li>人</li>
    <li>是</li>
    <li>成</li>
    <li>钱</li>
  </ul>
  <div class="shadow"></div>
</div>
</body>
</html>
<script>
  var oLis = document.querySelectorAll("#wrap li");
  var oStyle = document.querySelector("#style1");
  var len = oLis.length;
  var aaa = null;
  for (var i = 1; i <= len; i++) {
    (function (i) {
      window.setTimeout(function () {
        oStyle.innerHTML +=
          " #wrap ul li:nth-child(" +
          i +
          "){transform:rotateY(" +
          (len - i) * (360 / len) +
          "deg) translateZ(500px);transition:0.7s;transition-delay:" +
          i * 0.1 +
          "s}";
      }, 100);
    })(i);
  }

  for (i = 0; i <= len; i++) {
    aaa +=
      (100 / len) * i + "%{transform: rotateY(" + (-360 / len) * i + "deg);}";
  }
  oStyle.innerHTML += "@keyframes move {" + aaa + "}";
</script>

七、放大镜
原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .small{
       400px;
      height: 400px;
      position: relative;
      background: url(http://cdn.attach.qdfuns.com/notes/pics/201702/11/214206pk76vdieu5co7uwi.jpg) no-repeat center;
      border: 1px solid #ccc;
    }
    .small .inner{
       100px;
      height: 100px;
      background: yellow;
      opacity: 0.5;
      filter: alpha(opacity=50);
      position: absolute;
      left:0;
      top:0;
      display: none;
    }
    .big{
       400px;
      height: 400px;
      position: absolute;
      left:410px;
      top:0;
      overflow: hidden;
      border: 1px solid #ccc;
      display: none;
    }
    .big img{
       200%;
      height: 200%;
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>
<div id="small" class="small">
  <div class="inner"></div>
</div>
<div id="big" class="big">
  <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/11/214213x2oh86wpuuuzcuuc.jpg" alt=""/>
</div>
<script>
  var small = document.getElementById("small");
  var inner = small.getElementsByTagName("div")[0];
  var big = document.getElementById("big");
  var img = big.getElementsByTagName("img")[0];
  //当鼠标移入small的时候，inner和big显示
  small.onmouseover = function () {
    big.style.display = "block";
    inner.style.display = "block";
  };
  //当鼠标在small移动的时候：1）鼠标在inner的中间 2）inner跟随鼠标移动
  small.onmousemove = function (e) {
    e = e || window.event;
    var left = e.clientX - this.offsetLeft - inner.offsetWidth / 2;
    var top = e.clientY - this.offsetTop - inner.offsetHeight / 2;
    if (left <= 0) {
      left = 0;
    } else if (left >= this.offsetWidth - inner.offsetWidth) {
      left = this.offsetWidth - inner.offsetWidth;
    }
    if (top <= 0) {
      top = 0;
    } else if (top >= this.offsetHeight - inner.offsetHeight) {
      top = this.offsetHeight - inner.offsetHeight;
    }
    inner.style.left = left + "px";
    inner.style.top = top + "px";
    //当inner移动的时候，大图跟着一起移动，并且，大图和inner移动的方向相反；
    //或者理解为：左边阴影在图片上从左到右移动的时候，右边大框也在大图片上从左到右移动（尽管视觉上是相反的）。
    img.style.left =
      (left / (small.offsetWidth - inner.offsetWidth)) *
        (big.offsetWidth - img.offsetWidth) +
      "px";
    img.style.top =
      (top / (small.offsetHeight - inner.offsetHeight)) *
        (big.offsetHeight - img.offsetHeight) +
      "px";
  };
  //当鼠标移出的时候，inner和big隐藏；
  small.onmouseout = function () {
    big.style.display = "none";
    inner.style.display = "none";
  };
</script>
</body>
</html>
 
八、锚点
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  </head>
  <body>
  <a href="#5F">点击我，锚点会定位到某个地方。此处a href="#5F"；彼处a name="5F"  </a>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <a name="5F">某个地方哈哈哈哈</a>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </body>
  </html>

相关推荐