`
soleares
  • 浏览: 14661 次
  • 性别: Icon_minigender_1
  • 来自: 天津
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery页面广告框架

    博客分类:
  • AJAX
阅读更多
大家可以下载附件以便学习,也可看下面的步骤!!!大家一起学习,一起进步!加油


首先,在html的body中写入以下标签

<div id="newnotice">
        <p><span class="title">标题</span> <span id="bts">
        <label class="button" id="tomin" title="最小化">-</label>
        <label class="button" id="tomax" title="最大化">+</label>
        <label class="button" id="toclose" title="关闭">x</label> </span></p>
        <div id="noticecon">
            你想要展示的东西!!!
        </div>
    </div>


其样式有css控制,可在css文件中写入,也可在html中写入。由个人爱好和习惯而定
  
#newnotice {
	/*display:none;*/
	width: 250px; /*height:22px;*/;
	border: solid #9BDF70 1px;
	background-color: #F0FBEB;
}
#newnotice p {
	font-size: 12px;
	margin: 1px;
	padding: 0px 2px 0px 5px;
	background-color: #C2ECA7;
	color: #666666;
	height: 20px;
	line-height: 20px;
}
#newnotice p .title {
	float: left;
}
#newnotice p #bts {
	display: block;
	float: right;
	width: 48px;
	height: 15px;
	/*border:#000000 solid 1px;*/
}
#newnotice p #bts .button {
	display: block;
	float: left;
	width: 15px;
	height: 15px;
	line-height: 15px;
	cursor: pointer;
	/*border:#000000 solid 1px;*/
}

#newnotice div {
	font-size: 12px;
	margin: 1px;
	padding: 0px 5px 0px 5px;
	background-color: #FFFFFF;
	color: #999999;
	height: 200px;
	line-height: 20px;
}


这是页面广告的核心部分,由“没剑(C-R团队之一)”开发。
在这段代码写入js文件之前,一定要先导入jquery.js!
/*任意位置浮动固定层*/
/*没剑(http://regedit.cnblogs.com) 08-03-11*/
/*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/
/*调用:
1 无参数调用:默认浮动在右下角
$("#id").floatdiv();

2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");

3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});
以上参数,设置浮动层在left 10个像素,top 10个像素的位置
*/
jQuery.fn.floatdiv=function(location){
	//ie6要隐藏纵向滚动条
	var isIE6=false;
	if($.browser.msie && $.browser.version=="6.0"){
		$("html").css("overflow-x","auto").css("overflow-y","hidden");
		isIE6=true;
	};
	$("body").css({margin:"0px",padding:"0 10px 0 10px",
		border:"0px",
		height:"100%",
		overflow:"auto"
	});
	return this.each(function(){
		var loc;//层的绝对定位位置
		if(location==undefined || location.constructor == String){
			switch(location){
				case("rightbottom")://右下角
					loc={right:"0px",bottom:"0px"};
					break;
				case("leftbottom")://左下角
					loc={left:"0px",bottom:"0px"};
					break;
				case("lefttop")://左上角
					loc={left:"0px",top:"0px"};
					break;
				case("righttop")://右上角
					loc={right:"0px",top:"0px"};
					break;
				case("middle")://居中
					var l=0;//居左
					var t=0;//居上
					var windowWidth,windowHeight;//窗口的高和宽
					//取得窗口的高和宽
					if (self.innerHeight) {
						windowWidth=self.innerWidth;
						windowHeight=self.innerHeight;
					}else if (document.documentElement&&document.documentElement.clientHeight) {
						windowWidth=document.documentElement.clientWidth;
						windowHeight=document.documentElement.clientHeight;
					} else if (document.body) {
						windowWidth=document.body.clientWidth;
						windowHeight=document.body.clientHeight;
					}
					l=windowWidth/2-$(this).width()/2;
					t=windowHeight/2-$(this).height()/2;
					loc={left:l+"px",top:t+"px"};
					break;
				default://默认为右下角
					loc={right:"0px",bottom:"0px"};
					break;
			}
		}else{
			loc=location;
		}
		$(this).css("z-index","9999").css(loc).css("position","fixed");
		if(isIE6){
			if(loc.right!=undefined){
				$(this).css("right","18px");
			}
			$(this).css("position","absolute");
		}
	});
};


使用这个代码调用上面那个框架,还有button的监听注册!
$("#newnotice").floatdiv("");
	$(window).load(function(){
		$("div[id=newnotice]").slideDown("slow");
	})
	$("label[id=tomin]").click(function(){
		$("div[id=noticecon]","div[id=newnotice]").slideUp();
	});

	$("label[id=tomax]").click(function(){
		$("div[id=noticecon]","div[id=newnotice]").slideDown();
	});

	$("label[id=toclose]").click(function(){
		$("div[id=newnotice]").hide();
	});
  • 大小: 9.3 KB
分享到:
评论

相关推荐

    jQuery广告图片各大商城首页流行通栏广告图片-20130702

    4. **响应式设计**:考虑到商城首页通常需要适应不同设备和屏幕尺寸,广告图片的设计可能涉及到媒体查询(`@media`)和响应式框架(如Bootstrap),以确保在各种设备上都能正常显示。 5. **图片懒加载**:为了优化...

    全屏图片广告随机漂浮可点击关闭jQuery特效.zip

    全屏图片广告随机漂浮可点击关闭的jQuery特效是一种常见的网页动态效果,它可以在网站页面上创建引人注意的广告展示。此特效的核心是利用jQuery库的灵活性和强大的DOM操作功能,来实现图片的随机位置显示、鼠标悬停...

    jquery 广告轮显 图片切换插件.rar

    提到的"jquery 广告轮显插件"是基于easyslide这个基础框架构建的。easyslide是一款轻量级的jQuery插件,专门用于创建滑动图片展示。它提供了丰富的配置选项,包括切换速度、过渡效果、自动播放等,让开发者可以根据...

    漂亮的放GG代码的广告框架.rar

    标题中的“漂亮的放GG代码的广告框架.rar”很可能是指一个用于在网站上展示广告的JavaScript(JS)特效框架,主要用于放置Google AdSense(通常简称为GG)广告。这个框架可能是为了美化广告展示,使其与网站设计更加...

    全屏广告展示源代码 html+jquery

    1. 广告加载:使用jQuery的`$(document).ready()`函数确保在页面加载完成后执行广告展示的脚本。 2. 动画效果:jQuery的`.fadeIn()`和`.fadeOut()`等方法可以用来创建平滑的广告显示和隐藏效果,提升用户体验。 3. ...

    jquery全屏漂浮广告插件,可点击关闭

    该插件主要基于jQuery框架实现,通过简单的配置即可实现在网页中插入全屏漂浮式的广告。同时,插件支持点击关闭功能,使得用户可以根据自己的需求选择是否查看广告,大大提升了用户体验。 #### 二、技术背景 #####...

    jQuery全屏广告图片拖拽预览特效.zip

    这个特效基于JavaScript库jQuery实现,jQuery是一个轻量级、高性能的JavaScript框架,极大地简化了DOM操作、事件处理和动画效果。同时,该特效还涉及到CSS样式和网页布局技术,使得广告图片能够适应全屏展示,并且...

    jQuery+Cookie关闭广告

    这个场景中,"jQuery+Cookie关闭广告" 的标题表明我们要探讨的是如何利用 jQuery 框架和 Cookie 技术来实现一个功能,允许用户关闭页面上的广告,并且在用户下次访问时仍能记住这一设置。 首先,jQuery 是一个轻量...

    jquery 幻灯片广告

    这种广告形式通过自动切换、滑动或其他动画效果,使页面内容更加生动活泼。在本篇文章中,我们将深入探讨jQuery如何实现幻灯片广告及其相关知识点。 ### jQuery 概述 jQuery 是一个广泛使用的 JavaScript 库,它...

    jquery 弹出窗口简单例子

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等...在实际开发中,不断学习和探索新的库和框架,能帮助我们提高工作效率,创建出更加符合用户需求的网页界面。

    jQuery特效代码

    无缝滚动通常用于新闻资讯或者产品展示,使得内容在页面上无停顿地连续滚动,提供流畅的浏览体验。实现这一效果,开发者可以利用jQuery的定时器函数`setInterval()`配合`animate()`方法,控制内容块在到达边界时进行...

    多种jquery框架和幻灯片切换效果实例源码

    在实际应用中,jQuery框架和幻灯片切换效果的组合不仅限于网站设计,也可应用于移动应用、桌面应用的界面设计,甚至是数字广告和互动展示等领域。通过深入研究这些实例源码,你不仅可以提升自己的jQuery技能,还能对...

    0顶js+css+jquery实现的文字推荐广告代码

    "202.jpg"可能是一个图片资源,用于美化页面或作为广告的一部分。"说明read me.txt"是一个说明文件,可能包含了项目安装、使用或修改的指南。"css"和"images"是两个目录,分别存放CSS样式文件和图像资源,它们是构建...

    Jquery浮动窗与页面定时跳转

    在这个“Jquery浮动窗与页面定时跳转”的主题中,我们将深入探讨如何在ASP.NET环境中利用jQuery来创建浮动窗口,并在其中实现定时跳转功能,同时也会涉及在框架外的页面定时跳转。 首先,让我们理解jQuery浮动窗口...

    jQuery的水平滑动企业大事记时间轴代码.zip

    开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...

    jQuery缩略图广告效果.rar

    在网页设计中,jQuery库因其简洁的API和强大的功能,被广泛用于实现各种动态效果,包括我们今天要讨论的主题——jQuery缩略图广告效果。这种效果通常用于网站的首页或者产品展示区,能够吸引用户的注意力,提升用户...

    jquery多风格多功能滚动特效代码插件jquery.liMarquee.js下载.zip

    `jquery.liMarquee.js`作为基础框架,开发者还可以根据实际需求进行二次开发,例如添加动画过渡效果、支持触屏设备的滑动交互等,以增强用户体验。 总的来说,`jquery.liMarquee.js`是Web开发者实现滚动特效的得力...

    基于JQuery实现页面定时弹出广告

    **基于JQuery实现页面定时弹出广告**\n\n在网页设计中,有时我们需要实现一些交互功能,如定时弹出广告,以吸引用户的注意力。本文将详细介绍如何利用JQuery库来实现在用户打开页面后,经过特定时间间隔自动弹出广告...

    jQuery---2款流行的广告效果

    在IT行业中,jQuery框架是网页开发中的一个关键工具,它简化了JavaScript的使用,使得复杂的DOM操作、事件处理和动画效果变得更为便捷。本主题聚焦于利用jQuery实现的两种流行广告效果,这两种效果主要涉及图片滚动...

Global site tag (gtag.js) - Google Analytics