求教,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的时候遇到了闭包问题,不会解决,

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


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

three.js--如何给一个场景贴图

var skyBoxGeometry = new THREE.BoxGeometry( 5000, 5000, 5000 );     var texture = new THREE.Text...

JS特效

1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后,产生该文件Onchange:当文字值改变时,产生该事件Onselect:当文字加亮后,产生该文件(value...
  • wizfly
  • wizfly
  • 2007年01月25日 13:31
  • 718

完美图片蒙太奇的JS效果基于JQuery实现(多个大小不同图片拼接成图片墙)

完美图片蒙太奇的JS效果基于JQuery实现(多个大小不同图片拼接成图片墙),比百度和Bing的图片搜索拼接效果还强,完美。...

js+flash+xml实现3D照片墙特效

此js特效是一款由flash+xml实现3D照片墙,效果非常炫,可以上下左右4个方向旋转,带分页,有声音,点击图片可以放大,可以查看详细介绍与链接,由于资源图片比较多,为了方便演示,所有的图片只用一张...

Css3+javascript实现“唯美”照片墙

贴上优酷超清 地址:http://v.youku.com/v_show/id_XOTYxMzc4NzE2.html?from=y1.7-1.2

react-webpack 照片墙制作(二)

接着一的内容,我们继续。之前准备工作以及舞台数据等都准备好了。 接下来,先对单个图片的布局样式设置好,在src/components的main.js里添加如下代码//单个图片组件 class Img...

css3实现绚丽照片墙

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

CSS3实现绚丽照片墙

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

CSS3+HTML+纯JS实现的照片墙效果

  • 2015年10月12日 16:21
  • 11.46MB
  • 下载

css3照片墙

无标题文档 #container{ position:relative; width:960px; height:800px; margin:80px au...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:求教,CSS3绚丽照片墙JS代码及其中遇到的问题
举报原因:
原因补充:

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