前阵子总监要说做一个邀请函 效果 鼠标拖拽进行浏览

它用的是Adobe edge软件生成的，代码量过大，冗余太多。

再加上我也没学过这个软件怎么使用，增加学习成本影响项目进度。

 

于是就自己写了个简单的。鼠标移动到右下角窗口滚动看效果→

不过是单体的 没有使用多个图片分频运动 ，当然如果项目需要的话，改起来也不费劲，比上面的要简单许多。

使用方法在下方：

#bg{
            position:fixed;        width: 100%;        height: 200%;        background: url(images/bg.jpg);        background-size:100% 100%;    }    #wrap{
            width: 100%;        height: 100%;    }    #wrap > div{
            position:absolute;        left:20%;        top:30%;    }    .img1 ~ div{
            opacity:0;    }    .rotate{
            -webkit-transition: -webkit-transform 500s linear;        -moz-transition:    -moz-transform 500s linear;        -o-transition:      -o-transform 500s linear;        transition:         transform 500s linear;    }

css设置bg想要的背景url

JS就不贴了 有兴趣读源码的就下载去看吧 上方的DEMO也可以看的到。

如果想要手机触发的话给鼠标滚轮改成 触屏事件就好了。

#wrap子元素的DIV有多少张图片就依次的 class="img+图片数";

附件下载：

 谢谢。

 

作者：Margo_test

出处：