小魏的前端开发学习之路

学习半年前端后开始总结学习的心得及以后的经验

求教,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].onmouseover= function () {
                this.style.transform="rotate(0deg)"+''+"scale(1.3)";
            };
            imgs[i].onmouseout= 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的时候遇到了闭包问题,不会解决,

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


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_30975247/article/details/49895021
个人分类: Javascript HTML CSS
上一篇编码规范
下一篇css3的cal()功能初现
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭