关闭

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

392人阅读 评论(0) 收藏 举报
分类:

听一个刚开始学习前端的同学分享了一个用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的时候遇到了闭包问题,不会解决,

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11148次
    • 积分:338
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:2篇
    • 译文:1篇
    • 评论:0条
    文章存档