一个背景云变换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 一个函数对同一元素的多个事件响应
Jul 25 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
javascript字符串函数汇总
Dec 06 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
vue-cli常用设置总结
Feb 24 Javascript
小程序实现五星点评效果
Nov 03 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 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文件上传实例详解!!!
2007/01/02 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
几种响应式文字详解
2017/05/19 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
vue实现购物车加减
2020/05/30 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python解析yaml文件过程详解
2019/08/30 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
结对共建工作方案
2014/06/02 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python