在火星最后一个月——第一天

来源：互联网发布：vue.js tomcat 编辑：程序博客网时间：2024/05/18 06:21

本周是来火星学习的最后一个月了，想想马上要出去工作了还有一点小激动呢，今天学习的是CSS+JS，我去，效果杠杠的呀。
先把最终的效果PO上来吧：

（未点击时图片的效果）

（点击任意图片后的效果）

接下来是今天所学的所有案例：

demo1--.显示一张图片

<div class="item" style="background-image: url(images/0.jpg);"></div>

.item {width: 196px;height: 100px;background-size: cover;}

第一步非常简单对吧，就是往body里面放了一个div，so,各位看官看到这里是不是觉得so easy！好的，往下走

demo02--.显示25张图片

<body><ul class="gallary"></ul></body>

<style>.item {width: 196px;height: 100px;background-size: cover;}</style>

<script>$(function(){var gallary = $(".gallary");for (var i = 0; i < 25; i++) {var li = $('<li><div class="item" style="background-image: url(images/0.jpg);"></div></li>');gallary.append(li);}});</script>

图片还是那张图片，body里还是只有一个ul,样式也没有变化，在script里面大家看我的循环判断条件，25？！，对的，这里是将图片的路径提前修改好了，我的图片src是0-25的阿拉伯数字，数据组织好了，算法才简单嘛，后面只需要将获取到的li数据添加到ul里面就ok了，好的，这步没问题了，咱往下走

demo03--.显示25张不同的图片

<body><ul class="gallary"></ul></body>

<style>.item {width: 196px;height: 100px;background-size: cover;}</style>

<script>$(function(){var gallary = $(".gallary");for (var i = 0; i < 25; i++) {var li = $('<li><div class="item"></div></li>');li.find("div").css("background-image", "url(images/"+ i +".jpg)");gallary.append(li);}//li.appendTo(gallary);});</script>

body与样式还是没动，改动的还是script,大家仔细看，images后面的图片路径，咱们将具体的路径用变量代替了，然后套路不变，25张图片顺利输出，好的，下面继续

demo04--

<body><ul class="gallary center"></ul></body>

    <style>        ul, li {            padding: 0px;            margin: 0px;            list-style: none;        }        .gallary {            width: 980px;            height: 500px;        }        .item {            width: 196px;            height: 100px;            background-size: cover;            float: left;            /*position: absolute;            left: 0px;            top: 0px;*/        }        .center {            position: absolute;            left: 0px;            right: 0px;            top: 0px;            bottom: 0px;            margin: auto;        }    </style>

    <script>        $(function () {            var gallary = $(".gallary");            for (var i = 0; i < 25; i++) {                $('<li><div class="item"></div></li>')                        .find("div")                        .css("background-image", "url(images/" + i + ".jpg)")                        .end()                        .appendTo(gallary)            }        });    </script>

这步大家也可以看到点未点击时的样子了，这里是给body里的ul加上一个center类的绝对居中，让所有的item浮动，script使用的是jQuery的链式方法，好的，继续

demo05--显示大图

<body><input id="btnShowBigPicture" type="button" value="showBigPicture" /> <ul class="gallary center"></ul></body>

<style>ul, li {padding: 0px;margin: 0px;list-style: none;}.gallary {width: 980px;height: 500px;}.item {width: 196px;height: 100px;background-size: cover;float: left;/*position: absolute;left: 0px;top: 0px;*/}.center {position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;margin: auto;}

<script>$(function(){var collum = 5;var gallary = $(".gallary");for (var i = 0; i < 25; i++) {$('<li><div class="item"></div></li>').find("div").css("background-image", "url(images/"+ i +".jpg)").end().appendTo(gallary)}$("#btnShowBigPicture").click(function(){$(".gallary .item").css({"background-image": "url(images/21.jpg)","background-size": "auto"}).each(function(i){var r = parseInt(i / collum);var c = i % collum;var rate = 100 / (collum - 1)var x = rate * c;var y = rate * r;$(this).css("background-position", x + "% "+ y +"%");});});});</script>

这一步，多了一个可点击的按钮，当点击按钮时改变item的图片，以及background-position,首先先将行列求出再取整，此时到达的效果就是会依次改变图片的位置坐标，从而显示出一张大图，好的，下一步

demo06--在不同的时间点隐藏

<body><input id="btnShowBigPicture" type="button" value="showBigPicture" /> <input id="btnHide" type="button" value="hide" /> <ul class="gallary center"></ul></body>

<style>ul, li {padding: 0px;margin: 0px;list-style: none;}.gallary {width: 980px;height: 500px;}.item {width: 196px;height: 100px;background-size: cover;float: left;/*position: absolute;left: 0px;top: 0px;*/}.center {position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;margin: auto;}</style>

<script>$(function(){var collum = 5;var gallary = $(".gallary");for (var i = 0; i < 25; i++) {$('<li><div class="item"></div></li>').find("div").css("background-image", "url(images/"+ i +".jpg)").end().appendTo(gallary)}$("#btnShowBigPicture").click(function(){$(".gallary .item").css({"background-image": "url(images/21.jpg)","background-size": "auto"}).each(function(i){var r = parseInt(i / collum);var c = i % collum;var rate = 100 / (collum - 1)var x = rate * c;var y = rate * r;$(this).css("background-position", x + "% "+ y +"%");});});$("#btnHide").click(function(){//$(".gallary .item").css({"opacity": "0.05"});//$(".gallary .item").animate({"opacity": "0.05"}, 5000, "swing");$(".gallary .item").each(function(i){$(this).animate({"opacity": "0.05"}, Math.random() * 5000, "swing");//$(this).animate({"opacity": "0.05"}, 500*i, "swing");});});});</script>

这一步最重要的就是使用math对象的random()函数，由于隐藏的时间各不相同，造成了逐个消失的效果。

各位看官，写到这里PO主已经要饿死了，待PO主吃饱了再继续更

0 0