js跟随滚动条滚动浮动代码

 更新时间:2009年12月31日 19:53:39   作者:  
js跟随滚动条滚动浮动代码,对于firefox不兼容。
复制代码 代码如下:

var str="客服";
var objFT=new FloatT("FloatMenu1",str,942,137,125,200,80,10);
objFT.FloatRun();


//js跟随滚动条滚动 浮动
//pObjName:html 元素ID
//pText:html 元素内容
//其它自己看
function FloatT(pObjName,pText,pstmnLEFT,pstmnGAP1,pstmnGAP2,pstmnBASE,pstmnActivateSpeed,pstmnScrollSpeed)
{
var FloatMenu;
var stmnLEFT = pstmnLEFT;
var stmnGAP1 = pstmnGAP1;
var stmnGAP2 = pstmnGAP2;
var stmnBASE = pstmnBASE;
var stmnActivateSpeed = pstmnActivateSpeed;
var stmnScrollSpeed = pstmnScrollSpeed;

this.FloatRun=function(pObjName)
{
var newDiv=document.createElement("div");
newDiv.id=pObjName;
newDiv.innerHTML=pText;
newDiv.style.position="absolute";
document.body.appendChild(newDiv);
FloatMenu=document.getElementById(pObjName);
FloatMenu.style.display=="";
FloatMenu.style.top = document.documentElement.scrollTop + stmnBASE+"px";

FloatMenu.style.left = stmnLEFT+"px";
RefreshStaticMenu();
}

RefreshStaticMenu=function()
{
var stmnStartPoint,stmnEndPoint,stmnRefreshTimer;

stmnStartPoint = parseInt(FloatMenu.style.top, 10);
stmnEndPoint = document.documentElement.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;

if(stmnStartPoint != stmnEndPoint)
{
stmnScrollAmount = Math.ceil(Math.abs(stmnEndPoint - stmnStartPoint) / 15 );
FloatMenu.style.top = parseInt(FloatMenu.style.top, 10) + ((stmnEndPoint<stmnStartPoint) ? -stmnScrollAmount : stmnScrollAmount)+"px";
stmnRefreshTimer = stmnScrollSpeed;
}
else
{
stmnRefreshTimer = stmnActivateSpeed;
}
setTimeout("RefreshStaticMenu();", stmnRefreshTimer);
}
}

相关文章

  • 一个js拖拽的效果类和dom-drag.js浅析

    一个js拖拽的效果类和dom-drag.js浅析

    最近完成了一个Drag类,可以实现指定对象的拖拽效果。
    2010-07-07
  • 在Html中使用Requirejs进行模块化开发实例详解

    在Html中使用Requirejs进行模块化开发实例详解

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发
    2016-04-04
  • JavaScript canvas实现跟随鼠标事件

    JavaScript canvas实现跟随鼠标事件

    这篇文章主要为大家详细介绍了JavaScript canvas实现跟随鼠标事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JavaScript事件委托的技术原理探讨示例

    JavaScript事件委托的技术原理探讨示例

    使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上
    2014-04-04
  • JS 毫秒转时间示例代码

    JS 毫秒转时间示例代码

    毫秒转时间的方法有很多,在本文将为大家介绍下js中是如何实现的,感兴趣的朋友可以参考下
    2013-09-09
  • ES6 Generator基本使用方法示例

    ES6 Generator基本使用方法示例

    这篇文章主要介绍了ES6 Generator基本使用方法,结合实例形式分析了ES6 Generator基本功能、使用方法与操作注意事项,需要的朋友可以参考下
    2020-06-06
  • js仿微博实现统计字符和本地存储功能

    js仿微博实现统计字符和本地存储功能

    这篇文章主要介绍了js仿微博实现统计字符和本地存储功能的相关资料,需要的朋友可以参考下
    2015-12-12
  • axios学习教程全攻略

    axios学习教程全攻略

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,下面这篇文章主要给大家介绍了axios学习教程的相关资料,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-03-03
  • ES6中的箭头函数实例详解

    ES6中的箭头函数实例详解

    这篇文章主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 微信小程序实现保存图片到相册功能

    微信小程序实现保存图片到相册功能

    项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。这篇文章主要介绍了微信小程序实现保存图片到相册功能,需要的朋友可以参考下
    2018-11-11

最新评论