仿别人的效果,很简单的肯定有许多不足,希望指正!!

ding
ding 发布于 2016-12-27 22:30:38 浏览:1810 类型:原创 - 随笔 分类:JavaScript - 看仿 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>看别人仿写</title>
</head>
<style>
	*{margin: 0;padding: 0;}
	ul{width: 100%;list-style: none;}
	ul li{
		overflow: hidden;
		float: left;
		position: relative;
		text-align: center;
		height: 500px;
		cursor: pointer;
               transition: 0.5s;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
 		-o-transition: 0.5s;
		-ms-transition: 0.5s;
	}
	li img{
		display: none;
		position: absolute;
		top:0;
		left:0;
		z-index: 5;
		width: 100%;
		height: 100%;
	}
	li:nth-child(1){
		background-color: red;
	}
	li:nth-child(2){
		background-color: black;
	}
	li:nth-child(3){
		background-color: green;
	}
	li:nth-child(4){
		background-color: yellow;
	}
	li:nth-child(5){
		background-color: #FFEBCD;
	}
	li:nth-child(6){
		background-color: #A757A8;
	}
</style>
<body>
	<ul class="ul-list">
		<li>1
			<img src="http://cdn.attach.qdfuns.com/notes/pics/201612/28/104637u6665o6z1t56ntdh.jpg" alt="">
		</li>
		<li>2<img src="http://cdn.attach.qdfuns.com/notes/pics/201612/28/104637u6665o6z1t56ntdh.jpg" alt=""></li>
		<li>3<img src="http://cdn.attach.qdfuns.com/notes/pics/201612/28/104637u6665o6z1t56ntdh.jpg" alt=""></li>
		<li>4<img src="http://cdn.attach.qdfuns.com/notes/pics/201612/28/104637u6665o6z1t56ntdh.jpg" alt=""></li>
		<li>5<img src="http://cdn.attach.qdfuns.com/notes/pics/201612/28/104637u6665o6z1t56ntdh.jpg" alt=""></li>
		<li>6<img src="http://cdn.attach.qdfuns.com/notes/pics/201612/28/104637u6665o6z1t56ntdh.jpg" alt=""></li>
	</ul>
	<script src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
	<script>
	$(function(){
		(function($){
			var list=$('.ul-list');
			var item=list.children('li');
			var nth=item.length;
			var subw=(100/nth-100/(2*nth)+'%');
			var addw=(100/nth+(nth-1)*(100/(2*nth))+'%');
			item.width((100/nth)+'%');
			item.each(function(){
				$(this).hover(function(i){
					$(this).addClass('on');
					$(this).width(addw);
					$(this).children('img').show();
					item.not(".on").width(subw);
				},function(){
					$(this).removeClass("on");
					$(this).children('img').hide();
					item.width((100/nth)+'%');
				})
			})

		})($)
	})
	</script>
</body>
</html>
仿别人的效果,很简单的肯定有许多不足,希望指正!!
标签:
z
给个赞 15 人点赞
收藏 13 人收藏
评论 已有 6 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
linxin419
linxin4197 天前6F
这个明显可以自己写的,用jquery,动画加点延迟,要不然太僵硬了
举报 支持 (0) 回复 (0)
梅开二度
梅开二度2016-12-30 14:19:535F
动画不是很友好  同僚.   但是也给予鼓励与支持emoticon
举报 支持 (0) 回复 (0)
小菜鸟2017
小菜鸟20172016-12-30 11:55:214F
菜鸟,加油哟,
举报 支持 (0) 回复 (0)
ding
ding2016-12-28 11:02:523F
之前看的是别人纯css写,但感觉css3flex可能兼容性不太好,就自己用jq仿写了个
举报 支持 (0) 回复 (0)
ding
ding2016-12-28 10:28:042F
恩,没加过渡效果谢谢指正 //@探花:你这个手风琴的效果太僵硬了,
举报 支持 (0) 回复 (0)
探花
探花2016-12-28 09:11:061F
你这个手风琴的效果太僵硬了,
举报 支持 (0) 回复 (1)
ding ding 作者

心所向,行所致

作者最新