制作非缘勿扰页面特效----JQuery

最新推荐文章于 2022-07-07 01:20:07 发布

TuiK

最新推荐文章于 2022-07-07 01:20:07 发布

阅读量5.6k

点赞数 9

分类专栏：笔记案例文章标签： jquery html

本文链接：https://blog.csdn.net/qq_45607259/article/details/107879619

版权

笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

案例

4 篇文章 0 订阅

订阅专栏

我主要用了层次选择器和属性选择器
可以随意选择，方便简单为主
大体CSS格式大家自行构造

网页主体

<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>

script代码

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<script>
		$(function(){
			$("dl>dt").click(function(){
				$("#star,#director,#label,#drama").css({"color":"#FF0099","font-weight":"bold"});
			});
			$("#director").click(function(){
				$("[title='导演']").css("font-weight","bold");
			});
			$("#label").click(function(){
				$("#label+span").css({"background-color":"#E0F8EA","color":"#10A14B","padding-right":"2px","padding-left":"2px","padding-top":"2px","padding-down":"2px"});
				$("#label+span+span").css({"background-color":"#E0F8EA","color":"#10A14B","padding-right":"2px","padding-left":"2px","padding-top":"2px","padding-down":"2px"});
			});
			$("[alt='收藏本片']").click(function(){
				alert("收藏成功！");
			});
		})
	</script>