• 76324

    文章

  • 707

    评论

  • 18

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>
一:需要先引入juery然后写入下面代码
<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>

二: 写入下面div块
<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>

三: 写入下面对联的样式
<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>

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

个人博客网站兔小白个人博客模板

兔小白个人博客博客模板.来自网站 http://www.liangzl.com 模板分享这是一个可爱型的个人模板.特别适合小女孩,小女生使用,当然男孩子也是可以用的啦哈哈.喜欢的朋友们可以下载使用哦...

怎样制作个人博客网站

我的个人博客网站的html模板是从网络上下载的。下载的时候是没有什么页面的,经过自己的修改和加工之后,添加很多的页面,并且自己做了留言板和评论框。因为我并不是专业做web前端的,所以技术有限。哈哈只能做成这样子了...

个人博客网站倾听世界个人博客模板html模板

倾听世界个人博客模板.来自网站 http://www.liangzl.com 模板分享这个模板非常的大气,上档次.整个页面的内容非常的充实.并且有照片墙,可以喜欢摄影的人的非常好的选择!这个网站是全页面,喜欢的朋友可以下载使用...

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客