网站右下角浮窗代码(悬浮窗代码)
admin 发布:2022-12-19 21:00 155
今天给各位分享网站右下角浮窗代码的知识,其中也会对悬浮窗代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
浮动窗口的代码 (html/js)
第一种方法:
Html代码
html
head
title浮动窗口/title
link type="text/css" rel="stylesheet" href="css/overflow.css" /
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript" src="js/overflow.js"/script
script type="text/javascript"
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
/script
/head
body
div id="over"
div id="title"span id="t"这只是一个演示标题/spanspan id="close"[ x ]/span/div
div id="content"
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.br/
---This is edited by Alp.
/div
/div
div id="mask" a id="b" href="#"click/a/div
/body
/html
Js代码
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}
css代码
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}
第二种方法:
消息框遮罩层:iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"/iframediv id="show_upload"nothing.../div'
页面加载loading中:div id="body_loading" onClick="loaded();"img src="__PUBLIC__/images/body_load.gif"/div
关闭浮动窗口:a href="javascript:hideupload()"关闭窗口建议用小图片/a
打开浮动窗口:a href="javascript:showupload('admin.php')"打开浮动/a
// 消息框loading
function loading(){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");
o.fadeIn("fast");
}
// 消息框消失
function loaded(){
var o = $('#body_loading');
o.fadeOut("fast");
}
// 隐藏浮动窗口
function hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// 弹出浮动窗口
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var f=$('#show_upload_iframe');
var top = 200;
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded();
o.html(res);
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
if($(document).scrollTop()200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);
}
o.css("top",top+"px");
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});
f.show();
o.show();
}
});
}
求一个右下角的漂浮广告代码?
右下角漂浮广告代码使用方法(一): 将以下代码以**.js文件形式保存,在模板中调用这个js文件即可
(备注该代码的图片大小为250*150 代码里面有参数自己看下就知道了)document.writeln("div id=\"qqaddiv\" style=\"position:absolute; z-index: 100;\" ");
document.writeln("a href=链接地址 target=_blankimg src=图片链接地址 border=0/a");
document.writeln("/div");
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("qqaddiv").style;
adst.top = ( bodyfrm.clientHeight - 150 ) + "px";
adst.left = ( bodyfrm.clientWidth - 250 ) + "px";
function moveR() {
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 150 ) + "px";
adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 250 ) + "px";
}
setInterval("moveR();", 80); 右下角漂浮广告代码使用方法(二): var qq_etewidth = 259;
var qq_eteheight = 158;
var qq_banner_filename = "广告图片链接地址";
var qq_gotoUrl = '广告链接地址';document.write("div id=eteUnionUpFloat style='margin:0px;padding-bottom:300px;z-index: 10;position:absolute;width:"+qq_etewidth+"px;height:"+qq_eteheight+"px;'")
document.write("a href='"+qq_gotoUrl+"' target='_blank'img src='"+qq_banner_filename+"' border='0' style='cursor: hand;' width='"+qq_etewidth+"' height='"+qq_eteheight+"'/a")
document.write("/div")
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("eteUnionUpFloat").style;
adst.top = ( bodyfrm.clientHeight - qq_eteheight ) + "px";
adst.left = ( bodyfrm.clientWidth - qq_etewidth ) + "px";
function moveR() {
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - qq_eteheight ) + "px";
adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - qq_etewidth ) + "px";
}
var objTimer=setInterval("moveR();", 100);function CloseX(){
adst.display='none';
}function ete_closediv()
{
document.getElementById('eteUnionUpFloat').style.visibility='hidden';
if(objTimer) window.clearInterval(objTimer)
}
求段网页右下角漂浮的JS代码,放广告用的!
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title不会被屏蔽的网页右下角漂浮窗口代码/title
FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" /
style type="text/css"
#msg_win{border:1px solid #A67901;background:#EAEAEA;width:300px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:99;}
#msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}
.icos a{float:left;color:#833B02;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;}
.icos a:hover{color:#fff;}
#msg_title{background:#FECD00;border-bottom:1px solid #A67901;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#000;height:25px;line-height:25px;text-indent:5px;}
#msg_content{margin:0px;width:300px;height:300px;overflow:hidden;}
/style
/head
body
p style="height:1000px;"/p
div id="msg_win" style="display:block;top:490px;visibility:visible;opacity:1;"
div class="icos"a id="msg_min" title="最小化" href="javascript:void 0" _fcksavedurl="javascript:void 0"_/aa id="msg_close" title="关闭" href="javascript:void 0" _fcksavedurl="javascript:void 0"×/a/div
div id="msg_title"标题/div
div id="msg_content"
img src="" width="300" height="300" border="0"/
/div
/div
script language="javascript"
var Message={
set: function() {//最小化与恢复状态切换
var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复'];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display =set[2];
this.minbtn.innerHTML =set[3]
this.minbtn.title = set[4];
this.win.style.top = this.getY().top;
},
close: function() {//关闭
this.win.style.display = 'none';
window.onscroll = null;
},
setOpacity: function(x) {//设置透明度
var v = x = 100 ? '': 'Alpha(opacity=' + x + ')';
this.win.style.visibility = x=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
this.win.style.filter = v;
this.win.style.opacity = x / 100;
},
show: function() {//渐显
clearInterval(this.timer2);
var me = this,fx = this.fx(0, 100, 0.1),t = 0;
this.timer2 = setInterval(function() {
t = fx();
me.setOpacity(t[0]);
if (t[1] == 0) {clearInterval(me.timer2) }
},10);
},
fx: function(a, b, c) {//缓冲计算
var cMath = Math[(a - b) 0 ? "floor": "ceil"],c = c || 0.1;
return function() {return [a += cMath((b - a) * c), a - b]}
},
getY: function() {//计算移动坐标
var d = document,b = document.body, e = document.documentElement;
var s = Math.max(b.scrollTop, e.scrollTop);
var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
var h2 = this.win.offsetHeight;
return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
},
moveTo: function(y) {//移动动画
clearInterval(this.timer);
var me = this,a = parseInt(this.win.style.top)||0;
var fx = this.fx(a, parseInt(y));
var t = 0 ;
this.timer = setInterval(function() {
t = fx();
me.win.style.top = t[0]+'px';
if (t[1] == 0) {
clearInterval(me.timer);
me.bind();
}
},10);
},
bind:function (){//绑定窗口滚动条与大小变化事件
var me=this,st,rt;
window.onscroll = function() {
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st = setTimeout(function() {
me.win.style.top = me.getY().top;
me.show();
},600);
};
window.onresize = function (){
clearTimeout(rt);
rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
}
},
init: function() {//创建HTML
function $(id) {return document.getElementById(id)};
this.win=$('msg_win');
var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};
for (var Id in set) {this[Id] = $(set[Id])};
var me = this;
this.minbtn.onclick = function() {me.set();this.blur()};
this.closebtn.onclick = function() {me.close()};
this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
this.minbtn.innerHTML=this.char[0];
this.closebtn.innerHTML=this.char[2];
setTimeout(function() {//初始化最先位置
me.win.style.display = 'block';
me.win.style.top = me.getY().foot;
me.moveTo(me.getY().top);
},0);
return this;
}
};
Message.init();
/script
/body
/html
网站右下角浮窗代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于悬浮窗代码、网站右下角浮窗代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:验证码的表单代码(表单验证码的原理)
- 下一篇:网页弹信息框代码(弹框代码文本框)
相关推荐
- 05-19b站视频推广网站,b站推广平台
- 05-19做网站的公司,做网站的公司哪家好
- 05-19web免费网站,javascript中国免费
- 05-19免费网站排名优化在线,网站免费优化平台
- 05-19百度推广网站,百度推广网站公司
- 05-19网站快速优化排名官网,网站优化找超快排
- 05-19网络推广网站公司,网络推广网站公司排行榜
- 05-19免费网站申请注册,免费网站申请注册流程
- 05-19广告网站留电话,广告网站留电话免验证码
- 05-19seo网站关键词优化哪家好,网站seo关键词优化软件
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接