项目一(使用jQuery美化英雄联盟简介页)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用jQuery美化英雄联盟简介页 </title>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/2book.js"></script></head>
<body>
<h1>英雄联盟</h1>
<p> 《英雄联盟》，简称LOL。</p>
<p id="content">
由<strong>Riot Games </strong>开发，为3D竞技场战游戏，其
<span>主创团队由实力强劲的
<strong>魔兽争霸</strong>
系列游戏多人<span>即时对战</span>自定义地图开发团队
</span>...
<a href="#">更多详情</a>
</p>
<h2>目录</h2>
<ul class="txt_box">
<li class="current">开发团队</li>
<li>游戏周边</li>
<li>游戏介绍</li>
<li>配置需求</li>
<li>游戏背景</li>
</ul>
</body>
</html>
js
$(function(){
$("h1+p").css("background","yellow");
$("#content span").css("background","#FF3333");
$("#content>span>span").css("background","#B8B8B8");
$(".current").css("background","#FF00CC");
});
效果
项目
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>制作非缘勿扰页面特效 </title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/3book.js"></script>
</head>
<body>
<div class='main' >
<div class='left'>
<img src="../images/pic.gif" />
<br/><br/>
<img src="../images/col.gif" alt="收藏本片"/>
</div>
<div class='right'>
<dl>
<dt>非缘勿扰</dt>
<dd><span id="star">主演：</span>苏有朋/秦岚/傅艺伟等</dd>
<dd><span id='director'>导演：</span><span title="导演">赖水清</span></dd>
<dd><span id='label'>标签：</span><span>苏有朋</span> 国产电视剧 <span>2013</span> 连续剧 </dd>
<dd><span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></dd>
</dl>
<img src="../images/btn.gif"/>
</div>
</div>
</body>
</html>
js
$(function(){
$("dt").click(function(){ //点击<dt>非缘勿扰</dt> 显示id的颜色
$("dd span[id]").css({"color":"red","font-size":"15px","font-weight":"bold"}); //dd下的里面的id
//});
$("dd span[title]").css({"color":"#000000","font-size":"15px","font-weight":"bold"});
$("dt").click(function() {//添加点击显示效果
//$("#label~span").css({"color":" #00FF00","font-size":"15px","font-weight":"bold"});
});
});
});
项目三(隔行变色的商品列表)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>隔行变色的商品列表</title>
<link rel="stylesheet" href="css/product.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/product.js"></script>
</head>
<body>
<div class="contain">
<table border="0" width="100%" cellspacing="0">
<tr class="t-head">
<th width="50%">商品</th>
<th width="10%">单价</th>
<th width="10%">数量</th>
<th>操作</th>
</tr>
<tr>
<td>
<img src="images/f1.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤波点印花毛衣</a>
</td>
<td>180.0</td>
<td>3</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f2.jpg" width="50" height="50"/>
<a href="">预售太平洋女装连衣裙</a>
</td>
<td>765.0</td>
<td>4</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f3.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤红色小外套</a>
</td>
<td>456.0</td>
<td>2</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
<tr>
<td>
<img src="images/f4.jpg" width="50" height="50"/>
<a href="">漫巴森秋装新款套头衫</a>
</td>
<td>140.0</td>
<td>1</td>
<td><a href="javascript:void(0);" id="del">删除</a></td>
</tr>
</table>
</div>
</body>
</html>
js
$(function(){
$("table tr:even").css("background","#FFFF33");//双
$("table tr:odd").css("background","#FFFFFF");
});
css
*{padding:0;margin:0;}
.contain{width:100%;margin:0px auto;}
tr{text-align:center;}
th{line-height:45px;background:#0000ff; color: #ffffff;}
td{border-bottom:1px #d7d7d7 solid;}
td,td a{padding:8px 0;color:#666;font-size:14px;}
td img{vertical-align:middle;}
td img,td a{display:inline-block;margin-right:8px;}
结果
项目四
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全网热播视频</title>
<link rel="stylesheet" href="css/play.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/dianshi.js"></script></head>
<body>
<section id="play">
<h1>全网热播视频</h1>
<ul>
<li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
<li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
<li>
<ol>
<li><span>3</span>三八线<p>加入看单</p></li>
<li><span>4</span>吉详天宝<p>加入看单</p></li>
<li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
<li><span>6</span>仙剑云之凡<p>加入看单</p></li>
<li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
<li><span>8</span>琅琊榜<p>加入看单</p></li>
<li><span>9</span>那年青春我们正好<p>加入看单</p></li>
<li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
</ol>
</li>
</ul>
</section>
</body>
</html>
js
$(function(){
$("ul>li:last").css("background","#D3D3D3");
$("span:lt(3)").css("background","#F0E68C");//小于3，从0开始
$("span:gt(2)").css("background","#606060");//大于2
$("span:lt(2)").css("margin-left","20px");
$("h1:lt(2)").css("margin-left","20px");
$("img:lt(2)").css("margin-left","20px");
//$("p").css("display", "block");
$("ol li").mouseover(function(){
$(this).find("p").show();
});
$("ol li").mouseout(function(){//鼠標移出
$(this).find("p").hide();
});
//添加两个箭头的效果
$(" ol li:eq(0),ol li:eq(2),ol li:eq(3),ol li:eq(4)").css({
"background-image": "url(images/orange.jpg)",
"background-repeat": "no-repeat",
"background-position": "right -2px"
});
$(" ol li:eq(1),ol li:eq(5),ol li:eq(6),ol li:eq(7)").css({
"background-image": "url(images/green.jpg)",
"background-repeat": "no-repeat",
"background-position": "right -2px"
});
});
效果
鼠标移动到目录那里显示（没调好 有大神指导一下？）
扫一扫
1903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
