jquery动态背景效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery动态背景效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery动态背景效果</title>
    <style type="text/css" media="screen">
        body{
            background-color: #C0DEED;
            margin:0;
            padding:0;
        }

        #header{
            height:180px;
            background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
            text-align:center;
            margin-top:-30px;
        }

        #header h1{
            padding-top:35px;
            font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
            color:white;
            font-size:45px;
        }

        #content{
            background-color:#fff;
            height:500px;
            width:980px;
            margin:25px auto 0 auto;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
        }
    </style>

</head>
<body>
    <div id="container">
        <div id="header">
            <h1>Animated Background Image</h1>	<br />

        </div><!-- #header -->

        <div id="content">
            <!-- Your content will go here -->
        </div><!-- #content -->
    </div><!-- #container -->
    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
			var scrollSpeed = 1; 		// Speed in milliseconds
			var step = 1; 				// How many pixels to move per step
			var current = 0;			// The current pixel row
			var imageWidth = 2247;		// Background image width
			var headerWidth = 1280;		// How wide the header is.

			//The pixel row where to start a new loop
			var restartPosition = -(imageWidth - headerWidth);

			function scrollBg(){
				//Go to next pixel row.
				current -= step;

				//If at the end of the image, then go to the top.
				if (current == restartPosition){
					current = 0;
				}

				//Set the CSS of the header.
				$('#header').css("background-position",current+"px 0");
			}

			//Calls the scrolling function repeatedly
			var init = setInterval("scrollBg()", scrollSpeed);
    </script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)