一个背景云变换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的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
js读取本地文件的实例
Dec 22 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 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
全文搜索和替换
2006/10/09 PHP
php Ajax乱码
2008/04/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
jquery ui对话框实例代码
2013/05/10 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
pandas 小数位数 精度的处理方法
2018/06/09 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python自定义时钟类、定时任务类
2021/02/22 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
劳动模范事迹材料
2014/01/19 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
感谢信怎么写
2015/01/21 职场文书
培根随笔读书笔记
2015/07/01 职场文书
《日月潭》教学反思
2016/02/20 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python