一个背景云变换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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
js中replace的用法总结
Dec 27 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 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通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP 图片处理
2020/09/16 PHP
用ADODB.Stream转换
2007/01/22 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
JSONP基础知识详解
2017/03/19 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
python中随机函数random用法实例
2015/04/30 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
美德少年事迹材料
2014/01/23 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
团代会主持词
2014/04/02 职场文书
项目采购员岗位职责
2014/04/15 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
酒桌上的开场白
2015/06/01 职场文书