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

原创 2015年11月17日 23:07:57

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

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3实现绚丽照片墙

css3实现绚丽照片墙这里主要给大家介绍几个css3比较绚这里写代码片丽和实用的动画属性,其中包括旋转、缩放等。课程实现的照片墙特效内容为:照片随意的摆放在页面的不同位置,并且都有不同角度的倾斜和相互...

CSS3实现绚丽照片墙

关键技术点:* box-shadow * 给元素的边框增加阴影的效果 * box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]* ...

HTML5+CSS3实战(二)——照片墙效果

现在的前端做的越来越炫酷了,各种特效让人眼花缭乱。 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看。 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大; 鼠...

css3-3D透明照片墙

1.准备n张照片div放入照片,在同一个父级容器下设置父类的transform-style:preserve-3d和persepective六个div设置成绝对定位,重叠在一起2.子元素做简单的变换,...

CSS3制作的照片墙

图片自己弄html 代码: photowall <div class="

css3照片墙

无标题文档 #container{ position:relative; width:960px; height:800px; margin:80px auto; ...

css3实现照片墙

在网站上经常可以看到照片墙的展示,于是动手用css3写了一个简单的照片墙。其实就是css3样式的一些新特效的使用。 作品展示: 接下来贴上实现的代码: html结构: ...

33个jQuery与CSS3实现的绚丽鼠标悬停效果

只要你有创意,完全可以使用CSS3来实现漂亮的动效,当然如果配合jQuery,这样会更加强大,实现更多高级绚丽的动画效果。鼠标hover效果是很常用的,虽然很细微的东西,但网站的细节注定的网站的体验,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)