登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

网站悬浮窗的设计  

2011-01-22 10:46:34|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在开发网站过程中,需要实现一个网站的悬浮窗设计,收集相关的JavaScript脚本文件,同时结合网站开发的实际样式,整理出网站悬浮窗的设计代码。

网站悬浮窗的设计采用脚本调用的方式,脚本代码如下:

var xPos = 0;//起始点横坐标
var yPos = 0; //起始点纵坐标
var step = 1;//悬浮窗移动的步长
var delay = 30; //函数调用时间间隔
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;//悬浮传纵向移动方向的标志
var xon = 0;//悬浮传横向移动方向的标志
var pause = true;
var interval;
img1.style.top = yPos;//img1为显示悬浮窗的div控件的id
function changePos()
{
 width = 1003;
 height = 600;
 Hoffset = img1.offsetHeight;
 Woffset = img1.offsetWidth;
 img1.style.left = xPos + document.body.scrollLeft;
 img1.style.top = yPos + document.body.scrollTop+150;
 if (yon)
  {yPos = yPos + step;}
 else
  {yPos = yPos – step;}
 if (yPos < 0)
  {yon = 1;yPos = 0;}
 if (yPos >= (height – Hoffset))
  {yon = 0;yPos = (height – Hoffset);}
 if (xon)
  {xPos = xPos + step;}
 else
  {xPos = xPos – step;}
 if (xPos < 0 )
  {xon = 1;xPos = 0;}
 if (xPos >= (width – Woffset))
  {xon = 0;xPos = (width – Woffset);   }
 }
 
 function start()
  {
   img1.visibility = “visible”;
  interval = setInterval(‘changePos()’, delay);
 }
 function pause_resume()
 {
  if(pause)
  {
   clearInterval(interval);
   pause = false;}
  else
  {
   interval = setInterval(‘changePos()’,delay);
   pause = true;
   }
  }
 start();

将以上脚本保存为.js文件,在网站的页面上调用即可,引用代码如下:脚本文件名为js.js

<div id=”img1″ style=”z-index:100; left:0px; width:59px; position:absolute; top:0px; height:61px; visibility:visible;”>

悬浮窗显示的内容,一般为图片形式的href链接

</div>

<script type=”text/javascript” src=”js/js.js”></script>

  评论这张
 
阅读(1556)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018