一个背景云变换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模板实现方法
Apr 27 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
浅谈克隆 JavaScript
Nov 02 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 header示例代码(推荐)
2010/09/08 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python help()函数用法详解
2014/03/11 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
用Python shell简化开发
2018/08/08 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python 函数中的参数类型
2020/02/11 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
C语言面试题
2013/05/19 面试题
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
护士实习自我鉴定
2013/10/22 职场文书
原材料检验岗位职责
2014/03/15 职场文书
事业单位鉴定材料
2014/05/25 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
《打电话》教学反思
2016/02/22 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript