使用JQuery快速高效制作网页交互特效第六章所有上机

最新推荐文章于 2022-07-06 00:54:47 发布

不觉清倦

最新推荐文章于 2022-07-06 00:54:47 发布

阅读量6.3k

点赞数 4

分类专栏：计算机文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44269168/article/details/94329475

版权

本文详细介绍了使用jQuery进行网页交互特效制作的五个上机实践，包括不同阶段的样式设计与代码实现，帮助读者深入理解并掌握jQuery在动态效果中的应用。

摘要由CSDN通过智能技术生成

上机一

样式

body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}
body{
    font-family: "微软雅黑";
    font-size: 12px;
    line-height: 28px;
}
#book{
    margin: 5px auto 0 auto;
    width: 650px;
    overflow: hidden;
}
.imgLeft{
    float:left;
    width: 210px;
}
.imgLeft img{width: 200px;}
.textRight{
    float: right;
    width: 440px;
}
#book h1{font-size: 16px; line-height: 50px;}
.textRight dl{padding-left: 5em;}
.textRight dl dd{display: none;}
#jdPrice p{ display:inline;}

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <link rel="stylesheet" href="css/bookStyle.css">
</head>
<body>
<section id="book">
    <div class="imgLeft"><img src="Image/store.jpg" alt="岛上书店"></div>
    <div class="textRight">
        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
        <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <div class="price">
            <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
</section>
<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //单击促销，显示隐藏内容
        $("dt").click(function(){
            $("dd").css("display","block");
        });
        $(".intro").css("color","red");
        $("#jdPrice>span").css({"font-size":"24px","color":"red"});
        $("#jdPrice>p").css({"text-decoration":"line-through","color":"#cccccc"});
        $("dl").css("color","red");
        $(".price").css({"background":"#efefef","padding":"5px"});
        $("dl span").css({"background":