利用jQuery、setInterval实现头像各种出现效果

来源：互联网发布：淘宝怎么开直播卖东西编辑：程序博客网时间：2024/06/09 15:15

始终不够聪明，写个setInterval都好费劲，心酸不说了，上菜~

html和css是相同的，只有js不同

HTML

<!DOCTYPE html><html lang="en" ng-app="demo"><head>  <meta charset="UTF-8">  <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">  <meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport">  <title>开锁展示</title>  <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">  <link rel="stylesheet" href="index.css"></head><body ng-controller="ctrlDemo">    <div class="container">        <div class="row">            <div class="col-md-9">                <div class="wrap" id="wrap">                    <div class="box box1">                        <div class="mask"></div>                        <ul></ul>                        <div class="btn btn-success hidden" ng-click="open($event)">打开</div>                    </div>                    <div class="box box2">                        <div class="mask"></div>                        <ul></ul>                        <div class="btn btn-success hidden" ng-click="open($event)">打开</div>                    </div>                    <div class="box box3">                        <div class="mask"></div>                        <ul></ul>                        <div class="btn btn-success hidden" ng-click="open($event)">打开</div>                    </div>                    <div class="box box4">                        <div class="mask"></div>                        <ul></ul>                        <div class="btn btn-success hidden" ng-click="open($event)">打开</div>                    </div>                </div>            </div>            <div class="col-md-3">                <div class="side">                    <ul>                        <li ng-repeat="p in persons">                            <img class="headImg" ng-src="{{p.headimg_url}}" />                            <p class="name" ng-bind="p.nickname"></p>                        </li>                    </ul>                </div>                <button class="btn btn-info" ng-click="start()">开始</button>            </div>        </div>    </div></body><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script><script src="index.js"></script></html>

css

ul,ol{padding-left:0;margin-bottom:0;list-style:none;}.container{width:1200px;margin-top:50px;}.col-md-9,.col-md-3{padding-right:0;padding-left:0;position:relative;}/* 左侧 */.box{float:left;width:50%;height:300px;position: relative;}.mask{width:100%;height:100%;position:absolute;top:0;left:0;background-color: #eee;}.box > ul{width: 100%;position: relative;}.box > ul > li{float: left;position: relative;height: 100%;}.box >ul > li > img{width: 100%;height: 100%;border-radius: 50%;position: absolute;top:0;left:0;}.box > .btn{position: relative;}/* 右侧 */.side{width: 100%;overflow: hidden;background-color: pink;}.side li{float: left;width: 20%;height: 50px;margin-bottom: 15px;}.side li > .headImg{width: 30px;height: 30px;border-radius: 50%;}.side li > .name{font-size: 12px;margin-bottom: 0px;}

统一的js

app.controller('ctrlDemo', ['$scope', '$interval', '$http', '$location', function($scope, $interval, $http, $location) {        var eachNum, uls = document.querySelectorAll(".box ul");        $scope.start......}]);

头像一个个的出（代码只优化到这了）
这里写图片描述

$scope.start = function(){    var count = 0, i = 0;    function appendEle(ul) {        ul.css("height", ul.width() / eachNum);        var li = $("<li></li>"),            img = $("<img src='" + $scope.persons[count].headimg_url + "'/>");        li.css("width", ul.width() / eachNum);        $(li).append(img);        ul.append(li);    }    var d = setInterval(function() {        if ($(uls[0]).children().length < eachNum) {            appendEle($(uls[0]));        } else if ($(uls[0]).children().length === eachNum && $(uls[1]).children().length < eachNum) {            appendEle($(uls[1]));        } else if ($(uls[0]).children().length === eachNum && $(uls[1]).children().length === eachNum && $(uls[2]).children().length < eachNum) {            appendEle($(uls[2]));        }else if ($(uls[0]).children().length === eachNum && $(uls[1]).children().length === eachNum && $(uls[2]).children().length === eachNum && $(uls[3]).children().length < eachNum) {            appendEle($(uls[3]));        } else if ($(uls[0]).children().length == eachNum && $(uls[1]).children().length == eachNum && $(uls[2]).children().length === eachNum && $(uls[3]).children().length === eachNum) {            clearInterval(d);        }        count++;    }, 500);}

一组一组的出
这里写图片描述

$scope.start = function(){    var count = 0, i = 0;    function appendEle(ul) {          ul.css("height", ul.width() / eachNum);          for(var j = 0; j < eachNum; j++) {              var li = $("<li></li>"),              img = $("<img src='" + $scope.persons[count].headimg_url + "'/>");              li.css("width", ul.width() / eachNum);              $(li).append(img);              ul.append(li);              count++;          }      }      var end = setInterval(function(){          if(i > 3){              window.clearInterval(end);              return false;          }          appendEle($(uls[i]));          i++;      },500);}

每组同时各出一个
这里写图片描述

    $scope.start = function() {        var count = 0, i = 0;        angular.forEach(uls, function(ul) {            $(ul).css("height", $(ul).width()/ eachNum);            createEle(ul);        });        function createEle(ul) {            var timer = setInterval(function(){                if($(ul).children().length < eachNum) {                    var li = $("<li></li>"),                        img = $("<img src='" + $scope.persons[count].headimg_url + "'/>");                    li.css("width", $(ul).width() / eachNum);                    $(li).append(img);                    $(ul).append(li);                } else {                    clearInterval(timer);                }                count++;            }, 500);        }    }

阅读全文

0 0