一个背景云变换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 24 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 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学习笔记之面向对象
2014/11/08 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
总结一些js自定义的函数
2006/08/05 Javascript
json 实例详细说明教程
2009/10/31 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
react redux入门示例
2018/04/19 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
不要用强制方法杀掉python线程
2017/02/26 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
党员个人对照检查材料思想汇报
2014/09/16 职场文书
医院病假条怎么写
2015/08/17 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技