博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html5添加实用的多层图片视觉差互动特效插件教程
阅读量:5901 次
发布时间:2019-06-19

本文共 922 字,大约阅读时间需要 3 分钟。

hot3.png

一、使用方法

<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移动端广告平台拥有雄厚的技术支持,全方位的专业服务。用最新颖的广告形式来带给广告主最优质的服务!

转载于:https://my.oschina.net/u/2505907/blog/598992

你可能感兴趣的文章
delphi基本语法
查看>>
沙盒目录介绍
查看>>
260. Single Number III
查看>>
Hadoop生态圈-Kafka的完全分布式部署
查看>>
[MODx] Build a CMP (Custom manager page) using MIGX in MODX 2.3 -- 1
查看>>
jQuery自动完成点击html元素
查看>>
[算法]基于分区最近点算法的二维平面
查看>>
webpack多页应用架构系列(七):开发环境、生产环境傻傻分不清楚?
查看>>
笨办法学C 练习1:启用编译器
查看>>
树的总结--树的性质(树的深度) leetcode
查看>>
nagios短信报警(飞信fetion20080522004-linrh4)
查看>>
【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!...
查看>>
linux 将大文件分成小文件
查看>>
CCNA- 距离矢量路由协议学习
查看>>
企业实践用户邮箱导入/导出(第2部分)
查看>>
如何学习Linux命令-初级篇
查看>>
从Oracle Public Yum为Oracle Linux建立本地的Yum源
查看>>
在 SELECT 查询中使用表表达式
查看>>
静态路由和默认路由
查看>>
关于阿里开发者招聘节 |这5道笔试真题 你会吗!???
查看>>