JS实现简单易用的手机端浮动窗口显示效果

本文实例讲述了射流研究…实现简单易用的手机端浮动窗口显示效果。分享给大家供大家参考，具体如下：

html:

样式类型='text/css ' .fdBonTel { width :100%；高度：53px位置：固定；背景技术# 0052ae文本对齐：居中；左转：0底部：0;z指数：999;}.fdOnline {后台： URL(索引/图片/在线。巴布亚新几内亚)无重复；宽度宽度：255像素宽度：181像素位置：固定；左侧：50%;边距-左侧：-128像素；前：40%；z指数：999;边框半径： 15pxbox-shadow: 0 0 20px rgba(10，2，4，0.75)；}.fdOnline .fdOClose { width :44 pxh8 :44 px显示：块；边距-top :-17px；右边距：-6px；}.fdOnline .fdOTel { background: # CF3宽度宽度：127像素高度：58 px显示：块；页边距-顶部：123 px}.fdOnline .fdOOn {背景： # 036宽度宽度：128像素高度：58 px显示：块；页边距-顶部：96 px}/style div class=' fdBonTel ' img src=' http : index/images/fdtel。gif ' usemap=' # Maps ' map name=' Maps ' id=' Maps ' area shape=' rect ' coords=' 2，2，79，52 ' onClick=' openZoosUrl()；'area shape='rect' coords='77，2，166，52 ' href=' tel:0855-8253310 ' area shape=' rect ' coords=' 166，4，242，51 ' onClick=' openZoosUrl()；'区域形状='rect '坐标='248，5，318，53 ' OnClick=' OpenZoosurl()；'/map/div class=' fdOnline ' id=' fdOnline ' a href=' # # # ' class=' fdOClose f _ r ' onclick=' closeOnline()；'img src=' http : index/images/close BTN。png ' width=' 44 ' height=' 44 '/a a href=' # ' class=' fdOTel f _ l '/a href=' # ' class=' fdOOn f _ r '/a/div js:

//JavaScript文档文档。writeln(' style type=\ ' text/CSS \ ')；document.writeln(' .fdBonTel { width :100%；高度：53px位置：固定；背景技术# 0052ae文本对齐：居中；左转：0底部：0;z指数：999;}');document.writeln(' .fdOnline {后台： URL(索引/图片/在线。巴布亚新几内亚)无重复；宽度宽度：255像素宽度：181像素位置：固定；左侧：50%;边距-左侧：-128像素；前：40%；z指数：999;边框半径： 15pxbox-shadow: 0 0 20px rgba(10，2，4，0.75)；}');document.writeln(' .fdOnline .fdOClose { width :44 pxh8 :44 px显示：块；边距-top :-17px；右边距：-6px；}');document.writeln(' .fdOnline .fdOTel { width:127px高度：58 px显示：块；页边距-顶部：123 px}');document.writeln(' .fdOnline .fdOOn { width:128px高度：58 px显示：块；页边距-顶部：96 px}');文件。writeln('/style ')；文件。writeln(' div class=\ ' fdBonTel \ ')；文件。writeln(' img src=\ ' index/images/fdtel。gif ' usemap=\ ' # Maps \ ')；document.writeln('地图名称=\ '地图id=\ '地图\ ' ');文件。writeln(' area shape=\ ' rect ' coords=\ ' 2，2，79，52 ' OnClick=\ ' OpenZoosurl()；\'');文件。writeln(' area shape=\ ' rect ' coords=\ ' 77，2，166，52 ' href=\ ' tel :0855-8253310 \ ')；文件。writeln(' area shape=\ ' rect ' coords=\ ' 166，4，242，51 ' OnClick=\ ' OpenZoosurl()；\'');文件。writeln(' area shape=\ ' rect ' coords=\ ' 248，5，318，53 ' OnClick=\ ' OpenZoosurl()；\'');文件。writeln('/map ')；文件。writeln('/div ')；文件。writeln(' div class=\ ' fdOnline ' id=\ ' fdOnline \ ')；文件。writeln(' a href=\ ' # # # \ ' class=\ ' fdOClose f _ r ' onclick=\ ' closeOnLine()；\ ' img src=\ '索引/图像/closebtn。png ' width=\ ' 44 ' height=\ ' 44 \ '/a ')；文件。writeln(' a href=\ ' # # # \ ' class=\ ' fdOTel f _ l \ '/a ')；文件。writeln(' a href=\ ' # # # \ ' class=\ ' FDoon f _ r \ '/a ')；文件。writeln('/div ')；函数showOnline(){ if(document。getelementbyid(' FDonline '){ if(document。getelementbyid(' fdOnline ')。风格。display=' none '){文档。getelementbyid(' fdOnline ')。风格。display=' block} } }函数closeOnline(){ document。getelementbyid(' fdOnline ')。风格。显示='无'；setInterval(chkSWT，30000)；};$(function(){ setInterval(showOnline，30000)；});效果图：

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript遍历算法与技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》和0103010

希望本文对JavaScript编程有所帮助。