01 点谁谁哭
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//隐式迭代:自动将数组中的每个元素都执行一遍操作
//当前会将数组中的每个input进行click绑定
$('input').click(function() {
this.value = '呜呜';
});
});
</script>
</head>
<body>
<input class="test" type="button" value="哈哈" />
<input class="test" type="button" value="哈哈" />
<input class="test" type="button" value="哈哈" />
<input class="test" type="button" value="哈哈" />
<input class="test" type="button" value="哈哈" />
</body>
</html>
02 加法计算器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() { $('#bthAdd').click(function () {
var num1 = parseInt($('#num1').val());
var num2 = parseInt($('#num2').val());
var num3 = num1 + num2;
$('#result').val(num3);
});
});
</script>
</head>
<body>
<input type="text" id="num1" value="" />
+
<input type="text" id="num2" value=""/>
=
<input type="text" id="result" value="" />
<br/>
<input type="button" id="bthAdd" value="结果"/>
</body>
</html>
03 都是P
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#btnP').click(function() {
$('p').text('我们都是P');
});
});
</script>
</head>
<body>
<input type="button" id="btnP" value="设置P内容"/>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>
04 省市联动
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
//01-定义省市数据，键值对集合
var datas = {
"北京": ["朝阳", "海淀", "昌平", "丰台"],
"山东": ["青岛", "济南", "烟台"],
"山西": ["大同", "太原", "运城", "长治"],
"河南": ["洛阳", "开封", "郑州", "驻马店"],
"河北": ["石家庄", "张家口", "保定"]
};
$(function () {
//02 创建省的选择器
var selection = $('<select id="proSelect"></select>');
selection.appendTo($('body'));
//03-遍历集合 在选择器上添加元素
$.each(datas, function (key, value) {
//创建option对象
$('<option value="' + key + '">' + key + '</option>').appendTo(selection);
});
//04-创建市的selection
var citySelection = $('<select id="citySelect"></select>');
//05-在body上添加市的selection
$('body').append(citySelection);
//06-根据省的值 获取市的值
//06-01 获取省的值
var pro = $('#proSelect').val();
var city = datas[pro];
//06-02 创建对象
for (var val in city) {
$(citySelection).append('<option value="'+val+'">'+city[val]+'</option>');
};
//07 省的change事件
selection.change(function() {
//07-01 获取变化后的省的信息
var pro = $('#proSelect').val();
var city = datas[pro];
//07-02 清空市的信息
citySelection.empty();
//07-03 添加市的信息
$.each(city,function(index,item) {
$('#citySelect').append('<option value="'+index+'">'+item+'</option>');
});
}); }); </script>
</head>
<body> </body>
</html>
05 点亮灯泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() {
var flag = ;
$('.imgClass').click(function () {
if (flag == ) {
$('img').attr('src', '../Img/12.JPG');
flag = ;
} else {
$('img').attr('src', '../Img/11.GIF');
flag = ;
} });
});
</script>
</head>
<body> <img class="imgClass" src="../Img/11.GIF" />
</body>
</html>
06 更换背景色
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function () {
var flag = true;
$('#divBackGround').click(function () {
if (flag == true) {
$(this).css(
{
'background-color': 'white' });
flag = false;
} else {
$(this).css(
{
'background-color': 'black' });
flag = true;
}
});
});
</script>
</head>
<body>
<div id="divBackGround" style="width: 100px; height: 100px; background-color:black"> </div>
</body>
</html>
07 链式编程(即改变文字颜色,又改变文字内容)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#btnCon').click(function() {
$('p').css('color','red').text('我们都是P');
});
});
</script>
</head>
<body>
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
<p>我是p4</p>
<p>我是p5</p>
<input id="btnCon" type="button" value="统一显示"/>
</body>
</html>
08 ul和li的互相转换
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
ul {
border: 1px solid;
width: 100px;
height: 300px;
float: left;
list-style: none;
}
</style>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() {
//01 获取所有的li标签
$('li').hover(
function liOver() {
$(this).css({ 'color': 'red', 'cursor': 'pointer' });
},
function liOut() {
$(this).css({ 'color': 'black' });
}
).click(function() {
var parId = $(this).parent().attr('id');
if (parId == 'left') {
$(this).appendTo('#right');
} else {
$(this).appendTo('#left');
}
}); });
</script>
</head>
<body>
<ul id="left" >
<li id=""></li>
<li id=""></li>
<li id=""></li>
<li id=""></li>
</ul>
<ul id="right" style="float:right" ></ul>
</body>
</html>
09 创建表格
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
th {
border: 1px solid;
}
td {
border: 1px solid;
}
</style>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
var list = [
{ id: , country: '中国', capital: '北京' },
{ id: , country: '美国', capital: '华盛顿' },
{ id: , country: '日本', capital: '东京' },
{ id: , country: '韩国', capital: '首尔' }
]; $(function () {
//01-根据数据生成表格
$.each(list, function(indext, item) {
$('<tr>' +
'<td>' +item.id +'</td>' +
'<td>' +item.country +'</td>' +
'<td>' +item.capital +'</td> ' +
' </tr>').appendTo('#table1');
});
//02-是表格的奇偶行显示不同背景色
$('tr:odd').css('background-color', 'yellow');
//03-鼠标放上去高亮显示,鼠标离开恢复原色
$('#table1 tr').hover(function () {//移上 $(this).css('background-color', 'blue');
}, function () {//移开
$('tr:odd').css('background-color', 'yellow');
$('tr:even').css('background-color', 'white');
}); //04-前三名
$("#table1 tr:lt(4)").css('font-weight','bold');
});
</script>
</head>
<body>
<table id="table1" style="border: 1px solid">
<thead style="border: 1px solid">
<th>编号</th>
<th>国家</th>
<th>首都</th>
</thead>
</table>
</body>
</html>
10 链式编程end()的用法
鼠标移至该节点显示红色,该节点之前显示蓝色之后显示黄色
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
ul {
border: 1px solid;
width: 100px;
height: 300px;
float: left;
list-style: none;
}
</style>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//01 获取所有的li标签
$('li').hover(
function liOver() {
$(this).css({ 'color': 'red', 'cursor': 'pointer' }).prevAll().css('color', 'yellow').end().nextAll().css('color', 'blue');
},
function liOut() {
$('li').css({ 'color': 'black' });
}
);
}); </script> </head>
<body>
<ul id="left">
<li id=""></li>
<li id=""></li>
<li id=""></li>
<li id=""></li>
</ul>
</body>
</html>
11 权限管理
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
select { border: 1px solid;
width: 100px;
height: 200px;
float: left;
list-style: none; } </style>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() {
//01 > 按钮触发事件
$('#btnToRigh').click(function () {
$("#left :selected").appendTo($("#right"));
});
//02 >> 按钮触发事件
$('#btnToRighAll').click(function () {
$("#left").children().appendTo($("#right"));
});
//03 < 按钮触发事件
$('#btnToLeft').click(function () {
$("#right :selected").appendTo($("#left"));
});
//04 << 按钮触发事件
$('#btnToLeftAll').click(function () {
$("#right").children().appendTo($("#left"));
});
});
</script>
</head>
<body>
<select id="left" multiple="multiple">
<option>增加-权限</option>
<option>删除-权限</option>
<option>修改-权限</option>
<option>查看-权限</option>
</select>
<div style="float: left">
<br/>
<input id="btnToRigh" type="button" value=">"/>
<br/><br />
<input id="btnToRighAll" type="button" value=">>"/>
<br/><br />
<input id="btnToLeft" type="button" value="<"/>
<br/><br />
<input id="btnToLeftAll" type="button" value="<<"/>
</div>
<select id="right" multiple="multiple"> </select>
</body>
</html>
12 对数据表的增删改查
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
table {
border: 1px solid;
}
th {
border: 1px solid;
}
td {
border: 1px solid;
}
#backDiv {
position: absolute;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.2;
display: none;
}
#beforeDiv {
position: absolute;
border: 1px solid red;
width: 250px;height: 120px;
background-color: #e7e7e7;
display: none;
} </style>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
var list = [
{ id: , country: '中国', capital: '北京' },
{ id: , country: '美国', capital: '华盛顿' },
{ id: , country: '日本', capital: '东京' },
{ id: , country: '韩国', capital: '首尔' }
];
$(function() {
//01 创建表格
$.each(list, function (index, item) {
//为tr设置值,方便修改时确认是哪一行
$('<tr id="' + item.id + '">' +
' <td><input type="checkbox" /></td>'+
'<td>'+item.id+'</td>'+
'<td>'+item.country+'</td>'+
'<td>'+item.capital+'</td>'+
'<td><input type="button" value="修改" /></td>'+
'</tr>').appendTo('#table1');
});
//02 设置全选的checkbox属性
$("#checkAll").change(function() {
$(':checkbox').attr('checked', this.checked);
});
//03 反转按钮触发事件
$('#bthRever').click(function() {
$(':checkbox[id!="checkAll"]').each(function() {
this.checked = !this.checked;
});
}); //04 删除 按钮
$('#bthDelete').click(function () {
if (confirm("确定要删除?")) {
$(':checkbox[id!="checkAll"][checked="checked"]').parents('tr').remove()
}
}); //05 添加按钮触发事件
$('#bthAdd').click(function () {
//显示添加界面
$('#backDiv').css('display', 'block').width(window.innerWidth).height(window.innerHeight);
$('#beforeDiv').css('display', 'block').css(
{
'left': window.innerWidth / - + 'px',
'top': window.innerHeight / - + 'px'
});
$('#beforeDiv :text,:hidden').val('');
}); // 06 单击保存按钮触发事件
$('#btnSave').click(function () {
//判断是"修改"时的保存还是"新增"时的保存
var hiId = $('#hidId').val();
if (hiId == '') {
$('<tr id="' + $('#txtId').val() + '">' +
' <td><input type="checkbox" /></td>' +
'<td>' + $('#txtId').val() + '</td>' +
'<td>' + $('#txtCountry').val() + '</td>' +
'<td>' + $('#txtCapital').val() + '</td>' +
'<td><input type="button" value="修改" /></td>' +
'</tr>').appendTo('#table1').find(':button').click(function() {
//显示修改界面
$('#backDiv').css('display', 'block').width(window.innerWidth).height(window.innerHeight);
$('#beforeDiv').css('display', 'block').css(
{
'left': window.innerWidth / - + 'px',
'top': window.innerHeight / - + 'px'
});
//为修改页面赋值-根据当前按钮获取数据值
var pars = $(this).parent().prevAll();
//获取隐藏域中id
$('#hidId').val(pars.eq().text());
$('#txtId').val(pars.eq().text());
$('#txtCountry').val(pars.eq().text());
$('#txtCapital').val(pars.eq().text());
});
} else {
//修改
//01找到所有列
var tds = $('#' + hiId + '>td');
tds.eq().text($('#txtId').val());
tds.eq().text($('#txtCountry').val());
tds.eq().text($('#txtCapital').val());
//修改tr的属性值
$('#' + hiId).attr('id', $('#txtId').val()); } $('#backDiv').css('display', 'none');
$('#beforeDiv').css('display', 'none');
});
//07 单击取消按钮触发事件
$('#btnCancel').click(function () {
$('#backDiv').css('display', 'none');
$('#beforeDiv').css('display', 'none');
}); //08 单击修改按钮触发事件
$('#table1 :button').click(function() {
//显示修改界面
$('#backDiv').css('display', 'block').width(window.innerWidth).height(window.innerHeight);
$('#beforeDiv').css('display', 'block').css(
{
'left': window.innerWidth / - + 'px',
'top': window.innerHeight / - + 'px'
});
//为修改页面赋值-根据当前按钮获取数据值
var pars = $(this).parent().prevAll();
//获取隐藏域中id
$('#hidId').val(pars.eq().text());
$('#txtId').val(pars.eq().text());
$('#txtCountry').val(pars.eq().text());
$('#txtCapital').val(pars.eq().text());
}); });
</script>
</head>
<body>
<input type="button" id="bthAdd" value="新增" />
<input type="button" id="bthRever" value="反转" />
<input type="button" id="bthDelete" value="删除"/>
<table id="table1">
<thead style="border: 1px solid;">
<th><input type="checkbox" id="checkAll"/></th>
<th>编号</th>
<th>国家</th>
<th>首都</th>
<th>修改</th>
</thead>
</table>
<!-- 设置两个div 用于单击按钮时候进行 蒙版 -->
<div id="backDiv"></div>
<div id="beforeDiv">
<br/>
<!-- 设置隐藏域,用于记录当前选中的id -->
<input type="hidden" id="hidId"/>
<label for="txtId">编号</label> <input type="text" id="txtId"/><br/>
<label for="txtCountry">国家</label> <input type="text" id="txtCountry"/><br/>
<label for="txtCapital">首都</label> <input type="text" id="txtCapital"/><br/>
<input type="button" id="btnSave" value="保存"/>
<input type="button" id="btnCancel" value="取消"/> </div>
</body>
</html>
13 仿照微博
<!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>
<style>
#friendDivId { position: absolute;
width: 50px;
height:100px;
border:1px solid red;
left: 100px;
top: 200px;
background-color:#a7a7a7;
padding: 5px; }
</style>
<link href="css/main.css" rel="stylesheet" />
<script src="../../JQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
//01-默认提示信息
$("#msgTxt").val('#输入话题标题#')
//04 检验还剩多少字体
.keyup(function() {
var lengthText = - $(this).val().length;
if (lengthText > ) {
$('.countTxt').css('color', 'black').html('还能输入<em>'+lengthText+'</em>字');
} else {
$('.countTxt').css('color', 'red').html('还能输入<em>'+lengthText*-+'</em>字');
}
})
;
//02-点击"话题"按钮,如果文本框为空,显示'#输入话题标题#'
//如果文本框显示'#输入话题标题#',则将其高亮选中
$(".sendBtn").click(function () {
var msgText = $("#msgTxt").val();
if (msgText == '') {
$("#msgTxt").val('#输入话题标题#');
}
if (msgText == '#输入话题标题#') {
$("#msgTxt").css('color','red');
}
})
//03 设置鼠标hover事件
.hover(function funON() {
$(this).css('background-position', '-0px -195px');
},
function funOFF() {
$(this).css('background-position', '-117px -165px')
})
;
//04 设置@好友样式
$('.atSome').click(function(e) {
//04-01 创建一个div
var friendList = ['张三', '李四', '王五', '赵六', '田七'];
//04-04 判断是否有一个friendDiv的存在
var fridenDiv = $('#friendDivId');
if (fridenDiv.length > ) {
return;
}
fridenDiv = $('<div id="friendDivId"></div>').css({
'left': e.clientX + 'px',
'top': e.clientY + 'px'
}).appendTo('body');
//04-02 向div中添加<span>数据
$.each(friendList, function () {
//04-03 向<span>中添加点击事件
$('<span>' + this + '</span></br>')
.css('cursor','pointer')//设置小手图标
.one('click',function () {
$("#msgTxt").val($("#msgTxt").val()+'@'+$(this).text());
}).appendTo(fridenDiv);
});
//04-03 增加一个关闭按钮
$('<span>×</span>')
.css('cursor', 'pointer')
.click(function() {
fridenDiv.remove();
}).appendTo(fridenDiv); });
});
</script>
</head>
<body>
<img id="logo" src="img/b3_100901.png" alt="" />
<center>
<div id="myBody">
<div id="myBdLeft">
<div id="talkBox">
<h2>
<a>夏天来了，你懂得......</a></h2>
<textarea id="msgTxt"></textarea>
<div id="funBox">
<a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);"
class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a>
<a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
class="uploadVideo">视频</a>
</div>
<div id="sendBox">
<input type="button" class="sendBtn" value="" />
<span class="countTxt">还能输入<em></em>字</span>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
14 模仿飞秋
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
span {
cursor: pointer;
}
ul {
border: 1px solid red;
list-style: none;
display: none;
}
</style>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() { $('#spanUnFriend').click(function () {
$('#ulUnFriend').toggle().siblings('ul').hide(); });
$('#spanFriend').click(function () {
$('#ulFriend').toggle().siblings('ul').hide();
});
});
</script>
</head>
<body>
<span id="spanFriend">我的好友</span>
<ul id="ulFriend">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
<li>田七</li>
</ul>
<br/>
<span id="spanUnFriend">黑名单</span>
<ul id="ulUnFriend">
<li>诸葛三</li>
<li>欧阳四</li>
<li>东方五</li>
<li>独孤六</li>
<li>公孙七</li>
</ul>
</body>
</html>
15 标签页
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.tab {
border: 1px solid red;
width: 50px;
height: 20px;
float: left;
margin: 3px;
}
#countent {
border: 1px solid blue;
width: 250px;
height: 250px;
clear: both;/*//取消浮动效果*/
}
</style>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function() { $('.tab').mouseover(function () {
var divConte = $('#countent');
switch (this.id) {
case "":
divConte.html('<h1>我叫张三,我为自己代言 </h1>');
break;
case "":
divConte.html('<h1>我叫李四,我为自己代言 </h1>');
break;
case "":
divConte.html('<h1> 我叫王五,我为自己代言</h1>');
break;
case "":
divConte.html('<h1>我叫赵六,我为自己代言 </h1>');
break; }
}); });
</script>
</head>
<body>
<div id="" class="tab">张三</div>
<div id="" class="tab">李四</div>
<div id="" class="tab">王五</div>
<div id="" class="tab">赵六</div>
<div id="countent"></div>
</body>
</html>
16 图片轮播
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<style>
#imgContainer {
width: 300px;height: 300px;
border: 1px solid red;
/*设置绝对定位,子元素的绝对定位是相对于父元素的*/
position: absolute;left: 10px;top: 10px;
}
#imgContainer img {
width: 300px;
height: 300px;
position: absolute;
left: 0px;
top: 0px;
}
#imgContainer div {
position: absolute;
}
#imgContainer .imgTip {
position: absolute;
/*//设置数据提示在图片上*/
z-index: ;
bottom: 10px;
border: 1px solid blue;
background-color: green;
color: white;
padding: 3px;
width: 10px;
cursor: pointer;
} </style>
<script>
//声明一个清除定时器的变量
var changeImgId;
//定义一个图片集合,指定图片的路径信息
var list = ['/Img/zg.jpg', '/Img/mg.jpg', '/Img/rb.jpg', '/Img/hg.jpg'];
$(function() {
$.each(list, function(index) {
//根据数组生成所有的img图片
$('<img src="' + this + '">').appendTo('#imgContainer');
//根据图片生成数字提示
$('<div class="imgTip">' + (index + ) + '</div>')
.css('right', ( - index) * + 'px')
.appendTo('#imgContainer');
});
//设置第1张图片显示
$('#imgContainer>img:gt(0)').hide();
//设置提示数字的事件
$('#imgContainer>.imgTip').hover(function () {
//鼠标移动数字上时候,根据索引显示图片
$('#imgContainer>img').eq(parseInt($(this).text()) - ).slideDown().siblings('img').fadeOut();
$(this).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
//清除自动播放的定时器
clearInterval(changeImgId);
//更改图片suoyin
imgIndex = parseInt($(this).text()) - ;
},
function() {
changeImgId = setInterval(chagneImg, );
}); //完成自动切换功能
changeImgId = setInterval(chagneImg, );
//默认让第一个数字背景色变为蓝色
$(' #imgContainer>.imgTip:eq(0)').css('background-color', 'blue');
});
//切换图片
var imgIndex = ;
function chagneImg() {
imgIndex ++;//切换图片索引
if (imgIndex >= list.length) {
imgIndex = ;
}
$('#imgContainer>img').eq(imgIndex).slideDown().siblings('img').fadeOut();
//设置指定索引的背景se
$('#imgContainer>.imgTip').eq(imgIndex).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green'); }
</script>
</head>
<body>
<div id="imgContainer"></div>
</body>
</html>
图片轮播-模仿京东
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="轮播图css.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="轮播图js.js"></script>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href="" ><img src="img/1.jpg" alt></a></li>
<li><a href="" ><img src="img/2.jpg" alt></a></li>
<li><a href="" ><img src="img/3.jpg" alt></a></li>
<li><a href="" ><img src="img/4.jpg" alt></a></li>
<li><a href="" ><img src="img/5.jpg" alt></a></li>
<li><a href="" ><img src="img/6.jpg" alt></a></li>
<li><a href="" ><img src="img/7.jpg" alt></a></li>
<li><a href="" ><img src="img/8.jpg" alt></a></li>
</ul>
<ul class="num"> </ul>
<div class="btn left"><</div>
<div class="btn right">></div>
</div>
</body>
</html>
html页面
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top: 0px;
left: 0px;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: %;
text-align: center;
line-height: 15px;
margin-left: 8px;
}
.btn{
position: absolute;
top: %;
width: 30px;
height: 60px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
css页面
$(function () {
var i=;
// 获取图片数量
var img_nums=$(".img li").length;
for (var j=;j<img_nums;j++){
// 创建li标签
$(".num").append("<li></li>")
}
//设置默认选中值
$(".num li").eq().addClass("active")
//手动轮播
$(".num li").mouseover(function () {
//获取当前索引
i = $(this).index();
//先让对应的背景色变红
$(this).addClass("active").siblings().removeClass();
$(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut();
})
//自动轮播
var c=setInterval(GoR,);
function GoR(){
if(i>=img_nums-){
i=-;
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass();
$(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut();
}
function GoL(){
if(i==){
i=img_nums;
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass();
$(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut();
}
//鼠标悬浮在上面是，自动轮播停止
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GoR,);
});
// button 加轮播
$(".right").click(GoR);
$(".left").click(GoL)
})
js页面
17 cookie设置
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script src="../JQuery/jquery.cookie.js"></script>
<script>
$(function() {
$('#btnSet').click(function() {
//设置cookiew
var date = new Date();
//第一个参数是键,第二个参数是值
$.cookie('yk',date.toLocaleTimeString());
});
$('#btnGet').click(function () {
//根据键获取值
$('#textTime').val($.cookie('yk'));
});
});
</script>
</head>
<body>
<input type="button" id="btnSet" value="设置" />
<input type="button" id="btnGet" value="获取" />
<input type="text" id="textTime"/>
</body>
</html>
18 放大镜
18.1 引入jqzoom脚本 和css对象
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../css/jquery.jqzoom.css" rel="stylesheet" />
<script src="../JQuery/jquery-1.7.1.min.js"></script>
<script src="../JQuery/jquery.jqzoom-core.js"></script>
<script>
$(function() {
$(function() {
$('.t1').jqzoom();
});
});
</script>
</head>
<body>
<a class="t1" title="逍遥小天狼" href="../Img/xyxtl.GIF">
<img src="../Img/xyxtlMin.gif"/>
</a>
</body>
</html>
