一个背景云变换js特效 鼠标移动背景云变化

提到博客，不能不提到博客园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-->

赞 (0)

相关推荐

  • js导航栏单击事件背景变换示例代码

    如下所示; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

  • javascript背景颜色按时变换

    <head> </head> <body onload="setcolor()" > <div id=mydiv style="font:12px sans-serif;width:300px;height:200px;">背景色测试</div> <script> function setcolor() { var colorString; do{ colorString="#&quo

  • 用javascript实现li 列表数据隔行变换背景颜色

    New Document title 111 222 333 444 555 666 objName=document.getElementById("list01").getElementsByTagName("li") for (i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Jquery刷新页面背景图片随机变换的实现方法

    使用方法:下载jquery-1.9.1.js,然后设置CSS,图片文件放在images/new_feed/目录下,图片命名格式为bg_x.jpg,修改随机数产生范围 一.CSS代码 复制代码 代码如下: <style> body{                padding:0;                background-attachment: fixed;                background-clip: border-box;                bac

  • 响应鼠标变换表格背景或者颜色的代码

    1.是图片 一般就是准备两张图片 当鼠标放上去即显示另外一张图片<table width="100" border="0" cellspacing="0" cellpadding="0" onmouseover=javascript:this.background='images/jb51-1.jpg' onmouseout=background='images/jb51-2.jpg'> 2.变换颜色如下所写,这个

  • JS代码实现根据时间变换页面背景效果

    1.概述 有些时侯为了丰富页面的显示效果,将页面制作成根据时间变换页面背景的样式,这样会使浏览者对此网站不会感觉厌倦,同时也会觉得网站制作的非常新颖.本实例通过Date对象的getHours()方法获得当前系统时间的小时,然后根据不同的时间段来改变页面的背景图片. 2.技术要点 主要使用JavaScript中的Date对象的getHours()方法得到当前系统时间的小时,然后在一定的时间段内判断当前小时是否符合指定的时间段,如果符合则使用document对象的write()方法在页面中显示一幅图

  • asp下制做行背景颜色交替变换的表格

    <% Const adInteger = 3 Const adVarChar = 200  ' 声明变量 Dim myRecordset  Dim iLetter      Dim Field        Dim strAltColor  Dim bColor       bColor = False ' 此例利用内存中的recordset,你需要做的只是修改你的数据显示的部分就可以了. Set myRecordset = Server.CreateObject("ADODB.Recor

  • 一个背景云变换js特效 鼠标移动背景云变化

    提到博客,不能不提到博客园cnblogs.com.绝对是国内非常非常牛逼的博客云集地.可能我关注博客的时间比较短,从2010年才开始,而那里的博主们基本4年以上的博龄了. 在群里有人要个比较个性的企业网站,诗缘妹子就贴了一个网址,我没事也点了看了下,果真不错.下面你就想到了,这个背景云变换js特效我看上眼了. 由于用的一些css3属性,部分低版本的浏览器可是没有效果的哦. 使用方法很简单,直接在你所要实现效果的最底层加入: 复制代码 代码如下: <!--parallax--> <link

  • js根据鼠标移动速度背景图片自动旋转的方法

    本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • js随机生成网页背景颜色的方法

    本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- color=new A

  • JS实现鼠标滑过链接改变网页背景颜色的方法

    JS实现鼠标滑过链接改变网页背景颜色的方法

    本文实例讲述了JS实现鼠标滑过链接改变网页背景颜色的方法.分享给大家供大家参考,具体如下: 这个小特效很不错,用链接改变网页背景色,鼠标放上链接文字上,网页背景就会跟着变换,想让你的主页更个性一点的朋友,这个代码一定能用上,其实你可在此基础上修改一下代码,改成鼠标放上文字切换样式表,这样整个网页就变了风格,是不是很实用? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-over-link-cha-bgcolor-demo/ 具体

  • 原生JS实现鼠标滑动撒爱心特效

    原生JS实现鼠标滑动撒爱心特效

    本文实例为大家分享了一个鼠标滑动撒爱心的js特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • js实现鼠标移到链接文字弹出一个提示层的方法

    本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

  • JS实现鼠标箭头变成一个燃烧烛光效果的方法

    本文实例讲述了JS实现鼠标箭头变成一个燃烧烛光效果的方法.分享给大家供大家参考.具体如下: 这是一个完全的鼠标箭头美化效果的JS代码,通过这个JS代码,把鼠标的箭头加上一个样式,燃烧中的蜡烛.这个也是很古老的代码了,只能在IE8及以下浏览器运行,代码如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码

    js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码

    今天遇到一个很奇葩的需求,是这样的:当我点击文字的时候弹出一个删除按钮,可以删除刚才点击的文字. 诶?当时想了想,没什么难度吧.可是,既然是奇葩的需求怎么可能这么简单. 对,还有一个功能.我并不知道我点了哪个标签,英文可以承载文字的标签太多太多.... 当时我tm就懵逼了.你都不知道要点哪个标签,我怎么去绑定事件?给谁绑定事件?  扯了半天,还是要写.于是就动工了. 我思路是这样的: START 1,首先得获取鼠标点击的对象.(问题是...我怎么知道点了哪个) 那么先写个函数去获取鼠标点击的对象

  • jQuery插件bgStretcher.js实现全屏背景特效

    bgStretcher 2011 (Background Stretcher)是一个jQuery的插件,可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小.背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下.图片切换顺序也可以设置正向,反向或者随机.更多选项就看你自己慢慢研究了. bgStretcher是一个jQuery插件,它允许你添加一个大图像(或一组图像)到您的网页的背景,并会按比例调整

  • 鼠标经过显示二级菜单js特效

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐