【分享】JS图片滑动渐显渐隐插件-附使用方法。

 

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

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

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

 

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

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

使用方法在下方:

    #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;
    }
<div id="bg"></div><!--背景ID-->
<div id="wrap"><!--主体和背景分离 div class必须以img+数字形式依次向下-->
        <div class="img1"><img src="images/shou.png" width="100%" class="rotate" /></div>
        <div class="img2"><img src="images/map.jpg" width="100%" /></div>
        <div class="img3"><img src="images/U.png" width="100%" /></div>
        <div class="img4"><img src="images/keji_06.png" width="100%" /></div>
</div> 

css设置bg想要的背景url

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

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

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

附件下载:点击这里

 谢谢。

 

作者:Margo_test
出处:http://www.cnblogs.com/margo/

【分享】JS图片滑动渐显渐隐插件-附使用方法。,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。