首页 > 代码库 > 【分享】JS图片滑动渐显渐隐插件-附使用方法。
【分享】JS图片滑动渐显渐隐插件-附使用方法。
<style></style>
前阵子总监要说做一个邀请函 效果 点击这里 鼠标拖拽进行浏览
它用的是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/
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。