求教，CSS3绚丽照片墙JS代码及其中遇到的问题

本文主要是介绍求教，CSS3绚丽照片墙JS代码及其中遇到的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

听一个刚开始学习前端的同学分享了一个用CSS3做照片墙的案例

参见http://www.imooc.com/comment/227

他认为其中教学的老师在css中大量使用重复代码为每一个图片分配属性值太累，急切想知道怎么能用其他办法实现

为了让他帮他解决这个问题，写了一段JS代码：

 function ranPic(){var imgs=document.getElementsByTagName("img");for(var i=0;i<imgs.length;i++){imgs[i].style.left=Math.random()*1100-400+"px";imgs[i].style.top=Math.random()*500+"px";var ranRotate=Math.random()*50-25;imgs[i].style.transform="rotate("+ranRotate+"deg)";imgs[i].οnmοuseοver= function () {this.style.transform="rotate(0deg)"+''+"scale(1.3)";};imgs[i].οnmοuseοut= function () {var ranRotate=Math.random()*50-25;this.style.transform="rotate("+ranRotate+"deg)";}}}

调用该函数来实现图片的随机分布和触发鼠标事件

下面是原css代码：

body{background-color: #eeeeee;
}
h1{text-align: center;}
.container{width: 960px;height: 450px;margin: 60px auto;position: relative;
}
img{width: 400px;height: 300px;;padding:10px 10px 15px;background: #ffffff;border: 1px solid #dddddd;position: absolute;/*transform: rotate(25deg);*//*-webkit-transform: rotate(25deg);*//*-ms-transform: rotate(25deg);*//*-moz-transform: rotate(25deg);*/transition: 1s;-webkit-transition: 1s;-moz-transition: 1s;
}
img:hover{transform: rotate(0deg) scale(1.3);-webkit-transform: rotate(0deg) scale(1.3);-ms-transform: rotate(0deg) scale(1.3);-moz-transform: rotate(0deg) scale(1.3);box-shadow: -10px 10px 15px #ccc;z-index: 2;
}

可惜我作为一个初学者，在写完JS后半段，调用鼠标事件前，遇到了两个难点，希望有人能与我分享讨论一下解决思路：

1.img:hover中transform失效，不得已操作DOM调用鼠标事件来激发transform属性，请教此处应该如何解决？

2.使用onmouseover事件后，图片无法在鼠标离开后还原，所以才用到onmouseout事件，但是在这个事件中调用变量ranRotate的时候遇到了闭包问题，不会解决，

只能在事件函数中重新生成一次变量，导致鼠标离开后还原的角度与之前不同，求教，谢谢分享

这篇关于求教，CSS3绚丽照片墙JS代码及其中遇到的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---