一个背景云变换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 操作Word和Excel的实现代码
Oct 26 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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与C#分别格式化文件大小的代码
2011/05/14 PHP
php批量上传的实现代码
2013/06/09 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php上传大文件设置方法
2016/04/14 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
JsDom 编程小结
2011/08/09 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
JQuery实现定时刷新功能代码
2017/05/09 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
详解Python字符串切片
2019/05/20 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
司机的工作范围及职责
2013/11/13 职场文书
直接有效的自我评价
2014/01/11 职场文书
12岁生日感言
2014/01/21 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
小学班主任研修日志
2015/11/13 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis