Tools

lypeng

146
文章 11
分类 46
记事

分类

生活-[23]Linux-[24]前端-[9]数据库-[16]PHP-[31]git-[7]其他-[6]python-[20]算法-[4]React-Native-[4]中草药-[2]

广告位1

广告位2

首页 / 前端返回列表

春节对联挂起来

阅读：974 发布：2017-01-18 作者：lypeng

<img src="/uploads/image/2017011816445993.jpg" alt="" />

js对联特效，给客户网站做的，给自己网站也挂一个，喜庆，哈哈~真实效果请看网站两侧！

代码如下：

```html
<script src="http://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var duilian = $("div.duilian");
var duilian_close = $("a.duilian_close");
var screen_w = screen.width;
if(screen_w>1024){duilian.show();}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
duilian.stop().animate({top:scrollTop+60});
});
duilian_close.click(function(){
$(this).parent().hide();
return false;
});
});
</script>

<style>
.duilian{top: 60px;position: absolute;width: 123px;overflow: hidden;}
.duilian_left{ left:10px;}
.duilian_right{right:10px;}
.duilian_con{font-size: 37px;writing-mode: tb-rl;width: 1em;font-size: 52px;text-align: center;font-family: microsoft yahei;height: 720px;
padding: 15px 30px 15px 40px;overflow: hidden;background: #dc2323;/* word-spacing: 21px; */letter-spacing: 7px;color: #f3e3c5;border-radius: 8px;}
.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}
</style>
<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>
```

------本文结束感谢阅读------

上一篇：漂亮的音乐播放器-同步显示歌词

下一篇：chrome报错：Provisional headers are shown no-referrer-when-downgrade

© 2011-2026 李永鹏博客粤ICP备2021063288号