This article has shared the implementation code of js floating box for your reference. The specific content is as follows
1. Add the following to the page that needs to be added to the floating boxcss code：
<!-- Floating window stylecss begin -->
<style type="text/css">
#msg_win {
border: 1px solid #A67901;
background: #EAEAEA;
width: 240px;
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: #BBDEF6;
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: 5px;
margin-right: 0;
width: 230px;
height: 126px;
overflow: hidden;
}
</style>
<!-- Floating window stylecss end -->
Two.js code(Note: The code is to add the entire page at the end, with the purpose of loading it when the page is loaded)
<!-- Floating windowjs，Must be placed to the end begin-->
<script type="text/javascript">
var Message={
set: function() {//Switching of minimization and recovery status var set= == 1?[0,1,'block',[0],'Minimize']:[1,0,'none',[1],'Expand'];
=set[0];
=set[1];
=set[2];
=set[3]
= set[4];
= ().top;
},
close: function() {//closure = 'none';
= null;
},
setOpacity: function(x) {//Set transparency var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
= x<=0?'hidden':'visible';//IE has bugs where absolute or relative positioning content does not change with parent transparency = v;
= x / 100;
},
show: function() {//Gravely showing clearInterval(this.timer2);
var me = this,fx = (0, 100, 0.1),t = 0;
this.timer2 = setInterval(function() {
t = fx();
(t[0]);
if (t[1] == 0) {clearInterval(me.timer2) }
},10);
},
fx: function(a, b, c) {//Buffer calculation var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;
return function() {return [a += cMath((b - a) * c), a - b]}
},
getY: function() {// Calculate the moving coordinates var d = document,b = , e = ;
var s = (, );
var h = /BackCompat/()?:;
var h2 = ;
return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
},
moveTo: function(y) {//Mobile animation clearInterval();
var me = this,a = parseInt()||0;
var fx = (a, parseInt(y));
var t = 0 ;
= setInterval(function() {
t = fx();
= t[0]+'px';
if (t[1] == 0) {
clearInterval();
();
}
},10);
},
bind:function (){//Binding window scrollbar and size change event var me=this,st,rt;
= function() {
clearTimeout(st);
clearTimeout(me.timer2);
(0);
st = setTimeout(function() {
= ().top;
();
},600);
};
= function (){
clearTimeout(rt);
rt = setTimeout(function() { = ().top},100);
}
},
init: function() {//Create HTML function $(id) {return (id)};
=$('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;
= function() {();()};
= function() {()};
=().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF does not support webdings font =[0];
=[2];
setTimeout(function() {//The first position of initialization = 'block';
= ().foot;
(().top);
},0);
return this;
}
};
();
</script>
<!-- Floating windowjs end-->
Three.html code(Note: This code should be placed at the end of the body)
<!-- Floating windowhtmlCode begin -->
<hr>
<div style="display: block; top: 490px; visibility: visible; opacity: 1;">
<div class="icos">
<a title="Minimize" href="javascript:void 0">_</a><a title="closure" href="javascript:void 0">×</a>
</div>
<div >Equipment operation status--></div>
<div style="overflow: auto; height: 150px; width: 100%; white-space: nowrap">
${ }
</div>
</div>
<!-- Floating windowhtmlCode end -->
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.