一个背景云变换js特效 鼠标移动背景云变化


Posted in Javascript onDecember 28, 2012

提到博客,不能不提到博客园cnblogs.com。绝对是国内非常非常牛逼的博客云集地。可能我关注博客的时间比较短,从2010年才开始,而那里的博主们基本4年以上的博龄了。

在群里有人要个比较个性的企业网站,诗缘妹子就贴了一个网址,我没事也点了看了下,果真不错。下面你就想到了,这个背景云变换js特效我看上眼了。

由于用的一些css3属性,部分低版本的浏览器可是没有效果的哦。

使用方法很简单,直接在你所要实现效果的最底层加入:

<!--parallax--> 
<link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/lhb25/parallax.css"> 
<script type="text/javascript" src="http://files.cnblogs.com/lhb25/parallax.js"></script> 
<script>$(function(){$('#cloud').fhparallax();});</script> 
<div class="cloud_bottom" style="z-index:-999;margin-top:-420px"> 
<div id="cloud" class="parallax_world" data-zoommin="100" data-zoommax="120"> 
<div id="cloud_2" class="parallax_world_class fadeup" data-startx="-200" data-endx="-400" data-startx_ie8="-200" data-endx_ie8="-400" data-starty="100" data-endy="120" data-starty_ie8="100" data-endy_ie8="120" data-startskew="0" data-endskew="0" data-zoomxoffset="-60" data-zoomxendoffset="-60" data-zoomxoffset_ie8="-60" data-zoomxendoffset_ie8="-60"> 
<img src="http://pic002.cnblogs.com/images/2012/36987/2012102412555171.png"> 
</div> 
<div id="cloud_1" class="parallax_world_class fadeup" data-startx="200" data-endx="450" data-startx_ie8="300" data-endx_ie8="500" data-starty="320" data-endy="450" data-starty_ie8="270" data-endy_ie8="400" data-startskew="0" data-endskew="0" data-zoomxoffset="8" data-zoomxendoffset="9" data-zoomxoffset_ie8="8" data-zoomxendoffset_ie8="9"> 
<img src="http://pic002.cnblogs.com/images/2012/36987/2012102413474553.png"> 
</div> 
</div> 
</div> 
<!--PageEndHtml Block End-->
Javascript 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
Nuxt.js实战详解
Jan 18 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
javascript 实现简单的table排序及table操作练习
Dec 28 #Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 #Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 #Javascript
JS声明变量背后的编译原理剖析
Dec 28 #Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 #Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
web性能优化之javascript性能调优
Dec 28 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php实现购物车功能(上)
2020/07/23 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
vue实现购物车案例
2020/05/30 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python连接phoenix的方法示例
2017/09/29 Python
python版大富翁源代码分享
2018/11/19 Python
kali中python版本的切换方法
2019/07/11 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
为什么要用EJB
2014/04/17 面试题
挂牌仪式主持词
2014/03/20 职场文书
会计专业自荐信
2014/06/03 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js