jquery实现对联广告的方法
本文实例讲述了jquery实现对联广告的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.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>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
本文主要给大家分享的是使用jQuery实现html元素可拖拽的效果，十分的炫酷，代码也相对比较简单，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要介绍了30个经典的jQuery代码开发技巧,包含了常见属性、方法、元素等的使用技巧,非常具有实用价值,需要的朋友可以参考下2014-12-12
花了几个小时用jqury写的分页效果实现，功能基本实现需要再封装下 呵呵～～2009-11-11
jquery animate 动画效果使用说明，需要的朋友可以参考下。2009-11-11
很多朋友都反应jquery mobile自带的图标真的是少之又少，另外我也觉得图标偏小(系统自带的是18*18的），于是琢磨着如何自定义按钮图标，下面小编把我的方法分享在脚本之家平台供大家借鉴2015-11-11
下面小编就为大家带来一篇JQuery 获取Dom元素的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
jQuery的ajax方法非常好用，这么好的东西，你想拥有一个属于自己的ajax么？接下来，我们来自己做一个简单的ajax吧2017-01-01
jQuery是一种流行的JavaScript库，可以轻松地在网页中插入图片和文字。通过使用jQuery的插入功能，您可以在网页上动态地添加内容，从而提高用户体验。本文将介绍如何使用jQuery在图片和文字中插入内容，并提供一些实用的代码示例。2023-06-06
在网上经常会看到一些很长的网页会延迟加载其中的图片，我认为这是一种按需分配的做法，网页只为那些想继续浏览网页的人加载后面的图片，在不影响用户体验的前提下，最大程度地减少服务器负担和流量2012-06-06
这篇文章主要介绍了jQuery1.9+中删除了live以后的替代方法 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论