首页 > 代码库 > 炎炎夏日,走入美妙的前端设计案例
炎炎夏日,走入美妙的前端设计案例
1、 嘎嘎夏天到了！最近同事分享我一个案例，说这效果不错，看看我能不能实现
( 鄙人后台程序员,热爱前端,前端是女人的外貌; 后台是女人的内涵)
我们先从外貌说起，看原始案例的效果
外貌看起来 很简洁，主题很明确，效果也很流畅，还算比较炫吧,我一下就喜欢她了！
刚开始我以为她的内涵可能是css3居多，其实不然是css居多
/-----------------------------------骚骚的分割线---------------------------------------/
2、我的实现
--布局：5个对象绝对定位、改变每个对象的left和top值，对象有大有小(用css3 缩放来对图片进行缩放)，
而且每个图片的间距有对称，分析图如下：
具体代码如下：
1 <style type="text/css"> 2 * 3 { 4 margin: 0; 5 padding: 0; 6 } 7 #wrap 8 { 9 border: 1px solid red;10 position: relative;11 width: 90%;12 padding: 5%;13 }14 15 #list16 {17 list-style: none;18 position: absolute;19 }20 #list li21 {22 /*23 -webkit-transition: all 0.6s ease;*/24 position: absolute;25 }26 27 #list li:nth-of-type(5)28 {29 -webkit-transform: scale(1);30 transform: scale(1);31 left: 120px;32 top: 100px;33 z-index: 5;34 }35 /*-----1、3----*/36 #list li:nth-of-type(1)37 {38 -webkit-transform: scale(0.8);39 transform: scale(0.8);40 left: 30px;41 top: 80px;42 z-index: 4;43 }44 #list li:nth-of-type(4)45 {46 -webkit-transform: scale(0.8);47 transform: scale(0.8);48 left: 210px;49 top: 70px;50 z-index: 3;51 }52 /*----4、5----*/53 #list li:nth-of-type(2)54 {55 -webkit-transform: scale(0.65);56 transform: scale(0.65);57 left: 80px;58 top: 40px;59 z-index: 2;60 }61 #list li:nth-of-type(3)62 {63 -webkit-transform: scale(0.65);64 transform: scale(0.65);65 left: 160px;66 top: 40px;67 z-index: 1;68 }69 </style>70 </head>71 <body style="background: #abcdef;">72 <div id="prev" style="background: #abcdef; width: 20px; height: 20px; border: 1px solid red;73 position: absolute; left: 100px; top: 250px; cursor: pointer;">74 <<75 </div>76 <div id="next" style="background: #abcdef; width: 20px; height: 20px; border: 1px solid red;77 position: absolute; left: 200px; top: 250px; cursor: pointer;">78 >>79 </div>80 <div class="wrap">81 <ul id="list">82 <li>83 <img src="hzp/pro1.png" /></li>84 <li>85 <img src="hzp/pro2.png" /></li>86 <li>87 <img src="hzp/pro3.png" /></li>88 <li>89 <img src="hzp/pro4.png" /></li>90 <li>91 <img src="hzp/pro5.png" /></li>92 </ul>93 </div>94 </body>
--js实现动态效果，先来看一张我的分析图
完整的js代码：
---------------------------------------------------
1 <script type="text/javascript"> 2 3 window.onload = function () { 4 5 6 var list = document.getElementById("list"); 7 var aLis = list.getElementsByTagName("li"); 8 var arr = []; 9 10 $("li").each(function (k, v) {11 arr[k] = { left: getStyle(this, "left"), top: getStyle(this, "top"), scale: getStyle(this, "-webkit-transform"), zIndex: getStyle(this, "z-index") };12 });13 14 function getStyle(obj, attr) {15 if (obj.currentStyle) {16 return obj.currentStyle[attr];17 }18 return getComputedStyle(obj)[attr];19 }20 21 $("#prev").click(function () {22 arr.push(arr.shift()); //prev23 //左边 24 toExchage();25 26 })27 28 $("#next").click(function () { 29 arr.unshift(arr.pop()); //next30 toExchage();31 })32 33 //#region 获取变换后的对象34 function toExchage() {35 36 $("li").each(function (k, v) {37 38 /*39 this.style.left = arr[k].left;40 this.style.top = arr[k].top;41 this.style.WebkitTransform = arr[k].scale;42 this.style.zIndex = arr[k].zIndex;43 */44 45 var params = {46 "left": arr[k].left,47 "top": arr[k].top,48 "z-index": arr[k].zIndex49 }50 51 $(this).stop(true).animate(params, 200, ‘linear‘, function () {52 $(this).css({ "-webkit-transform": arr[k].scale, "transform": arr[k].scale });53 });54 55 });56 57 }58 //#endregion59 60 }61 </script>
写完之后 我感概万分：于是乎 我挥笔写下了如下说说，遭一群逗比挖苦不堪
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。