一个背景云变换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 应用技巧集合[推荐]
Aug 30 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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引用传值实例详解学习
2013/11/06 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
将python代码和注释分离的方法
2018/04/21 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
简述数组与指针的区别
2014/01/02 面试题
书法培训心得体会
2014/01/05 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
《争吵》教学反思
2014/02/15 职场文书
大学生活自我评价
2014/04/09 职场文书
学生请假条格式
2014/04/11 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
新年寄语2016
2015/08/17 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技