基于js实现页面背景切换



28 109 37



特效描述:基于js实现 页面背景切换,基于js实现页面背景切换

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='css/bootstrap.css' rel='stylesheet' type='text/css'>
<link href='css/prettify.css' rel='stylesheet' type='text/css'>
<link href='css/index.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='css/bootstrap.css' rel='stylesheet' type='text/css'>
<link href='css/prettify.css' rel='stylesheet' type='text/css'>
<link href='css/index.css' rel='stylesheet' type='text/css'>

2. 引入JS

<script type='text/javascript' src='js/javascript.js'></script>
<script type='text/javascript' src='js/analytics.js'></script>
<script type='text/javascript' src='js/javascript.js'></script>
<script type='text/javascript' src='js/analytics.js'></script>

3. HTML代码

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
</script>
<body class='body' onload='cdj()'>
	<div class='container'>
		<div class='header'>
			<span>
				justParallax.js 
			</span>
			An easy to use parallax plugin.
		</div>
		<div class='content'>
			<div class='head'>
				Feature navigation
			</div>
			<a class='scroll-to' href='#introduction'>
				Introduction
			</a>
			<br>
			<a class='scroll-to'  href='#support'>
				Wide browser support
			</a>
			<br>
			<a class='scroll-to'  href='#setup'>
				Easy set-up
			</a>
			<br>
			<a class='scroll-to'  href='#customize'>
				Customizable parallax settings
			</a>
			<br>
			<a class='scroll-to'  href='#jquery'>
				No jQuery needed
			</a>
			<br>
			<a class='scroll-to'  href='#notes'>
				Notes
			</a>
			<br>
			<a class='scroll-to'  href='#playground'>
				Playground
			</a>
		</div>
		<hr>
		<div class='content' id='introduction'>
			<div class='head'>
				Introduction
			</div>
			<p>
				<strong>justParallax.js</strong> is a lightweight javascript plugin which allows users to make the background of their webpage have a subtle parallax effect with just 2 lines of code. 
				<br><br>
				<strong>justParallax.js</strong> is also fully customizable and does not depend on any Javascript library to function.
				<br><br>
				<strong class='pull-right'>
					Click the background to change it. <i class='icon icon-arrow-right'></i>
				</strong>
			</p>
		</div>
		<hr>
		<div class='content' id='support'>
			<div class='head'>
				Wide browser support
			</div>
			<p>
				<strong>justParallax.js</strong> supports all major browsers including  IE7+, Google Chrome, Mozilla Firefox, Safari, Opera and many more.
			</p>
		</div>
		<hr>
		<div class='content' id='setup'>
			<div class='head'>
				Easy set-up
			</div>
			<p>
				Get <strong>justParallax.js</strong> up and running in just 4 easy steps.
				<ol class='sum'>
					<li>
						Add a background to your &lt;body&gt; tag.
					</li>
					<li>
						Include <strong>justParallax.js</strong> to your html document.
					</li>
					<li>
						Customize your parallax settings. (optional)
					</li>
					<li>
						Call &uml;initParallax(settings);&uml; when your page is ready.
					</li>
				</ol>
			</p>
		</div>
		<hr>
		<div class='content' id='customize'>
			<div class='head'>
				Customizable parallax settings
			</div>
			<p>
				<strong>justParallax.js</strong> supports multiple customizations, here is a list of all options and it's default values.
				<br>
				<pre class='prettyprint linenums'><ol class='linenums'><li><span class='tag'>&lt;script src='./js/justParallax.js' type='text/javascript'&gt;&lt;script&gt;</span></li><li><span class='tag'>&lt;script&gt;</span></li><li>//Default settings</li><li><span class='pln'>speed: 8;</span> //The speed of the scrolling background, 1 is faster than 10.</li><li><span class='pln'>vertical: true;</span> //Set to true if the background should scroll vertically.</li><li><span class='pln'>vertical_inversed: false;</span> //Set to true if the vertical direction should be inversed.</li><li><span class='pln'>horizontal: true;</span> //Set to true if the background should scroll horizontally.</li><li><span class='pln'>horizontal_inversed: false;</span> //Set to true if the horizontal direction should be inversed.</li><li></li><li>//An example of the usage of justParallax.js</li><li><span class='pln'>var settings = {</span></li><li>	<span class='pln'>speed: 5,</span></li><li><span class='pln'>	vertical: true,</span></li><li><span class='pln'>	vertical_inversed: true,</span></li><li><span class='pln'>	horizontal: true,</span></li><li><span class='pln'>	horizontal_inversed: false</span></li><li><span class='pln'>};</span></li><li><span class='pln'>initParallax(settings);</span></li><li><span class='tag'>&lt;/script&gt;</span></li></ol></pre>
				You only have to define the settings in the variable that you want to change. All undefined settings will fall back to their default setting. 
			</p>
		</div>
		<hr>
		<div class='content' id='jquery'>
			<div class='head'>
				No jQuery needed
			</div>
			<p>
				<strong>justParallax.js</strong> works with plain Javascript which gives the best performance and doesn&acute;t need jQuery or any other Javascript library to function.
			</p>
		</div>
		<hr>
		<div class='content' id='notes'>
			<div class='head'>
				Notes
			</div>
			<p>
				<strong>justParallax.js</strong> is merely a tool to achieve a great website, here are some tips and tricks about how to use the tool.
				<br>
				<br>
				<ol class='sum'>
					<li>
						<strong>Watch the users screen size.</strong>
						<br>
						When the user scrolls, the background image will move and it will repeat itself when it has reached it's max. A good solution for this is to use patterns, patterns will repeat themselves and no one will have this problem.
						<br><br>
					</li>
					<li>
						<strong>Play around with the settings</strong>
						<br>
						By playing with the settings you will create the most wonderfull effects. For example: when you combine the vertical and horizontal scroll, the background will scroll diagonal.
						<br><br>
					</li>
					<li>
						<strong>Request new features</strong>
						<br>
						When you have some new ideas for features to this tool you can report them to this e-mail address or you can add a comment on the Codecanyon page .
						<br><br>
					</li>
				</ol>
			</p>
		</div>
		<hr>
		<div class='content' id='playground'>
			<div class='head'>
				Playground
			</div>
			<p>
				<strong>
					<i class='icon icon-arrow-left'></i>Click the background to change it.
				</strong>
				<table id='settingTable' class='table table-hover'>
					<thead>
						<tr>
							<th>
								Option
							</th>
							<th>
								Setting
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								Speed:
							</td>
							<td>
								<select class='speed active'>
									<option value='1'>
										1
									</option>
									<option value='2'>
										2
									</option>
									<option value='3'>
										3
									</option>
									<option value='4'>
										4
									</option>
									<option value='5'>
										5
									</option>
									<option value='6'>
										6
									</option>
									<option value='7'>
										7
									</option>
									<option selected='true' value='8'>
										8
									</option>
									<option value='9'>
										9
									</option>
									<option value='10'>
										10
									</option>
							</td>
						</tr>
						<tr>
							<td>
								vertical:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small active'value=true>
										true
									</button>
									<button class='btn btn-danger btn-small'value=false>
				 						false
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								vertical_inversed:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small ' value=true>
										true
									</button>
									<button class='btn btn-danger btn-small active' value=false>
										false
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								horizontal:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small ' value=true>
										true
									</button>
									<button class='btn btn-danger btn-small active' value=false>
										false
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								horizontal_inversed:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small ' value=true>
										true
									</button>
									<button class='btn btn-danger btn-small active' value=false>
										false
									</button>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</p>
		</div>
	</div>
	<div class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<strong>Choose background.</strong>
		</div>
		<div class="modal-body">
			<div class='img-holder img-rounded pull-left'>
				<img src='images/robots.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/cartographer.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/escheresque_ste.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/cuppycake.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/monsturs.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/colours.png' />
			</div>
		</div>
		<div class="modal-footer">
		<button class="btn" data-toggle='modal' data-target=".modal">Close</button>
		</div>
	</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片叠加 图片层叠 图片全屏 图片淡出淡进 图片淡出 图片淡进 图片延迟加载 图片延迟 图片加载 图片翻转 图片旋转 图片放大镜 头像上传 图片上传 图片拖动 图片拖拽 二维码 带缩略图的幻灯片 图片广告 h5图片动画 h5图标动画 html5图片动画 html5图标动画 地图 中国地图 世界地图 滚动切换 滚动条切换 滑动选项卡 滑动切换 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片滚动 图片滚动条 纯图片轮播 图片轮播 图片收缩展开 图片收缩 图片展开 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡 自动滚动图片轮播 图标导航 图标菜单 弹出层拖动 背景切换 大图切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 图表 图片 图片插件 头像截图 提示框/弹出层 背景切换 大图切换 图片切换 切换图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到