专栏首页我分享我快乐一个简单的图片列表动效

一个简单的图片列表动效

<!doctype html>

<html>

<head>

<script src="jquery.js"></script>

<script>

$(document).ready(function(e) {

var h=$(".list span").width()

$(".list span").css("height",h)

$(".list span").css("line-height",h+"px")

$(window).resize(

function(){

h=$(".list span").width()

$(".list span").css("height",h)

$(".list span").css("line-height",h+"px")

}

)

$(".list").css({opacity:0})

$(".btn").toggle(

function(){

$(".btn span:eq(0)").addClass("btn_1")

$(".btn span:eq(1)").addClass("btn_2")

$(".bg img").animate({opacity:0.3})

$(".list").animate({opacity:1})

},function(){

$(".btn span:eq(0)").removeClass("btn_1").addClass("btn_1_c")

$(".btn span:eq(1)").removeClass("btn_2").addClass("btn_2_c")

setTimeout(function(){

$(".btn span").removeClass()

},300)

$(".bg img").animate({opacity:1})

$(".list").animate({opacity:0})

}

)

});

</script>

<style>

*{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}

img{display:block;}

html,body{height:100%;}

body{margin:0;background-color:black;}

.btn{position:absolute;background-color:#F66;width:20px;height:20px;padding:10px;cursor:pointer;right:0;top:0;z-index:2;}

.btn span{position:absolute;width:20px;height:4px;background-color:white;top:50%;margin-top:-2px;}

@-webkit-keyframes btn_1{

from{-webkit-transform:rotate(90deg);}

to{-webkit-transform:rotate(135deg);}

}

@-webkit-keyframes btn_2{

from{-webkit-transform:rotate(0);}

to{-webkit-transform:rotate(45deg);}

}

@-webkit-keyframes btn_1_c{

from{-webkit-transform:rotate(135deg);}

to{-webkit-transform:rotate(90deg);}

}

@-webkit-keyframes btn_2_c{

from{-webkit-transform:rotate(45deg);}

to{-webkit-transform:rotate(0);}

}

.btn span:nth-child(1){-webkit-transform:rotate(90deg);}

.btn_1{-webkit-animation:btn_1 .3s forwards;}

.btn_2{-webkit-animation:btn_2 .3s forwards;}

.btn_1_c{-webkit-animation:btn_1_c .3s forwards;}

.btn_2_c{-webkit-animation:btn_2_c .3s forwards;}

.bg{overflow:hidden;height:100%;}

.bg img{width:260%;margin-left:-100%;}

.list_box{width:100%;position:fixed;left:0;top:0;z-index:1;}

.list{padding:10px;}

.list div{float:left;}

@media (max-width:1920px){.list div{width:20%;}.bg img{width:140%;margin-left:0;margin-top:-100px;}}

@media (max-width:1000px){.list div{width:25%;}.bg img{width:260%;margin-left:-100%;margin-top:-100px;}}

@media (max-width:640px){.list div{width:33.3%;}.bg img{width:300%;margin-left:-100%;margin-top:0;}}

.list div span{display:block;background-color:gray;margin:10px;text-align:center;color:rgba(255,255,255,0.4);}

</style>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<div class="bg">

<div class="list_box">

<div class="list">

<div>

<span style="background:#666;">IMAGE</span>

</div>

<div>

<span style="background:#696;">IMAGE</span>

</div>

<div>

<span style="background:#093">IMAGE</span>

</div>

<div>

<span style="background:#33F;">IMAGE</span>

</div>

<div>

<span style="background:#9C3;">IMAGE</span>

</div>

<div>

<span style="background:#F90;">IMAGE</span>

</div>

<div>

<span style="background:#3CC">IMAGE</span>

</div>

<div>

<span style="background:#C69;">IMAGE</span>

</div>

<div>

<span style="background:#F63;">IMAGE</span>

</div>

</div>

</div>

<img src="img/bg.jpg">

</div>

<div class="btn">

<span></span>

<span></span>

</div>

</body>

</html>

本文分享自微信公众号 - 我分享我快乐(duan_uid),作者:段惠勇

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery中使用event.stopPropagation()阻止事件冒泡

    案例如上图:点文档关闭菜单,点按钮打开菜单。因为按钮在文档内,所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下: ...

    用户1730674
  • 什么!要用毛笔字效果!不会啊?也不能字体侵权!

    前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

    用户1730674
  • 如今,企业更需要行业化的设计师

    互联网+时代,网站建设已经成为企业的标配。近年来,互联网金融强势升温,传统金融行业也开始逐渐推出线上服务,注重企业的网络营销推广。

    用户1730674
  • 详解 equals() 方法和 hashCode() 方法

    Java的基类Object提供了一些方法,其中equals()方法用于判断两个对象是否相等,hashCode()方法用于计算对象的哈希码。equals()和ha...

    用户1257393
  • C#仪器数据文件解析-Excel文件(xls、xlsx)

    不少仪器工作站可以将数据导出为Excel文件,包括97-2003版本的xls文件和2007+的xlsx文件。 采集Excel文件相比采集pdf文件更容易、程序更...

    用户1637609
  • 详解equals()方法和hashCode()方法

    Java的基类Object提供了一些方法,其中equals()方法用于判断两个对象是否相等,hashCode()方法用于计算对象的哈希码。equals()和ha...

    wuweixiang
  • Google AI发数据集论文、办挑战赛却拒绝开放数据集?结果被怼了……

    谷歌曾在 ACL 2018 上发表了一篇数据集论文《Conceptual Captions: A Cleaned, Hypernymed, Image Alt-...

    机器之心
  • 给CVPR颁“金酸莓奖”,知乎网友热议最差论文,战火烧到Reddit论坛

    今年CVPR共有1200多篇论文被接收,官方评出了最佳论文,民间则评出了最差论文。

    量子位
  • Windows系统下hosts文件工作原理(转)

    hosts 首先说明下, hosts文件没有后缀 一. Hosts文件的位置 很多用户都知道在Window系统中有个Hosts文件(没有后缀名),在Wind...

    Dar_Alpha
  • list、dict和set的综合应用:排课系统(2)

    上回说到,我们主要实现了排课系统的后台数据的定义以及每个数据对象之间的关系,这一次我们就来批量增加一些数据,为了给后面的排课算法进行测试。

    不可言诉的深渊

扫码关注云+社区

领取腾讯云代金券