Html5添加实用的多层图片视觉差互动特效插件教程

时间：2016-01-07 16:52:58 阅读：275 评论：0 收藏：0 [点我收藏+]

标签：

一、使用方法
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.parallaxmouse.min.js"></script>

二、Html结构
<div id="galaxy">
<img id="star1" src="images/star1.png" class="top left">
<img id="star2" src="images/star2.png" class="top">
<img id="star3" src="images/star3.png" class="">
</div>

三、CSS
#galaxy{
width: 100%;
height: 400px;
max-height: 400px;
position: relative;
background: #2f2f6d;
overflow: hidden;
}

#star1{
position: absolute;
Top : 150px;
left: 200px;
}

#star2{
position: absolute;
Top : 150px;
right: 200px;
}

#star3{
position: absolute;
bottom: 150px;
right: 200px;
}

四、初始化插件
jQuery(window).parallaxmouse({
invert: true,
range: 400,
elms: [
{el: $(’#star1’), rate: 0.2},
{el: $(’#star2’), rate: 0.4},
{el: $(’#star3’), rate: 0.1},
]
});

KeyMob移动端广告平台是常乐网络有限公司于2014年打造专注于为广告主提供精准对移动营销广告进行高效的优化管理。KeyMob移动端广告平台拥有雄厚的技术支持，全方位的专业服务。用最新颖的广告形式来带给广告主最优质的服务！

标签：

踩

(0)

评论一句话评论（0）

key

加入时间：2016-01-05

关注此人发短消息

文章分类

默认分类（277）

“key”关注的人------（0）

“key”的粉丝们------（0）