搜索框提示效果，输入框获取焦点，则原提示关键字消失，失去焦点，还原原关键字，当然是在没有输入用户关键字的前提下！
JQUERY 层-隐藏-显示 效果
可以应用与文章列表摘要模式-列表模式切换：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple JQuery Collapsing menu</title>
</head>
<body>
<script type="text/javascript">
$(function()
{
var i = 1;
$("#mostrar").click(function(event) {
if(i%2 == 1)
$("#mostrar").html("简洁模式");
else
$("#mostrar").html("摘要模式");
event.preventDefault();
$(".box2").slideToggle();
i++;
});
});
</script>
<style type="text/css">
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
h2 { font-size:14px;}
.itembox { border:#99CCCC solid 1px; margin-bottom:10px; padding:10px;}
</style>
<a href="#" id="mostrar">摘要模式</a>
<div id="content" style="width:70%">
<div class="news-list">
<div [...]
JavaScript图片横向平滑切换效果
星期四, 08. 6. 2009 – Category: 前端技术
图片横向轮转（平滑）效果：
图片左右翻转……
HTML 代码：
<!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="Content-Type" content="text/html; charset=gb2312" />
<title>ImagesRoll</title>
<link rel="stylesheet" href="css/imagesroll.css" />
</head>
<body>
<div style="text-align:center;">
<script language="JavaScript" type="text/javascript" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js/effects.js"></script>
<script language="JavaScript" type="text/javascript" src="js/glider.js"></script>
<div class="imagesroll" id="my-glider">
<div class="scroller">
<div class="content">
<div class="section" id="section1">
<p><a href="#" target="_blank"><img [...]
Javascript+CSS 经典效果, 新闻滑轮显示.
效果2张:
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>绝对经典的滑轮新闻显示 (javascript+css)</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">
<!–
*{padding:0; margin:0} img{border:0; display:block;} BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center } .dis { DISPLAY: block } .undis { DISPLAY: none } #cntR { WIDTH: [...]