一个背景云变换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 相关文章推荐
批量实现面向对象的实例代码
Jul 01 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
js实现div色块碰撞
Jan 16 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
php cc攻击代码与防范方法
2012/10/18 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
package.json文件配置详解
2017/06/15 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Numpy掩码式数组详解
2018/04/17 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python os模块简单应用示例
2019/05/23 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
保送生自荐信范文
2013/10/06 职场文书
好听的队名和口号
2014/06/09 职场文书
工作总结与自我评价
2014/09/18 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
环境卫生标语
2015/08/03 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js