Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > Hauptteil

javascript实现的在当前窗口中漂浮框的代码_布局与层

WBOY

Freigeben： 2016-05-16 18:32:28

Original

1139 Leute haben es durchsucht

<style> 
.div_float img{width:100px;} 
</style> 
 
 
<div class="div_float" id="div_float"></div> 
<script language="javascript"> 
var oTop=0;//当前窗口的顶部 
var oBottom=0;//当前窗口的底部 
function MyObjectFloatPhotos(_id,_title,_url,_src) { //自定义对象，具体图片信息 
this.id=_id; 
this.title=_title; 
this.url=_url; 
this.src=_src; 
} 
function MyObjectFloatPosition(xon,yon,xPos,yPos,_div,interval) { //浮动层对象 
this.xon=xon; 
this.yon=yon; 
this.xPos=xPos; 
this.yPos=yPos; 
this.div=_div; 
this.interval=interval; //记录重复的键码，用于取消循环事件 
} 
var step = 1; 
var delay = 30; //循环间隔 
var height = 0; 
var Hoffset = 0; 
var Woffset = 0; 
var pause = true; 
function changePosByID(_id) { 
for(var i=0;i <arrayMyObjectFloatPhotos.length;i++) { 
if(_id==arrayMyObjectFloatPhotos[i].id) 
changePosAll(arrayMyObjectFloatPosition[i]); 
} 
} 
function changePosAll(_myObj) { //具体的位置修改方法 
width = document.body.clientWidth; 
height = document.body.clientHeight; 
Hoffset = _myObj.div.offsetHeight; 
Woffset = _myObj.div.offsetWidth; 
_myObj.div.style.visibility = "visible"; 
_myObj.div.style.left = _myObj.xPos + document.body.scrollLeft; 
_myObj.div.style.top = _myObj.yPos + document.body.scrollTop; 
if (_myObj.yon) { 
_myObj.yPos = _myObj.yPos + step; 
} 
else { 
_myObj.yPos = _myObj.yPos - step; 
} 
/*当前窗口中飘动*/ 
if (_myObj.yPos < oTop) { 
_myObj.yon = 1; 
_myObj.yPos = oTop; 
} 
if (_myObj.yPos >= (oBottom - Hoffset)) { 
_myObj.yon = 0; 
_myObj.yPos = (oBottom - Hoffset); 
} 
/*当前窗口中飘动*/ 
if (_myObj.xon) { 
_myObj.xPos = _myObj.xPos + step; 
} 
else { 
_myObj.xPos = _myObj.xPos - step; 
} 
if (_myObj.xPos < 0) { 
_myObj.xon = 1; 
_myObj.xPos = 0; 
} 
if (_myObj.xPos >= (width - Woffset)) { 
_myObj.xon = 0; 
_myObj.xPos = (width - Woffset); 
} 
} 
function start() { //所有浮动层开始漂浮 
createFloatDiv(); 
for(var i=0;i <arrayMyObjectFloatPosition.length;i++) { 
my_setInterval(arrayMyObjectFloatPosition[i].div); 
} 
} 
function my_float_div_hid(hiddivid){ //隐藏方法 
document.getElementById(hiddivid).style.display='none'; 
} 
function my_setInterval(_div){ //设置某个浮动层循环 
for(var i=0;i <arrayMyObjectFloatPosition.length;i++) { 
if(_div.id==arrayMyObjectFloatPosition[i].div.id){ 
arrayMyObjectFloatPosition[i].interval= setInterval('changePos'+arrayMyObjectFloatPhotos[i].id+'()', delay); 
} 
} 
} 
function my_clearInterval(_div){//清除某个浮动层循环 
for(var i=0;i <arrayMyObjectFloatPosition.length;i++) { 
if(_div.id==arrayMyObjectFloatPosition[i].div.id){ 
clearInterval(arrayMyObjectFloatPosition[i].interval); 
} 
} 
} 
var arrayMyObjectFloatPosition= new Array(); 
function createFloatDiv(){//拼接浮动层的html 
for(var i=0;i <arrayMyObjectFloatPhotos.length;i++) { 
var temp_str=''; 
temp_str+='<div id=\'float_div_'+arrayMyObjectFloatPhotos[i].id +'\' style=\'position:absolute; left:311;top:815;visibility:hidden;vertical-align:top;\' onmouseover=\'my_clearInterval(this);\' onmouseout=\'my_setInterval(this);\'align="right">'; 
temp_str+='<div style=\'/*position:absolute;top:-2;right:-2;*/cursor:hand;color:red;font-size:12px;font-weight:bold;text-align:center;border:#7C4707 solid 0px;background-color:#DBE4F9;padding-top:2px;\' onclick=my_float_div_hid(\'float_div_'+arrayMyObjectFloatPhotos[i].id +'\') title=\'关闭窗口\'>关闭</script>

'; temp_str+='

'; temp_str+=''; document.getElementById('div_float').innerHTML = document.getElementById('div_float').innerHTML+temp_str; } for(var i=0;i

<script> var delay = 30; //循环间隔 setInterval('disPosition()', delay); //以下函数为获得当前窗口的可见高度 function disPosition(){ oTop=document.documentElement.scrollTop; oBottom=div_absmiddle.offsetTop*2 + div_absmiddle.offsetHeight - 20 + document.documentElement.scrollTop; } </script>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

javascript

Quelle：php.cn

Vorheriger Artikel：input的focus方法使用_javascript技巧 Nächster Artikel：Jquery cookie操作代码_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...

Aus 2024-04-06 19:25:49

0

1

505

Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...

Aus 2024-04-06 18:16:26

0

1

403

JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

Aus 2024-04-06 15:35:24

0

1

274

Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...

Aus 2024-04-06 14:54:03

0

2

421

Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...

Aus 2024-04-06 12:53:11

0

1

376

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1418676
php入门教程之一周学会PHP

4260217
JAVA 初级入门视频教程

2495708
小甲鱼零基础入门学习Python视频教程

504746
PHP 零基础入门教程

859735

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage