您的位置:

js脚本浮动窗代码怎么理解,js 浮动

js脚本浮动窗代码怎么理解,js 浮动

更新:

本文目录一览:

浮动窗口的代码 (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();

}

});

}

怎样用javascript实现带关闭窗口的浮动广告

首先浮动的窗口就是一个层,在这个层上放置一个小的层,代表关闭按钮,可以使用背景图片,或者img,用小层装,是为来方便固定位置,在这个小层中可以写js代码,当鼠标点击是获得大层,修改大层的隐藏属性,这样就实现来,整个层的关闭

在网页中插入浮动窗口,js代码或css代码(易看易懂)

给你一段代码,创建了一个大小100*100的浮动窗口,贴着窗口的右边。

css代码:

style type="text/css"

    #my_dialog {

        position: fixed; /*固定定位*/

        right: 0;

        top: 50%; /*贴着右边,垂直位置50%*/

        height: 100px;

        width: 100px; /*尺寸 100 x 100*/

        transform: translate(0, -50%); /*通过位移,保证浮动窗口的垂直居中*/

        box-shadow: 0 0 3px 1px rgba(180, 180, 180, 0.5);

        background-color: white; /*加些背景色和阴影,以便区分*/

    }

/style

html代码:

div id="my_dialog"

    !--窗口内容--

/div

javascript如何实现弹出浮动窗口

html

head

titleJs弹出浮动窗口,支持鼠标拖动和关闭/title

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

script type="text/javascript"

/**

关于一些参数说明:

*bodycontent:要在窗口显示的内容,dom对象

*title:窗口标题,字符串类型

*removeable:窗口能否拖动,布尔类型

*注意:内容窗体的高度是height-30px,请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909",所以你的页面不要再取值为"223238909"的id了,以防js执行出错*/

function createdialog(width,height,bodycontent,title,removeable){

 if(document.getElementById("www_phpstudy_net")==null){

  /*创建窗口的组成元素*/

  var dialog = document.createElement("div");

  var dialogtitlebar= document.createElement("div");

  var dialogbody = document.createElement("div");

  var dialogtitleimg = document.createElement("span");

  var dialogtitle = document.createElement("span");

  var dialogclose = document.createElement("span");

  var closeaction = document.createElement("button");

  /*为窗口设置一个id,id如此怪异是为了尽量避免与其他用户取的id相同而出错*/

  dialog.id = "223238909";

  /*组装对话框标题栏,按从里到外的顺序组装*/

  dialogtitle.innerHTML = title;

  dialogtitlebar.appendChild(dialogtitleimg);

  dialogtitlebar.appendChild(dialogtitle);

  dialogtitlebar.appendChild(dialogclose);

  dialogclose.appendChild(closeaction);

  /*组装对话框主体内容*/

  if(bodycontent!=null){

   bodycontent.style.display = "block";

   dialogbody.appendChild(bodycontent);

  }

  /*组装成完整的对话框*/

  dialog.appendChild(dialogtitlebar);

  dialog.appendChild(dialogbody);

  /*设置窗口组成元素的样式*/

  var templeft,temptop,tempheight//窗口的位置(将窗口放在页面中间的辅助变量)

  var dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串

  templeft = (document.body.clientWidth-width)/2;

  temptop = (document.body.clientHeight-height)/2;

  tempheight= height-30;

 dialogcssText= "position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;";

  dialogbodycssText = "width:100%;background:#ffffff;"+"height:" + tempheight + "px;";

  dialog.style.cssText = dialogcssText;

  dialogtitlebar.style.cssText = "height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;";

  dialogbody.style.cssText  = dialogbodycssText;

  dialogtitleimg.style.cssText = "float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;";

  dialogtitle.style.cssText = "font-size:16px;float:left;display:block;margin:4px;line-height:20px;";

  dialogclose.style.cssText  = "float:right;display:block;margin:4px;line-height:20px;";

  closeaction.style.cssText = "height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;";

  /*为窗口元素注册事件*/

  var dialogleft = parseInt(dialog.style.left);

  var dialogtop = parseInt(dialog.style.top);

  var ismousedown = false;//标志鼠标是否按下

  /*关闭按钮的事件*/       

  closeaction.onclick = function(){

   dialog.parentNode.removeChild(dialog);

  }

  /*实现窗口的移动,这段代码很典型,网上很多类似的代码*/

  if(removeable == true){

   var ismousedown = false;

   var dialogleft,dialogtop;

   var downX,downY;

   dialogleft = parseInt(dialog.style.left);

   dialogtop = parseInt(dialog.style.top);

   dialogtitlebar.onmousedown = function(e){

   ismousedown = true;

   downX = e.clientX;

   downY = e.clientY;

   }

   document.onmousemove = function(e){

    if(ismousedown){

    dialog.style.top = e.clientY - downY + dialogtop + "px";

    dialog.style.left = e.clientX - downX + dialogleft + "px";

    }

   }

   /*松开鼠标时要重新计算当前窗口的位置*/

   document.onmouseup = function(){

    dialogleft = parseInt(dialog.style.left);

    dialogtop = parseInt(dialog.style.top);

    ismousedown = false;

   }

  }

  return dialog; 

 }//end if(if的结束)

}

/script

style

table{background:#b2d235;}

button{font-size:12px;height:23;background:#ece9d8;border-width:1;}

#linkurl,#linkname,#savelink{width:100px;}

/style

/head

body

!-- 显示窗口的地方 --

div id="here"/diva id="clickhere" href="#"点击生成窗口/a

!-- 要嵌入到窗口的内容 --

div id="login" style="display:none;"

 form action="#" method="post" onSubmit="return false;"

  table width="400" height="95"

  tr

   td width="78"链接文字/td

   td width="168"input name="link.name" type="text"//td

   td width="138" id="linktext"/td

  /tr

  tr

   td链接地址/td

   tdinput name="link.url" type="text"//td

   td id="linkurl"/td

  /tr

  tr

   td/td

   tdbutton type="submit" style="float:right;"添加/button/td

   td id="savelink"/td

  /tr

  /table

/form

/div

script type="text/javascript"

var here = document.getElementById("here");

var login = document.getElementById("login");

var clickhere = document.getElementById("clickhere");

clickhere.onclick = function(){

here.appendChild(createdialog(400,95+30,login,"欢迎光临phpstudy",true));

}

/script

/body

/html

JS网页中的浮动窗口代码?

script

function scrolls(){

var advobj=document.getElementById("adv");

advobj.style.top=100+document.documentElement.scrollTop+"px";

}

window.onscroll=scrolls;

function winclose(){

var advobj=document.getElementById("adv");

advobj.style.display="none";

}

/script

body

!--随滚动条移动的浮动窗口############################--

div id="adv" style=""

img src="图片路径"/

div id="close" onclick="winclose()"关闭/div

/div

div id="header"iframe src="header.html" height="155px" width="960px" frameborder="0"scrolling="no"/iframe/div

/body

js脚本浮动窗代码怎么理解,js 浮动

本文目录一览: 1、浮动窗口的代码 (html/js) 2、怎样用javascript实现带关闭窗口的浮动广告 3、在网页中插入浮动窗口,js代码或css代码(易看易懂) 4、javascript如何

2023-12-08
悬浮窗代码js,windows悬浮窗

本文目录一览: 1、网站悬浮窗代码js控制修改 2、求网站jq右侧客服悬浮窗代码 3、一段悬浮窗的JS代码,在火狐浏览器中没有悬浮效果! 4、JavaScript,点击按钮怎么弹出悬浮窗口啊 5、JS

2023-12-08
js实现浮动窗体实例(网站浮动飘窗js)

本文目录一览: 1、浮动窗口的代码 (html/js) 2、js css 动态悬浮窗 怎么做 3、在网页中插入浮动窗口,js代码或css代码(易看易懂) 4、javascript如何实现弹出浮动窗口

2023-12-08
js实现侧悬浮浮动实例代码(前端 浮动)

本文目录一览: 1、求个左下角JS广告悬浮代码? 2、求一个能用的右侧浮动JS代码 3、JS网页中的浮动窗口代码? 4、浮动窗口的代码 (html/js) 求个左下角JS广告悬浮代码? 漫游于网络之间

2023-12-08
js左浮动代码,网页设计左浮动代码

本文目录一览: 1、js左浮动代码急 2、浮动窗口的代码 (html/js) 3、求高手指点,网页超过某指定的高度high后,加载运行某JS浮动广告代码,在左侧位置浮动显示的方法? js左浮动代码急

2023-12-08
js图片随机飘浮代码(js浮动代码)

本文目录一览: 1、求上下浮动的图片在指定的区域内随浏览器上下滚动的js代码 2、跪求一段图片全屏浮动的JS 代码! 3、求JS代码。按开始,图片随机滚动;按结束,显示随机滚动的其中一张图片。 4、怎

2023-12-08
js浮动客服代码演示地址大全,js浮动客服代码演示地址大全下

本文目录一览: 1、这是一段在线客服JS代码它是右边浮动的如何改让它左浮动? 2、求一个能用的右侧浮动JS代码 3、浮动窗口的代码 (html/js) 4、jQuery实现的网页左侧在线客服效果代码

2023-12-08
js导航漂浮代码(html漂浮代码)

本文目录一览: 1、求段网页右下角漂浮的JS代码,放广告用的! 2、求一段JS广告底部漂浮代码 3、浮动窗口的代码 (html/js) 求段网页右下角漂浮的JS代码,放广告用的! !DOCTYPE h

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
网页两侧悬浮广告js代码(js底部悬浮广告代码)

本文目录一览: 1、求一个页面上漂浮着两个浮动广告的js代码,就是左右两个类似春联的条形广告,能跟随着页面上下拉动 2、求JS代码,悬浮广告,停在网页右侧的! 3、求一个页面上漂浮着两个浮动广告的js

2023-12-08
让网页动起来的js,怎么让网页自动滑动

本文目录一览: 1、要使用js或者css3做一个网页动画,代码怎么打? 2、js怎么能让进度条动起来一点点减少 3、如何让网页中的JS函数自动执行? 4、js css 动态悬浮窗 怎么做 5、如何让网

2023-12-08
js代码强力去除动态广告,清除广告代码

2022-11-25
js代码中script,js代码中的问号是什么意思

本文目录一览: 1、javascript中script的SRC属性 2、JS代码里加载script代码,并隐藏其内容怎么弄呢? 3、使用javascript必须使script标签吗 javascrip

2023-12-08
顶漂js代码,js购物车代码

2022-11-23
js定义新窗口样式(js定义新窗口样式怎么设置)

本文目录一览: 1、求 JS 点击打开新窗口HTML代码! 2、怎么用js弹出一个新窗口 3、JS 打开新窗口的方法,求助 4、JS 打开新窗口 5、急用:网页设计:如何用JS实现:单击按钮就新打开一

2023-12-08
js脚本编程之实战一(js脚本代码大全)

本文目录一览: 1、怎么学好js? 2、JS编程是什么意思? 3、用javascript脚本语言编写一个 计算器计算加减乘除 ? 谢谢,很急!大家帮帮忙呀!!! 4、如何编写一个自动登录的js脚本 怎

2023-12-08
js对联广告滚动代码可关闭,js对联广告滚动代码可关闭吗

本文目录一览: 1、js网页两侧广告弹出滚动对联代码 2、JS带关闭按钮随屏幕滚动的对联广告 3、可关闭两边飘浮对联广告代码jquery特效宽屏显示 4、js 代码,随页面滚动而滚动的浮动广告效果(带

2023-12-08
js脚本跳转网页(js脚本怎么跳转指定代码)

本文目录一览: 1、用js跳转和301跳转的区别是什么? 2、js脚本中如何实现页面间的跳转? 3、js如何实现页面跳转 4、使用js脚本带参数跳转页面为什么跳不了? 5、js跳转到新页面搜索引擎能识

2023-12-08
三指滑动脚本源码js(滑动脚本代码)

本文目录一览: 1、求做一个按键精灵鼠标上下滑动的脚本 2、手机app滑动轮播原生js怎么写 3、谁给我发一下让屏幕上下不停滑动的auto.js的脚本? 求做一个按键精灵鼠标上下滑动的脚本 UserV

2023-12-08
页面滚动和关闭按钮怎么配合代码,按键精灵让网页滚动

2022-11-24