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

最新推荐文章于 2021-01-29 23:57:46 发布

weixin_34411563

最新推荐文章于 2021-01-29 23:57:46 发布

阅读量1.8k

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/xtdxs/p/6613900.html

版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作非缘勿扰页面特效 </title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
 <style type="text/css">
 .main{
     width:500px;
    }
.left{
    width:200px;
    float:left;
}
.right{
    width:300px;
    float:left;
}
 </style>
 
<script type="text/javascript">
    $(document).ready(function(){
        $('dt').click(function(){
            $('strong').css("color","#FF0099");
        });


        $(".dy").click(function(){
            $('.dy+span').css("font-weight","bold");
        });


        $('#bq').click(function(){
            $("#bq+span>a:even").css("background-color", "#E0F8EA").css("color", "#10A14B").css("padding", "2px");
        });

        $("img[alt='收藏本片']").click(function(){
            alert("您已收藏成功！");
        });

    });

</script>
</head>
<body>
      <div class='main' >
         <div class='left'>
            <img src="images/pic.gif" />
            <br/><br/><br/><br/>
            <img src="images/col.gif" alt="收藏本片"/>
        </div>
        <div class='right'>
            <dl>
                <dt><b>非缘勿扰</b></dt>
                <dd>
                <p>
                    <strong>主演：</strong><span>苏有朋/秦岚/傅艺伟等</span>
                </p>
                <p>
                    <strong class='dy'>导演：</strong><span>赖水清</span>
                </p>
                <p>
                    <strong id='bq'>标签：</strong><span><a>苏有朋</a> <a> 国产电视剧</a>  <a>2013</a> <a>连续剧</a></span>
                </p>
                <p>
                    <strong>剧情：</strong><span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></span>
                </p>
                </dd>
            </dl>
            <img src="images/btn.gif"/>
        </div>
     </div>
    
</body>
</html>

制作非缘勿扰页面特效.html

转载于:https://www.cnblogs.com/xtdxs/p/6613900.html

weixin_34411563

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery - 制作非缘勿扰页面特效

<!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>...
复制链接

扫一扫