Home » Code » 简易图片墙

简易图片墙

点击还会放大^.^

点击还会放大^.^

查看demo

应用CSS3的transition过度和transform变换,当然,点击放大还是得写一些js。css3新增的这些效果很好用,只是老浏览器不支持,许多人又不升级自己的浏览器,因此开发者都比较谨慎。

技术要点:

  • transition:设置过度效果。在原对象上不指定属性,对所有要变化的属性都有效。
  • transform:设置变换效果,包括偏移、旋转、缩放等等。

html结构只需要一个div内放img即可,注意默认这里img会有间隔,设置margin/padding/border之类是没法消除的,最简单的方法是在img的父元素div上设置font-size: 0,或者html里面写的img标签不要有换行,各img标签紧挨着写,这样明显看着蛋疼。

<h2>简易图片墙</h2>
<div class="wall">
	<img src="images/1.jpg">
	<img src="images/2.jpg">
	<img src="images/3.jpg">
	<img src="images/4.jpg">
	<img src="images/5.jpg">
	<img src="images/6.jpg">
	<img src="images/7.jpg">
	<img src="images/8.jpg">
</div>

css样式

img {
	width: 200px;
	padding: 10px 10px 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	box-sizing: border-box;
	transition: 0.5s;
	z-index: 1;
	position: absolute;
	cursor: pointer;
}
img:hover {
	transform: rotate(0deg) scale(1.5) !important;
	box-shadow: 5px 5px 15px #ccc;
	z-index: 2;
}
.wall {
	width: 800px;
	height: 292px;
	font-size: 0; /*消除img之间的间隔*/
	margin: 60px auto;
	position: relative;
}

javascript初始化旋转角度绑定点击放大

window.onload = function(){
	var images = document.getElementsByTagName('img');
	var length = images.length;
	var j = 0;
	for(var i=0; i<length; i++ ){
		var d = i%4;
		images[i]._x = d;
		images[i]._y = j;
		if(d == 3){
			j++;
		}
	}

	for( var i=0; i<length; i++){
		images[i].style.left = (images[i]._x)*200 + 'px';
		images[i].style.top = (images[i]._y)*146 + 'px';
		images[i].style.transform = 'rotate(' + (Math.floor(Math.random()*90+1)-45) + 'deg)';
		images[i].onclick = function(ev){
			this.style.left = "50%";
			this.style.top = "50%";
			this.style.marginTop = "-146px";
			this.style.marginLeft = "-300px";
			this.style.width = "600px";
		}
		images[i].onmouseout = function(ev){
			this.style.left = (this._x)*200 + 'px';
			this.style.top = (this._y)*146 + 'px';
			this.style.marginTop = "0";
			this.style.marginLeft = "0";
			this.style.width = "200px";
		}

	}	

}

嗯,很多数值都是写死了,其实也想写得比较通用一些,但,前路漫漫。。。。。。

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.