一个背景云变换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 相关文章推荐
javascript引导程序
Oct 26 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
webpack3之loader全解析
Oct 26 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
我的论坛源代码(九)
2006/10/09 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP模板解析类实例
2015/07/09 PHP
php短信接口代码
2016/05/13 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
python开发之for循环操作实例详解
2015/11/12 Python
python占位符输入方式实例
2019/05/27 Python
python框架flask表单实现详解
2019/11/04 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
EJB的激活机制
2013/10/25 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
标准毕业生自荐信
2014/06/24 职场文书
森林防火宣传标语
2014/06/27 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书