一个背景云变换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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 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
一个ftp类(ini.php)
2006/10/09 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
详解php的socket通信
2015/08/11 PHP
php强制下载文件函数
2016/08/24 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP常用的三种设计模式
2017/02/17 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
如何利用Python写个坦克大战
2020/11/18 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
成人继续教育实施方案
2014/03/01 职场文书
核心价值观演讲稿
2014/05/13 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android