jquery实现个人博客网站对联广告的方法

最新推荐文章于 2022-05-10 19:11:04 发布

Y_R_Q

最新推荐文章于 2022-05-10 19:11:04 发布

阅读量202

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/Y_R_Q/article/details/107174451

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端实现广告联效果

就这么简单

<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<style>
/*下面是对联广告的css代码*/
.duilian{top:100px;position:absolute; width:102px; overflow:hidden; display:none;}
.duilian_left{ left:6px;}
.duilian_right{right:6px;}
.duilian_con{border:red solid 1px; width:100px; height:300px; overflow:hidden;}
.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}
</style>
<body>
<div class="duilian duilian_left">
     <div class="duilian_con">对联的内容</div>
     <a href="#" class="duilian_close">X关闭</a>
</div>
<div class="duilian duilian_right">
     <div class="duilian_con">对联的内容</div>
     <a href="#" class="duilian_close">X关闭</a>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
    var duilian = $("div.duilian");
    var duilian_close = $("a.duilian_close");
    var window_w = $(window).width();
    if(window_w>1000){duilian.show();}
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        duilian.stop().animate({top:scrollTop+100});
    });
    duilian_close.click(function(){
        $(this).parent().hide();
        return false;
    });
});
</script>
</html>