今天的无聊html代码

5 篇文章 0 订阅
2 篇文章 0 订阅

jquery,animate函数.

<!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" lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
	<style type="text/css">
		body {
			margin:0 auto;
			width:800px;
			line-height:1.8em;
			background-color:#00525f;
			color:white;
		}
		#head {
			position:fixed;
			z-index:10000;
			background-color:#7ce;
			width:inherit;
			height:104px;
			opacity:0.96;
			line-height:1em;
		}
		.transparent {
			/* IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";

			/* IE 5-7 */
			filter: alpha(opacity=96);

			/* Netscape */
			-moz-opacity: 0.96;

			/* Safari 1.x */
			-khtml-opacity: 0.96;

			/* Good browsers */
			opacity: 0.96;
		}
		h1 {
			font-size:40px;
			margin:10px auto;
			text-align:center;
			color:#27c
		}
		#content {
			float:left;
			margin-top:100px;
			position:relative;
			background-color:#005328;
			padding:0 15px;
		}
		#switcher {
			float:left;
			position:relative;
			padding:15px;
			width:250px;
			background-color:#4ac;
			margin:1px;
		}
		.speech p {
			text-indent:2em;
		}
		.more {
			text-decoration:none;
			color:#e59
		}
		.more:hover {
			text-decoration:underline;
			color:#95e
		}
		button {
			width:70px;
			height:20px;
			padding:0;
			display:inline;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var alertFallback = true;
			if (typeof console === "undefined" || typeof console.log === "undefined") {
				console = {};
				if (alertFallback) {
					console.log = function(msg) {
						alert(msg);
					}
				};
			} else {
				console.log = function() {};
			}
			var $speech = $('div.speech');
			var defaultSize = parseFloat($speech.css('fontSize'));
			$('#switcher button').click(function(event) {
				var fontSize = parseFloat($speech.css('font-size'));
				switch (this.id) {
					case 'switcher-larger':  
						fontSize *= 1.4;
						break;
					case 'switcher-small':
						fontSize /= 1.4;
						break;
					default:
						fontSize = defaultSize;
				}
				console.log('fontSize:' + fontSize);
				$speech.css('fontSize', fontSize + 'px');
			});
			var $thePara = $('p').eq(1);
			$thePara.hide();
			$('a.more').click(function() {
				//$thePara.slideToggle('slow');
				
				$thePara.animate({opacity:'toggle', width:'toggle', 'font-size':'30px'}, 'slow');
				$link = $(this);
				if ($link.text() == 'Read More') {
					$link.text('Read Less');
				} else {
					$link.text('Read More');
				}
				
				/*if ($thePara.is(':hidden')) {
					$thePara.fadeIn(0);
					$(this).text('Read Less');
				} else {
					$thePara.fadeOut(0);
					$(this).text('Read More');
				}*/
				
				/*$('p').eq(1).slideDown(5000);//show()fadeIn()
				$(this).slideUp(4000);//hide()fadeOut()*/
				return false;
			});
			var atLeft = true;
			var bkColorBak = $('#switcher').css('background-color');
			var fade = 1;
			$('div.label').click(function() {
				var $head = $('#head');
				var paraWidth = $head.outerWidth();
				var borderLeftWidth = parseFloat($head.css('border-left-width'));
				var borderRightWidth = parseFloat($head.css('border-right-width'));
				var $switcher = $(this).parent();
				var switcherWidth = $switcher.outerWidth(true);
				var newLeftValue = 0;
				var bkColor = bkColorBak;
				console.log('.'+bkColor);
				if (atLeft) {
					fade = .3;
					bkColor = '#eee';
					newLeftValue = paraWidth - switcherWidth - borderLeftWidth - borderRightWidth;
					atLeft = false;
				} else {
					fade = 1;
					newLeftValue = 0;
					atLeft = true;
				}
				$switcher
				.fadeTo('fase', fade).slideUp('fast').slideDown('fast')
				.animate({/*borderWidth:'5px', //right:'0px', //height: '+=20px'*/left:newLeftValue}, {duration:'slow',queue:false})
				.queue(function(next){$switcher.css('background-color', bkColor);next();});//不要忘了调用next()
				//$('#content').css('padding-top', '+=40px');
			});
		});
		$(document).ready(function() {
			$('p').eq(3).css('backgroundColor', '#111').hide();
			$('p').eq(2).hover(function(){$(this).css('cursor', 'pointer');}).css('border', '1px solid #fff').click(function() {
				var $clickedItem = $(this);
				$clickedItem.next().slideDown('slow', function() {
					$clickedItem.slideUp(600, function(){
						$(this).next().css('background-color', $('#content').css('background-color')).fadeIn(1000, 0.4);
					});
				})
			});
		});
	</script>
</head>
<body>
	<div id="head" class="transparent">
		<h1>APM角度上看:NoSQL和关系数据库并无不同</h1>
		<div id="switcher">
			<div class="label">Text Size</div>
			<button id="switcher-default">Default</button>
			<button id="switcher-larger">Bigger</button>
			<button id="switcher-small">Smaller</button>
		</div>
	</div>
	<div id="content">
		<div class="speech">
			<p>最重要的不是数据库本身的性能,而是使用数据库的应用程序。应用程序的逻辑决定了使用数据库的方式,当然也有很多途径来调优数据库用以掩饰应用程序本身的问题。所以我们需要监视和优化应用程序的使用模式,同时应用程序逻辑又由输入数据或者是大多数情况下与用户交互的方式决定;所以我们必须分析用户的行为,而用户的操作决定了数据库的使用方式。另一方面,我们需要明白这些行为对数据库的影响。这里的重点在于获悉当数据的性能达到最高标准,却仍然成为应用程序的主要瓶颈 —— 它们是否被错误的使用或者是使用了一个错误的访问模式。
			</p>
			<p>【CSDN报道】AWS终于着手解决故障频发的东部数据中心了,AWS将在弗吉尼亚州北部建立新的数据中心,它将在2014年建成,这将从根本上解决AWS东部区域故障频发的问题。位于弗吉尼亚州的Ashburn数据中心在2004年开始服役,并在2006年提供AWS服务,它是AWS最古老同时也是最大的数据中心,因此各方面出现故障的几率也较高。根据独立的调查,AWS上70%以上的IP地址指向这里。
			</p>
			<a href="javascript:void(0);" class="more">Read More</a>
			<p>Jexus Web server是Linux平台上最强劲的ASP.NET WEB服务器,同时也是linux平台上的一款优秀的高性能HTML WEB服务器。其最新版V5.2已于昨日正式发布。
				与5.1相比,Jexus5.2有如下变化:
				1、修复了5.1发布以来发现的所有BUG;
				2、为FastCGI、反向代理增加了对“多重Cookie”的支持;
				3、增加了对响应数据进行“分块传输”的支持;
				4、增加了正常读取中文乱码文件名(windows文件复制到linux系统上后中文文件名成为乱码)的支持;
				5、为ASP.NET开放了开放HTTP OPTIONS/PUT/DELETE协议,为“RESTful Web API”的正常运行提供了平台基础;
				6、对线程池控制、应用程序域域间数据传递方式进行了改进,性能特别是ASP.NET的处理速度得到大幅度提升(静态文件处理速度提高了5%,ASP.NET处理速度提高了40%)。
			</p>
			<p>这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
			</p>
			<p>SolusOS是新手友好的桌面Linux发行,它基于Debian GNU/Linux的最新稳定发布。其特色在于GNOME 2桌面,面向日常任务的一组精心挑选的缺省应用程序,从“backports”升级的软件,一套完整的多媒体插件,一份定制的GNOME菜单,以及一份直 观的图形化安装程序。
			</p>
		</div>
	</div>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值