制作非缘勿扰页面特效
html5d代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>制作非缘勿扰页面特效</title>
<link rel="stylesheet" href="css/style.css" />
<script src="lib/jquery-3.6.0.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 class="one">苏有朋</span> 国产电视剧 <span class="two">2013</span> 连续剧</dd>
<dd>
<span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#"
>点击了解更多
</a>
</dd>
</dl>
<img src="images/btn.gif" />
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
jQuery代码如下：
$(document).ready(function () {
$(".right dt").click(function () {
$("#star,#director,#label,#drama").css({ color: "#FF0099" });
});
$("#director").click(function () {
$("span[title]").css({ fontWeight: "700" });
});
$("#label").click(function () {
$(".one, .two").css({ backgroundColor: "E0F8EA", color: "#10A14B", margin: "2px 8px" });
});
$("img[alt]").click(function () {
alert("您已收藏成功！");
});
});
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
