JavaScript第6章上机练习2(使用jQuery美化英雄联盟简介页)上机练习3(制作非缘勿扰页面特效)

首先，上机练习2的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用jQuery美化英雄联盟简介页</title><script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<h1>英雄联盟</h1>
<p id="content">《英雄联盟》，简称LOL。</p>
<p>由<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>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">$(document).ready(function () {$("p").click(function () {$(".txt_box .current").css("background","#6ff");$("p span").css("background","#f9f");$("h1+p").css("background","#ff6");$("p span span").css({"color":"#fff","background":"#f00"});})})
</script>
</body>
</html>

效果图如下：

展开后的效果图为：

其次，上机练习3的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>制作非缘勿扰页面特效</title><style type="text/css">body{margin:5px;}.left {float: left;}.left img:nth-child(1){height: 220px;width: 160px;}.right {float: left;}.right span {padding: 0px 5px;}.right h3{margin: 0px;padding: 0px;}.right p:nth-last-child(2){margin: 9px 0px 5px;}.right p:nth-last-child(1){margin: 5px 0px;}</style><script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="title">
<div class="left"><img src="../image/pic.gif" alt=""><br><br><img src="../image/col.gif" alt="">
</div>
<div class="right"><h3>非缘勿扰</h3><p><span id="a">主演：</span>苏有朋/秦岚/傅艺伟等</p><p><span id="b">导演：</span>赖水清</p><p><span id="c">标签：</span><span class="s">苏有朋</span>国产电视剧 <span class="s">2013</span> 连续剧</p><p><span id="d">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，<br>刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋 <br>西诺的丁娟的嫉恨。。。<a href="">点击了解更多</a></p><p><img src="../image/btn.gif" alt=""></p>
</div>
</div>
<script type="text/javascript">$(document).ready(function () {     //创建文档加载事件$("h3").mouseover(function () {$(this).css("cursor", "pointer");     //自行添加的，题目没要求})$("#b").mouseover(function () {$(this).css("cursor", "pointer");     //自行添加的，题目没要求})$("#c").mouseover(function () {$(this).css("cursor", "pointer");     //自行添加的，题目没要求})$("p").css({"font-size": "13px", "line-height": "18px"});       //自行设置，题目无要求，可忽略$(".right p:nth-last-child(2)").css("line-height","32px");       //自行设置，题目无要求，可忽略//题目要求：$("h3").click(function () {$("span[id]").css({"color": "#ff0099", "font-weight": "bold"});})$("#b").click(function () {$("p:nth-last-child(4)").css("font-weight", "bold");})$("#c").click(function () {$("span[class='s']").css({"background": "#e0f8ea", "color": "#10a14b", "padding": "2px 8px"});})$(".left img").click(function () {alert("您已收藏成功!");})})
</script>
</body>
</html>

效果图如下：
（首先是打开页面的时候）：

接着，点击“非缘勿扰”，选中的字体加粗 —效果图：

然后，点击“导演”，选中的字体显示的 —效果图：

再是，点击“标签”，选中的字体显示的 —效果图：

最后，就是点击“收藏”图片显示的 —效果图：

最后的最后，说个题外话：每次鼠标点击效果图后显示的图片都是正确的，至于为什么截屏后的鼠标不在点上，我也很迷啊哈哈哈哈哈哈哈哈哈哈哈
今天的你，也要加油啊！只要你想努力，任何时候都不晚。

JavaScript第6章上机练习2(使用jQuery美化英雄联盟简介页)上机练习3(制作非缘勿扰页面特效)相关推荐

基于Html+Css+javascript的游戏网页制作（游戏主题）-英雄联盟6页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站 ...
使用JQuery快速高效制作网页交互特效第六章所有上机
上机一样式 body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;} body{font-family: "微软雅 ...
Javascript第六章JavaScript字面量加数组创建对象第三课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
Javascript第六章JavaScript中构造器创建对象第二课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
Javascript第六章JavaScript用new创建对象第一课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
Javascript第五章location对象第五课
ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...
Javascript第五章history对象第四课
ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...
Javascript第五章倒计时第二课
HTML DOM setTimeout() 方法 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM ...
Javascript第五章DOM简介和window对象第一课
更多免费教学文章请关注这里 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 Javascript第五章w ...
Javascript第四章匿名函数第七课
匿名函数的作用: 1.用于回调 2.一次性执行函数 Javascript第四章定义函数的形式.回调函数第五课 https://blog.csdn.net/qq_30225725/article/det ...

JavaScript第6章上机练习2(使用jQuery美化英雄联盟简介页)上机练习3(制作非缘勿扰页面特效)

JavaScript第6章上机练习2(使用jQuery美化英雄联盟简介页)上机练习3(制作非缘勿扰页面特效)相关推荐

最新文章

热门文章