jquery对联广告代码_两侧固定的对联广告效果

发布时间:2019-10-16编辑:脚本学堂
一例jquery实现的对联广告代码,兼容IE firefox等各浏览器,本例jquery对联广告代码很简洁,应用在网页中效果不错,相比那些代码繁琐的对联广告,这个算是轻便型的了。

对联广告效果图:

<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>两边固定的对联广告

代码:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
 var window_w=$(window).width();
 if(window_w>1240){$("div.dl_phpernote").show();}
 $("div.dl_phpernote_close").click(function(){
  $(this).prev().animate({height:'0px'},200,function(){$(this).parent().hide();});
  return false;
 });
});
</script>
<style type="text/css">
.dl_phpernote{top:6px;position:fixed;width:120px;overflow:hidden;display:none;border:1px solid #999;text-align:center;background-color:#CCC;display:none;}
.dl_phpernote_left{left:6px;}.dl_phpernote_right{right:6px;}
.dl_phpernote_con{width:100%;height:300px;overflow:hidden;border-bottom:1px solid #999;}
.dl_phpernote_close{width:100%; height:24px;line-height:24px;font-size:13px; color:#555555;cursor:pointer;}
</style>
<div class="dl_phpernote dl_phpernote_left">
 <div class="dl_phpernote_con">对联的内容</div>
    <div class="dl_phpernote_close">关 闭</div>
</div>
<div class="dl_phpernote dl_phpernote_right">
 <div class="dl_phpernote_con">对联的内容</div>
    <div class="dl_phpernote_close">关 闭</div>
</div>
本站是一个php程序员的工作生活笔记,本站包含了php网络编程学习教程,数据库(主要是mysqlaccess数据库)教程,javascript,jquery,div+css,html,windows系统,linux系统的学习笔记和生活经验的积累!
<p style="height:2000px;"></p>
</body>