顶部导航开始 -->

js实现图片放大特效

<!DOCTYPE html>
<html>
<head>
	<title>H5模板网 http://www.h5tpl.com</title>
	<style type="text/css">
		body{
			background-color: #d8e7fa;
		}
		ul{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.itemarea{
			width: 280px;
			height: 480px;
			border: 1px #888 solid;
			margin: 100px auto;
			position: relative;
			box-shadow: 2px 1px 1px 1px rgba(0,0,0,0.3);
		}
		.itemarea .pic{
			margin-bottom: 15px;
		}
		.itemarea .pic img{
			width: 280px;
			height: 400px;
		}
		.itemarea .pic .cover{
			width: 107px;
			height: 153px;
			position: absolute;
			top: 0px;
			left: 0;
			background-image: url('a.png');
		}
		.itemarea .list{
			display: flex;

		}
		.itemarea .list li{
			margin: auto;
		}
		.itemarea .list img{
			width: 30px;
			height: 50px;
			display: block;
		}
		.itemarea .list .current{
			border: 2px solid yellow;
		}
		.itemarea .detail{
			width: 300px;
			height: 400px;
			border: 1px #888 solid;
			position: absolute;
			top: -1px;
			left: 280px;
		/*	display: none;*/
			background-image: url(1.jpg);
			background-size: 260%;
		}
	</style>
</head>
<body>
	<div class="itemarea">
		<div class="pic">
			<img src="1.jpg">
			<div class="cover"></div>
		</div>
		
		<ul class="list">
			<li ><img src="1.jpg" class="current"></li>
			<li><img src="2.jpg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpg"></li>
			<li><img src="5.jpg"></li>
			<li><img src="6.jpg"></li>
		</ul>
		<div class="detail">

		</div>
	</div>
</body>
<script type="text/javascript">
	var list = document.querySelector('.list');
	var imgs = list.querySelectorAll('img');
	var img = document.querySelector('.pic img');
	var pic = document.querySelector('.itemarea .pic');
	var cover = document.querySelector('.cover');
	var detail = document.querySelector('.detail');

	list.addEventListener('mousemove',function(e){
		if(e.target.tagName == 'IMG'){
			img.src = e.target.src;
			detail.style.backgroundImage = 'url('+e.target.src+')';
			imgs.forEach(function(item){
				item.className = '';
			})
			e.target.className = 'current';
		}
	})

	pic.addEventListener('mousemove',function(e){
		var x = e.clientX;
		var y = e.clientY;
		var cx = pic.getBoundingClientRect().left;
		var cy = pic.getBoundingClientRect().top;
		var tx = x - cx -75;
		var ty = y - cy -107;
		
		if(tx<0){
			tx = 0;
		}
		if(ty<0){
			ty = 0;
		}
		if(tx>180){
			tx = 180;
		}
		if(ty>245){
			ty = 245;
		}
		detail.style.backgroundPosition = tx/180*100+'%'+ty/245*100+'%';
		cover.style.left = tx + 'px';
		cover.style.top = ty + 'px';
	})
</script>


自学php博客
请先登陆后发表评论
  • 最新评论
  • 总共0条评论
  • © 2014-2016 zixuephp.cn 版权所有
  • ICP证:皖ICP备16012107号
  • 联系邮箱:510082587@qq.com
  • 交流请加微信:weibobf2899 或扫下方二维码