当前窗口中漂浮框的js代码-可见效果
来源:互联网 发布:ios10屏幕录像软件 编辑:程序博客网 时间:2024/05/16 06:52
<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=/'关闭窗口/'>关闭</div>';
temp_str+='<div><a href=/''+arrayMyObjectFloatPhotos[i].url+'/' title=/''+arrayMyObjectFloatPhotos[i].title +'/' target=/'_blank/'><img border=/'0/' src=/''+arrayMyObjectFloatPhotos[i].src +'/' alt="" /></a></div>';
temp_str+='</div>';
document.getElementById('div_float').innerHTML = document.getElementById('div_float').innerHTML+temp_str;
}
for(var i=0;i <arrayMyObjectFloatPhotos.length;i++) {
var _left=0;
if(i==0)_left=20;
else _left = document.body.clientWidth/(arrayMyObjectFloatPhotos.length-1)*i;
var _MyObjectFloatPosition=new MyObjectFloatPosition(0,0,_left,document.body.clientHeight,document.getElementById('float_div_'+arrayMyObjectFloatPhotos[i].id),null);
arrayMyObjectFloatPosition.push(_MyObjectFloatPosition);
}
}
/*以下代码主要是设置要有几个浮动框*/
try
{
var arrayMyObjectFloatPhotos= new Array();
var _MyObjectFloatPhotos=new MyObjectFloatPhotos('','','','');
_MyObjectFloatPhotos=new MyObjectFloatPhotos('75229','迎世博','#','http://images.cnblogs.com/adminlogo.gif’);
arrayMyObjectFloatPhotos.push(_MyObjectFloatPhotos);
function changePos75229() {changePosByID('75229');}
_MyObjectFloatPhotos=new MyObjectFloatPhotos('75230','迎世博','#','http://images.cnblogs.com/adminlogo.gif');
arrayMyObjectFloatPhotos.push(_MyObjectFloatPhotos); //创建新的浮动层实体,并放入数组
function changePos75230() {changePosByID('75230');} //未了使浮动框不相互影响,必须设定不同的 interval 值
start(); //开始执行
}
catch(err)
{}
var Sys = {}; //以下代码是判断在火狐中将其隐藏,还有些问题,说是不符合规范但我始终找不出
var ua = navigator.userAgent.toLowerCase();
if (document.getBoxObjectFor){
Sys.firefox = ua.match(/firefox//([/d.]+)/)[1]
if(Sys.firefox){
document.getElementById('div_float').style.display='none';
}
}
</script>
<!--漂浮框-->
<div id="div_absmiddle" style="padding-right: 10px; margin-top: -75px; padding-left: 10px; left: 0px; padding-bottom: 10px; width: 75px; line-height: 20px; padding-top: 10px; position: fixed; top: 50%; height: 150px"> </div><!--该div是绝对居中的-->
<script>
setInterval('disPosition()', delay); //以下函数为获得当前窗口的可见高度
function disPosition(){
oTop=document.documentElement.scrollTop;
oBottom=div_absmiddle.offsetTop*2 + div_absmiddle.offsetHeight - 20 + document.documentElement.scrollTop;
}
</script>
当前窗口中漂浮框的js代码
- 当前窗口中漂浮框的js代码-可见效果
- 微信开发中当前网页窗口的JS代码
- js漂浮窗口广告
- js图片漂浮效果
- 漂浮广告的JS代码(经典)
- JS漂浮广告代码
- js漂浮广告代码
- 漂浮广告js代码
- JS漂浮广告代码
- JS漂浮广告代码
- 关闭当前窗口js代码
- 漂浮窗口的实现
- js实现漂浮提示窗口
- UGUI的漂浮效果
- js实现广告漂浮效果
- js效果之漂浮广告
- javascript广告漂浮效果代码
- 【js特效】一款不错的漂浮悬浮效果
- 将军之死——《红颜乱》
- Submit Reporting Table Error : Object reference not set to an instance of an object.
- 实战: SOLR的分布式部署(复制)CollectionDistribute 快照分发 (精简版)
- 值得学习的产品
- 改变EDIT框字体大小
- 当前窗口中漂浮框的js代码-可见效果
- 驱动世界级制造 用友U9V2.0盛大发布
- 在vim中使用make
- 一个典型的配置文件
- vb 锁定鼠标到某一位置
- ACE 安装指南及示例
- Win32 结构化异常处理(SEH)探秘
- 让你更爱自己的十大超级自我暗示(10 Powerful Self-affirmations to Love Yourself More)
- sql 时间格式转换