今天的无聊html代码
2013-01-23 21:52
411 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 今天没什么事情做! 无聊,晒晒工资
- [无聊日记]今天把过去学ASP.net的程序日志贴了上来
- 今天很无聊
- 今天无聊把这个博客给美化了下。
- 今天无聊弄得C++
- 今天真无聊耶。
- 今天 无聊写写游戏玩玩 实战sqlite3
- 2013年，6月20日，今天非常无聊啊。
- 今天遇到的一个无聊问题
- 初学shell，今天遇到由wget下载到本地的网页源代码的乱码问题，无聊的写了一个转码的脚本
- 今天又无聊了
- 今天无聊把自己和同学的照片PS了个海报
- 从今天起不无聊了
- 今天在家里呆着无聊,来写点东西吧
- 今天无聊
- 今天无聊透了！
- 今天遇到的一个无聊编译错误:C1900：IL P1 P2版本不匹配 （罪魁祸首是AMD X2 4000+？。。）
- 今天不忙，看了下DOM，无聊写写记记（详细的是笔者之前没主要的，不详细和缺少的是了解的）
- 无聊的html代码
- 今天的无聊