jquery两边飘浮的对联广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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 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>广告代码

<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>

</head>

<body>

<!--下面是对联广告的html代码结构-->

<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>

<p style="height:1000px;"></p>

</body>

</html>

下载地址:http://www.huiyi8.com/sc/27855.html(转载请注明此处)

时间: 2024-10-10 12:19:20

jquery两边飘浮的对联广告的相关文章

JQuery对联广告

html--------------------------------------------------------------------------------------<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src="../js/jquery-3.2.1.min.js"></script> <link

带关闭按钮的跟随窗口移动对联广告代码

http://www.xuecss3.com/qttx-25-2991-1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

JS写出登陆遮罩层+浮动对联广告

用JS写出 遮罩层登陆框 和 对联广告 并自动跟随滚动条 滚动 保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. ================> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

我们这里有仿百度联盟对联广告实现代码

仿百度联盟对联广告源代码展示,主要使用现代浏览器都支持的position:fixed属性,并专门针对ie6做了最大限度的兼容性处理 <style type="text/css"> 02 *{margin:0;padding:0;} 03 body{height:2000px;} 04 .floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px; _p

无法屏蔽的左右漂浮图片对联广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无法屏蔽的左右漂浮图片对联广告丨河北塑胶地

无法屏蔽的图片对联广告

<!DOCTYPE html><html><head><title>无法屏蔽的左右漂浮图片对联广告</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/c

可关闭与展开的对联广告代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

蓝色经典的对联广告代码

<html><head><title>蓝色经典的对联广告代码</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><table><tr><td height="1000"></tr></t

对联广告2

<html><head><title>对联广告</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body style="margin:0px;"><div align="center">  <center>