小菜鸟的弹窗博客

最新推荐文章于 2023-11-03 11:51:56 发布

思绪压身

最新推荐文章于 2023-11-03 11:51:56 发布

阅读量111

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_48227004/article/details/107887433

版权

这周练习了一个弹窗广告的小项目。
一.body里的内容

  <dl>
  	<dt ><img src="images/text.gif"  /></dt>
    <dd>分享到：<img src="images/iocns.gif"  /></dd>
  </dl>

ps:使用无序列表初步将需要的元素显示
二.css代码

*{padding:0px;margin:0px;font-size:12px;}
a{
    color:#000;
    text-decoration:none;
}
ul{list-style:none;}
dl,dt,dd{
    display:block;
}
dl{
    clear:both;
    height:30px;
    width:670px;
    line-height:30px;
}
dl dt{
    width:100px;
    padding-left:10px;
    float:left;
}
dl dd{
    float:left;
}
dl dd a{margin:3px;}
dl dd.more{
    float:right;
    margin-right:10px;
}

三.JS的代码


        $(function(){
        //点击分享链接 将另外一种图片显示
            $("img:eq(1)").click(function(){
                $("img:eq(0)").show();
            });
            //点击弹出的图片 再把它隐藏
            $("img:eq(0)").click(function(){
                $("img:eq(0)").hide();
            });
        })