jQuery 前端操作

图片平滑切换

<!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="data:images/bing-1.jpg" /></li><li><img alt="Bing" src="data:images/bing-2.jpg" /></li><li><img alt="Bing" src="data:images/bing-3.jpg" /></li><li><img alt="Bing" src="data:images/bing-4.jpg" /></li><li><img alt="Bing" src="data:images/bing-5.jpg" /></li><li><img alt="Bing" src="data: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();}
}

jQuery 前端操作相关推荐

常用Jquery前端操作
input只能输入正整数 οnkeyup="this.value=this.value.replace(/\D/g,'')"if(!confirm("删除后无法恢复,确认 ...
jQuery前端教程-张晨光-专题视频课程
jQuery前端教程-260人已学习课程介绍什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库浏览器兼容比较好 jQuery ...
钉钉免登陆前端操作详解
在钉钉免登陆中,前端操作是很重要的,因为在前端我们需要调用钉钉的jsapi来获取code,而这个code值是至关重要的.所以我再次清清楚楚的解析一遍前端的操作.下面的是我写的demo,我讲以这个de ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery
目录一.jQuery简介二.引入jQuery 三.jQuery核心函数四.jQuery对象五.jQuery对象操作class 六.addClass补充七.jQuery对象复制一.jQuer ...
jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
express,multer,jQuery前端后端上传单个文件
文章目录先安装基本的模块附上multer的github当中别人汉化的API文档开始创建基本express(上传图片) 测试是否正常前端部分前端需要注意的 multer使用 multer({} ...
jQuery前端验证(四)
上一章简单介绍了jQuery前端基本验证(三),如果没有看过,请观看上一章个人认为,Bootstrap提供的验证框架,是目前前端验证最好,最实用的框架.以后的前端验证,强烈建议均使用bootstra ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

jQuery 前端操作

jQuery 前端操作相关推荐

最新文章

热门文章