大家可以下载附件以便学习,也可看下面的步骤!!!大家一起学习,一起进步!加油
首先,在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
分享到:
相关推荐
4. **响应式设计**:考虑到商城首页通常需要适应不同设备和屏幕尺寸,广告图片的设计可能涉及到媒体查询(`@media`)和响应式框架(如Bootstrap),以确保在各种设备上都能正常显示。 5. **图片懒加载**:为了优化...
全屏图片广告随机漂浮可点击关闭的jQuery特效是一种常见的网页动态效果,它可以在网站页面上创建引人注意的广告展示。此特效的核心是利用jQuery库的灵活性和强大的DOM操作功能,来实现图片的随机位置显示、鼠标悬停...
提到的"jquery 广告轮显插件"是基于easyslide这个基础框架构建的。easyslide是一款轻量级的jQuery插件,专门用于创建滑动图片展示。它提供了丰富的配置选项,包括切换速度、过渡效果、自动播放等,让开发者可以根据...
标题中的“漂亮的放GG代码的广告框架.rar”很可能是指一个用于在网站上展示广告的JavaScript(JS)特效框架,主要用于放置Google AdSense(通常简称为GG)广告。这个框架可能是为了美化广告展示,使其与网站设计更加...
1. 广告加载:使用jQuery的`$(document).ready()`函数确保在页面加载完成后执行广告展示的脚本。 2. 动画效果:jQuery的`.fadeIn()`和`.fadeOut()`等方法可以用来创建平滑的广告显示和隐藏效果,提升用户体验。 3. ...
该插件主要基于jQuery框架实现,通过简单的配置即可实现在网页中插入全屏漂浮式的广告。同时,插件支持点击关闭功能,使得用户可以根据自己的需求选择是否查看广告,大大提升了用户体验。 #### 二、技术背景 #####...
这个特效基于JavaScript库jQuery实现,jQuery是一个轻量级、高性能的JavaScript框架,极大地简化了DOM操作、事件处理和动画效果。同时,该特效还涉及到CSS样式和网页布局技术,使得广告图片能够适应全屏展示,并且...
这个场景中,"jQuery+Cookie关闭广告" 的标题表明我们要探讨的是如何利用 jQuery 框架和 Cookie 技术来实现一个功能,允许用户关闭页面上的广告,并且在用户下次访问时仍能记住这一设置。 首先,jQuery 是一个轻量...
这种广告形式通过自动切换、滑动或其他动画效果,使页面内容更加生动活泼。在本篇文章中,我们将深入探讨jQuery如何实现幻灯片广告及其相关知识点。 ### jQuery 概述 jQuery 是一个广泛使用的 JavaScript 库,它...
在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等...在实际开发中,不断学习和探索新的库和框架,能帮助我们提高工作效率,创建出更加符合用户需求的网页界面。
无缝滚动通常用于新闻资讯或者产品展示,使得内容在页面上无停顿地连续滚动,提供流畅的浏览体验。实现这一效果,开发者可以利用jQuery的定时器函数`setInterval()`配合`animate()`方法,控制内容块在到达边界时进行...
在实际应用中,jQuery框架和幻灯片切换效果的组合不仅限于网站设计,也可应用于移动应用、桌面应用的界面设计,甚至是数字广告和互动展示等领域。通过深入研究这些实例源码,你不仅可以提升自己的jQuery技能,还能对...
"202.jpg"可能是一个图片资源,用于美化页面或作为广告的一部分。"说明read me.txt"是一个说明文件,可能包含了项目安装、使用或修改的指南。"css"和"images"是两个目录,分别存放CSS样式文件和图像资源,它们是构建...
在这个“Jquery浮动窗与页面定时跳转”的主题中,我们将深入探讨如何在ASP.NET环境中利用jQuery来创建浮动窗口,并在其中实现定时跳转功能,同时也会涉及在框架外的页面定时跳转。 首先,让我们理解jQuery浮动窗口...
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
在网页设计中,jQuery库因其简洁的API和强大的功能,被广泛用于实现各种动态效果,包括我们今天要讨论的主题——jQuery缩略图广告效果。这种效果通常用于网站的首页或者产品展示区,能够吸引用户的注意力,提升用户...
`jquery.liMarquee.js`作为基础框架,开发者还可以根据实际需求进行二次开发,例如添加动画过渡效果、支持触屏设备的滑动交互等,以增强用户体验。 总的来说,`jquery.liMarquee.js`是Web开发者实现滚动特效的得力...
**基于JQuery实现页面定时弹出广告**\n\n在网页设计中,有时我们需要实现一些交互功能,如定时弹出广告,以吸引用户的注意力。本文将详细介绍如何利用JQuery库来实现在用户打开页面后,经过特定时间间隔自动弹出广告...
在IT行业中,jQuery框架是网页开发中的一个关键工具,它简化了JavaScript的使用,使得复杂的DOM操作、事件处理和动画效果变得更为便捷。本主题聚焦于利用jQuery实现的两种流行广告效果,这两种效果主要涉及图片滚动...