图片平滑切换
<!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=utf-8" />
<title>图片平滑切换</title>
<style type="text/css">
/** css Reset **/
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ul,li{list-style:none;}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
/** css Reset end **/
/** Page **/
body
{
background-color:#ccc;
margin:0 auto;
text-align:center;
}
.main
{
font-size:12px;
margin:80px auto;
width:900px;
height:600px;
}
#container
{
width:800px;
height:449px;
position:relative;
overflow:hidden;
}
#container .image
{
position:absolute;
height:449px;
width:4800px;
}
#container .image li
{
float:left;
width:800px;
height:449px;
position:relative;
overflow:hidden;
background:#000;
}
#container .sign
{
right:5px;
bottom:5px;
position:absolute;
}
#container .sign li
{
float:left;
color:Gray;
text-align:center;
line-height:16px;
width:16px;
height:16px;
font-family:Arial;
cursor:pointer;
overflow:hidden;
margin:6px 4px;
background-color:#fff;
}
#container .sign li.on
{
color:White;
background-color:Maroon;
}
/** Page end **/
</style>
</head>
<body>
<div class="main">
<div id="container">
<ul class="image">
<li><img alt="Bing" src="images/bing-1.jpg" /></li>
<li><img alt="Bing" src="images/bing-2.jpg" /></li>
<li><img alt="Bing" src="images/bing-3.jpg" /></li>
<li><img alt="Bing" src="images/bing-4.jpg" /></li>
<li><img alt="Bing" src="images/bing-5.jpg" /></li>
<li><img alt="Bing" src="images/bing-6.jpg" /></li>
</ul>
<ul class="sign">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var len = $(".image > li").length; //元素个数
var i = 0;
function turn() {
i = $(".sign li").index($(".on")) //获取当前种子标识
i < len - 1 ? i++ : i = 0 //循环切换
$(".sign li").eq(i).addClass("on").siblings("li").removeClass("on"); //高亮
showImg(i); //切换图片
}
$(".sign > li").click(function () {
clearInterval(set); //清除定时器
var index = $(this).index();
$(this).addClass("on").siblings("li").removeClass("on");
showImg(index);
set = setInterval(turn, 5000);
});
set = setInterval(turn, 5000);
});
function showImg(index) {
var width = $("#container").width();
$(".image").stop(true, false).animate({ "left": -index * width }, 500);
}
</script>
</body>
</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>
<title>显示与隐藏</title>
<link type="text/css" rel="Stylesheet" href="css/global.css" />
<style type="text/css">
body{
_background-image: url(about:blank);
_background-attachment: fixed;
}
.main{ margin-top:20px; padding:10px; width:900px; height:950px;}
.main .top { text-align:center;}
.textbox { border:1px solid blue; width:180px;height:22px; line-height:22px;}
.btn { margin-left:10px;height:24px; line-height:23px; width:80px; border:1px solid gray; background:#ccc; outline:none; }
.btn:hover { background:#f4f4f4; }
.list { margin-top:40px; padding:20px;height:800px; text-align:center;}
.list li { border-bottom:1px solid #f2f2f2; text-align:left; padding:10px; margin-left:100px;width:600px;}
.list .title { font-size:13px; font-weight:bold; cursor:pointer; color:Maroon; line-height:25px;}
.list .content { color:#333; line-height:23px;}
/* mask */
#overlay { background:#000;opacity:0.5;position:fixed; top:0px; left:0px; _position:absolute; width:100%; height:100%; z-index:100; display:none;}
/* tip */
#tip { width:400px; height:250px; background-color:White; position:fixed; _position:absolute;left:0px; top:0px; _top: expression(documentElement.scrollTop + "px"); z-index:120; line-height:23px; display:none; border-radius:4px;box-shadow:0 0 20px white; overflow:visible;}
#tip .close {width:12px; height:12px; margin-left:380px;margin-right:2px; margin-top:4px; line-height:12px; padding:1px; text-align:center; font-family:Arial; font-weight:bold; cursor:pointer;}
#tip .close.hover { background:#999; color:white;}
#tip .tip_text{ line-height:22px; padding:10px; margin-top:5px; text-align:left; border-top:1px solid #f2f2f2;}
</style>
<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="main">
<div class="top">
<span class="span_text"><input type="text" name="textbox" class="textbox" /></span> <span><input type="button" name="btn" class="btn" value="搜素" id="showmask" /></span>
</div>
<ul class="list">
<li>
<div class="title">好了歌</div>
<div class="content">
世人都晓神仙好,唯有功名忘不了!古今将相在何方?荒冢一堆草没了。<br />
世人都晓神仙好,唯有金银忘不了!终朝只恨聚无多,及到多时眼闭了。<br />
世人都晓神仙好,只有姣妻忘不了!君生日日说恩情,君死又随谁去了。<br />
世人都晓神仙好,只有儿孙忘不了!痴心父母古来多,孝顺子孙谁见了?
</div>
</li>
<li>
<div class="title">西江月</div>
<div class="content">
无故寻愁觅恨,有时似傻如狂;纵然生得好皮囊,腹内原来草莽。<br />
潦倒不通庶务,愚顽怕读文章;行为偏执性乖张,那管世人诽谤!<br />
富贵不知乐业,贫穷难耐凄凉;可怜辜负好韶光,于国于家无望。<br />
天下无能第一,古今不肖无双;寄言纨裤与高粱:莫效此儿形状!
</div>
</li>
<li>
<div class="title">分骨肉</div>
<div class="content">
一帆风雨路三千,把骨肉家园,齐来抛闪。<br />
恐哭损残年。高爹娘休把儿悬念:自古穷通皆有定,离合岂无缘? <br />
从今分两地,各自保平安。奴去也,莫牵连。 <br />
</div>
</li>
<li>
<div class="title">葬花吟</div>
<div class="content">
花谢花飞飞满天,红消香断有谁怜?游丝软系飘春榭,落絮轻沾扑秀帘。
闺中女儿惜春暮,愁绪满怀无释处;手把花锄出绣帘,忍踏落花来复去。
柳丝榆荚自芳菲,不管桃飘与李飞;桃李明年能再发,明年闺中知有谁?
三月香巢已垒成,梁间燕子太无情!明年花发虽可啄,却不到人去梁空巢已倾。
一年三百六十日,风刀霜剑严相逼;明媚鲜妍能几时,一朝飘泊难寻觅。
花开易见落难寻,阶前闷杀葬花人;独把花锄泪暗洒,洒上空枝见血痕。
杜鹃无语正黄昏,荷锄归去掩重门;青灯照壁人初睡,冷雨敲窗被未温。
怪侬底事倍伤神?半为怜春半恼春:怜春忽至恼忽去,至又无言去不闻。
昨宵庭外悲歌发,知是花魂与鸟魂?花魂鸟魂总难留,鸟自无言花自羞;愿奴胁下生双翼,随花飞到天尽头。
天尽头,何处有香丘?未若锦囊收艳骨,一抷净土掩风流。
质本洁来还洁去,强于污淖陷渠沟。尔今死去侬收葬,未卜侬身何日丧?
侬今葬花人笑痴,他年葬侬知是谁?试看春残花渐落,便是红颜老死时。
一朝春尽红颜老,花落人亡两不知!
</div>
</li>
<li>
<div class="title">芙蓉女儿诔</div>
<div class="content">
维太平不易之元,蓉桂竞芳之月,无可奈何之日,怡红院浊玉,谨以群花之蕊,冰鲛之縠,沁芳之泉,枫露之茗,四者虽微,聊以达诚申信,乃致祭于白帝宫中抚司秋艳芙蓉女儿之前曰:窃思女儿自临浊世,迄今凡十有六载。其先之乡籍姓氏,湮沦而莫能考者久矣。而玉得于衾枕栉沐之间,栖息宴游之夕,亲昵狎亵,相与共处者,仅五年八月有奇。忆女儿曩生之昔,其为质则金玉不足喻其贵,其为性则冰雪不足喻其洁,其为神则星日不足喻其精,其为貌则花月不足喻其色。姊娣悉慕媖娴,妪媪咸仰惠德。孰料鸠鸩恶其高,鹰鸷翻遭罦罬;薋葹妒其臭,茝兰竟被芟蒩鉏!花原自怯,岂奈狂飙;柳本多愁,何禁骤雨!偶遭蛊虿之谗,遂抱膏肓之疚。故樱唇红褪,韵吐呻吟;杏脸香枯,色陈顑颔。诼谣謑诟,出自屏帏;荆棘蓬榛,蔓延窗户。岂招尤则替,实攘诟而终。...
</div>
</li>
</ul>
</div>
<div id="overlay"></div>
<div id="tip">
<div class="close">x</div>
<div class="tip_text">
《红楼梦》,中国古代四大名著之一,章回体长篇小说,成书于1784年(清乾隆四十九年),梦觉主人序本正式题为《红楼梦》。其原名有《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。前80回曹雪芹著,后40回高鹗续(一说是无名氏续),程伟元、高鹗整理。本书是一部具有高度思想性和高度艺术性的伟大作品,作者具有初步的民主主义思想,他对现实社会、宫廷、官场的黑暗,封建贵族阶级及其家族的腐朽,对封建的科举、婚姻、奴婢、等级制度及社会统治思想等都进行了深刻的批判,并且提出了朦胧的带有初步民主主义性质的理想和主张。
</div>
</div>
<script type="text/javascript">
$(function () {
$(".textbox").focusin(function () {
$(this).animate({ width: "250px" }, 500);
});
$(".textbox").focusout(function () {
$(this).animate({ width: "180px" }, 300);
});
$(".list .content").hide();
$(".list .title").toggle(
function () {
$(this).next(".content").slideDown();
},
function () {
$(this).next(".content").slideUp();
}
);
/* mask */
var html_width = $(document).width(); //网页实际大小
var html_height = $(document).height();
var view_width = document.documentElement.clientWidth; //可见区域大小
var view_height = document.documentElement.clientHeight;
var tip = $("#tip"); //缓存jQuery对象
var tip_width = tip.width(); //元素大小
var tip_height = tip.height();
$("#showmask").click(function () {
$("#overlay").css({ "opacity": "0.5", "width": html_width, "height": html_height }).show();
tip.css({ "left": (view_width - tip_width) / 2, "top": (view_height - tip_height) / 2 - 100 }).fadeIn("slow");
});
/* close */
var close = $("#tip > .close");
close.click(function () {
tip.fadeOut("fast");
$("#overlay").fadeOut("fast");
});
close.mouseover(function () {
$(this).addClass("hover");
});
close.mouseout(function () {
$(this).removeClass("hover");
});
/* IE6 fixed */
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
$(window).scroll(function () {
//针对IE6不支持fixed的处理
var offsetTop = ((view_height - tip_height) / 2 + $(window).scrollTop()-100) + "px";
tip.animate({ top: offsetTop }, { speed: "fast", queue: false });
});
}
});
</script>
</body>
</html>
效果:
操作cookie
//设置cookie
function setCookie(name, value) {
var day = 30; //cookie将保存30天
var exp = new Date();
exp.setTime(exp.getTime() + day * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString(); //expires指定了cookie的生存期
}
//获取cookie
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]);
return null;
}
//删除cookie
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1); //设置此cookie已过期
var val = getCookie(name);
if (val != null) {
document.cookie = name + "=" + val + ";expires=" + exp.toGMTString();
}
}