WEB前端开发人员交流社区

搜索
查看: 811|回复: 0

[HTML] 图层跟随鼠标移动特效

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-1-29 17:27:26 | 显示全部楼层 |阅读模式
[HTML] 纯文本查看 复制代码
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
@charset "utf-8";
* {
	margin:0;
	padding:0;
}
a, img {
	border:0;
}
ul, li {
	list-style:none;
}
body {
	background:#eee;
}
.jq22 {
	width:490px;
	margin:30px auto;
}
.box {
	float:left;
	width:100px;
	height:100px;
	border:1px solid white;
	background:#EEE;
	margin:10px;
	position:relative;
	display:inline;
}
.boxBor {
	position:absolute;
	left:0;
	top:0;
	display:none;
	border:1px solid white;
	z-index:4;
	background:#fff;
	background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
	background:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
	background:-o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
	background:-ms-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="boxBor" deta-switch="true" style="width: 100px; height: 100px; left:465px; top:40px; opacity: 0; display: block; overflow: hidden;"></div>
<div class="jq22">
	<div class="box"><img width="100" height="100" src="http://www.qqtouxiang888.com/uploads/allimg/100818/1QI52H0-13.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://www.soideas.cn/uploads/allimg/110630/211Q351G-8.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://images.ccoo.cn/bar/2009823/200982312201590s.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://img.funshion.com/attachment/upload/head/4c/35/ea/31343442_b.jpg?1374996147" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://www.qqtouxiang888.com/uploads/allimg/100818/1QI52H0-13.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://images.ccoo.cn/bar/2009823/200982312201590s.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://img.funshion.com/attachment/upload/head/4c/35/ea/31343442_b.jpg?1374996147" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://www.soideas.cn/uploads/allimg/110630/211Q351G-8.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://images.ccoo.cn/bar/2009823/200982312201590s.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://img.funshion.com/attachment/upload/head/4c/35/ea/31343442_b.jpg?1374996147" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://www.qqtouxiang888.com/uploads/allimg/100818/1QI52H0-13.jpg" alt=""></div>
	<div class="box"><img width="100" height="100" src="http://www.soideas.cn/uploads/allimg/110630/211Q351G-8.jpg" alt=""></div>
</div>
<script type="text/javascript">
$(function(){
	$('.box').bind('mouseover',function(){
		var oPosition=$(this).position();
		var oThis=$(this);		
		$(".boxBor").stop(false,false).animate({
			opacity:0.8,
			left:oPosition.left+10,
			top:oPosition.top+10,
			width:oThis.width(),
			height:oThis.height()
		},250)
	});
})
</script>
</body>
</html>

WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-11-26 23:57

快速回复 返回顶部 返回列表