可以滚动任意对象的代码.符合web标准,支持IE,Firefox

最新推荐文章于 2024-08-10 14:37:46 发布
最新推荐文章于 2024-08-10 14:37:46 发布
阅读量1.2k 收藏
点赞数
分类专栏： HTML/CSS/JAVASCRIPT 文章标签： ie web firefox javascript html function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DoItPerfect/article/details/1842620
版权

前阵子帮佳讯做项目用到双向滚动广告,偶从网上找个改改就凑合用,但在FF下无效.前几天抽了点时间把js代码重新修改下,现在支持Firefox,符合web标准,也更加容易使用了.好东东要分享!!

HTML测试代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 滚动对象,要啥滚都行. </ title >
< script  type ="text/javascript"  src ="float.js" ></ script >
< style  type ="text/css" >
html, body { height:1000px; }
#leftDiv, #centerDiv, #rightDiv
{
    /*距离顶部位置,必须*/
    top:100px;
    /*绝对定位,必须*/
    position:absolute;
    width:100px;
    height:200px; 
    background-color:#FC6;
}
#leftDiv { left:1%; }
#centerDiv { left:47%; }
#rightDiv { left:87%; }
 </ style >
</ head >
< body >
< div  id ="leftDiv" >
左侧广告内容 </ div >
< div  id ="centerDiv" >  中间  </ div >
< div  id ="rightDiv"   >< span  title ="点击偶关闭!"  style ="display:block; cursor:pointer; text-align:right;"  onclick ="this.parentNode.style.display='none';" > X </ span > 右侧广告内容 </ div >
< img  id ="testImg"   style ="top:150px; left:380px;position:absolute;border:none;"  src ="yourImagePath"   />
< input  id ="testButton"  style ="position:absolute; top:200px; left:280px;"  type ="button"  value ="偶也来滚滚.." />
</ body >
</ html >

 Javascript

 float.js

/*
 *title:垂直滚动对象,可以指定要滚动的对象,经测试支持IE6,Firefox2.0.
 *date:2007-10-25
 *author:DoItPerfect
 *blog:http://blog.csdn.net/DoItPerfect
 *ps.:滚动函数heartbeat从blueidea论坛获得并修改.
 */
     // 对象距离顶部高度
     var  lastScrollY = 0 ;
     // 移动
     function  heartbeat()
     {
        var diffY;
        //IE
        if (document.documentElement && document.documentElement.scrollTop)
            diffY = document.documentElement.scrollTop;
        //FireFox
        else if (document.body)
             diffY = document.body.scrollTop
        else
        {
            //其他浏览器
        }
        
        percent=.1*(diffY-lastScrollY); 
        if(percent>0)
            percent=Math.ceil(percent); 
        else 
            percent=Math.floor(percent);

        //Change top attribute
        for(var i=0;i<arguments.length;i++)
        {
            var floatDiv=document.getElementById(arguments[i]);
            var top;
            //IE
            if(floatDiv.currentStyle)
                top=parseInt(floatDiv.currentStyle.top);
            else
            //FireFox
                top=parseInt(document.defaultView.getComputedStyle(floatDiv,null).getPropertyValue("top"));
                
            floatDiv.style.top=top+percent+"px";
        }
        lastScrollY+=percent; 
    }
     function  moveObject()
     {
        var args=[];
        for(var i=0;i<arguments.length;i++)
        {
            args.push(arguments[i]);
        }
        return window.setInterval(function(){heartBeat.apply(this,args);},1);
    }
     // 调用方法:moveObject("object1的ID","object2的ID",...);
    moveObject( " leftDiv " , " rightDiv " , " centerDiv " , " testImg " , " testButton " );

使用方法:

1.要滚动的对象必须设置样式(style)的top属性(单位为px,其他单位可能有问题),和设置为绝对定位(position:absolute;)

2.调用函数moveObject();参数类型为字符串,是对象的id.可以任意多个.//直接改js代码最后一句就好了.

Update:

昨天发现将此方法应用到使用比较多控件的ASPX页面会出错,解决办法是不要在<head>标签下加入javascript,改成在要滚动的html元素的下方再加入<javascript src="float.js" type="text/javascript"></script>
DoItPerfect
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rollingNumber:rolling number card jquery plugin 一个滚动数字牌jquery插件
07-11
由于基于jQuery，`rollingNumber`插件通常能在大多数现代浏览器中良好运行，包括Chrome、Firefox、Safari、Edge和IE9及以上版本。然而，对于大量数据的滚动或低性能设备，可能需要考虑优化，比如限制滚动的频率，...
浅谈JavaScript窗体Window.ShowModalDialog使用
11-20
然而，需要注意的是，由于这些方法是IE特有的，它们在其他浏览器（如Firefox、Chrome、Safari、Opera等）中可能不被支持或行为不一致。因此，在现代Web开发中，开发者通常会使用CSS和JavaScript库（如jQuery UI、...
以滚动任意对象的代码.符合web标准,支持IE,Firefox
weixin_30267697的博客
06-04 61
发表于 @ 2007年10月25日　02:27:00 前阵子帮佳讯做项目用到双向滚动广告,偶从网上找个改改就凑合用,但在FF下无效.前几天抽了点时间把js代码重新修改下,现在支持Firefox,符合web标准,也更加容易使用了.好东东要分享!! HTML测试代码 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran...
下拉菜单，手动滑动，滚动内容，滑动条控制内容展示，scrollview，scrollbar
小花猫哒小栗子
09-19 882
一、需要引入的js文件 /* 用途项目：自定义滚动条实现 */ (function(win, doc, $){ // 定义的滚动条的构造函数 function CusScrollBar(options) { // 函数的调用 this._init(options); } // 对象的合并 $.extend(CusScrollBar.prototype, {...
web前端-3. CSS的基础知识
weixin_51077152的博客
08-17 471
3.1.css的介绍 1、css定义 CSS:Cascading Style Sheets 层叠样式表 级联样式表 简称 样式表 2、css的作用 1）实现了内容与表现的分离 内容：HTML 表现：css 2）提高了代码的可重用性和可维护性 3、css文件后缀 .css 4、css语法 属性:属性值; 属性:属性值; 属性:属性值; html的属性：属性 = "属性值" 5、css的特点 1）继承性 后代元素可以继承父元素的样式 2）层叠性 一个元素可以设置多个样式 当样式冲突时，看优
经典的从左往右的滚动的代码建议Ie 和火狐
xiongleiyaya的专栏
05-13 367
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准www.yonfa365.com.jpg" /> www.yonfa365.com.jpg" /> www.yonfa365.com.jpg" /> www.yon
一行代码解决各种IE兼容问题
热门推荐
手掌日月摘星辰
07-06 1万+
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 前端面试秘籍,欢迎star! 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 1.<!Doctypehtml> 2.<htmlxmlns=http://www.w3.org/...
『总结』web前端开发代码块
小僵尸喵喵喵
05-18 2277
『总结』web前端开发代码块 HTTPStatusCode 常见的状态码: HTTP: Status 200 – 服务器成功返回网页 HTTP: Status 404 – 请求的网页不存在 HTTP: Status 503 – 服务不可用 详解: 说明: HTTP Status 1xx (临时响应) ->表示临时响应并需要请求者继续执行操作的状态代码。 详细代码及说明...
新版火狐 拖 功能_Firefox 3：新功能，新功能和新功能
culi4814的博客
08-03 3708
新版火狐 拖 功能Welcome To Firefox 3! The third major release of the much-acclaimed Firefox web browser is out. Although slightly belated, this release actually is another important chapter in open source hi...
javascript图片连续无间隙水平向左滚动，无间隙水平向右滚动，符合W3C Web标准
编码改变世界
12-29 906
javascript图片连续无间隙水平向左滚动，无间隙水平向右滚动，符合W3C Web标准 很久以前就有这个问题，总是找不到通用的，或比较简单的“图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准”，这次又遇上一个这样的问题，找了老半天终于从网上找到一个不错的，看了下代码，思路很简单，但代码太多，通用性也不行，于是乎，自己又发明 了两个函数，用起来感觉还真不错，与大家共享：
计算机基础练习题-答案.pdf
10-06
8. **浏览器**：常见的Web浏览器有Internet Explorer（IE）、Maxthon（傲游）、Firefox（火狐）、Opera等。 9. **PowerPoint**：在PowerPoint中，幻灯片放映有多种模式，包括讲演者放映、观众自行浏览和展台浏览。 ...
window.showModalDialog()返回值的学习心得总结
09-04
这个函数在IE4及以上版本的Internet Explorer中得到支持，但在其他浏览器如Firefox、Chrome等中，它的行为可能不一致或者被废弃。 ### `window.showModalDialog()` 的基本用法 调用语法如下： ```javascript var ...
Tomcat漏洞
lhdbk______的博客
08-06 499
常见中间件漏洞
Mozilla Firefox侧边栏和垂直标签在131 Nightly版本中开始试用
weixin_41446370的博客
08-09 251
如果您是网络扩展开发人员，并且您的扩展使用了侧边栏 API 或使用了标签页，Mozila希望您能在启用新的侧边栏和垂直标签页后对其进行测试。虽然网络扩展 API 没有与这些功能相关的更改，但这是一个很好的机会来预测更新后的用户界面会带来哪些不可预见的问题。新的侧边栏可以让你快速交叉引用你最喜欢的所有工具，无论是手机上的标签、你最喜欢的扩展，还是手头主要任务的书签。点击侧边栏图标，就可以展开垂直标签。开发团队设计了新的侧边栏和垂直标签体验，使上下文切换和多任务处理这两个核心浏览工作流程更加顺畅。
Firefox滚动条在Win10和Win11下表现不一致问题？
amoureux555的博客
08-09 390
Firefox滚动条在Win10和Win11下表现不一致问题？win10和win11 打开一个网站样式不一样，兼容不一样。Firefox 滚动条粗细不一样问题
Day-16 SpringBoot原理
u012011912的博客
08-06 1062
SpringBoot的自动配置就是当Spring容器启动后，一些配置类、bean对象就自动存入到了IOC容器中，不需要我们手动去声明，从而简化了开发，省去了繁琐的配置操作。比如：我们要进行事务管理、要进行AOP程序的开发，此时就不需要我们再去手动的声明这些bean对象了，我们直接使用就可以从而大大的简化程序的开发，省去了繁琐的配置操作。运行SpringBoot启动类大家会看到有两个CommonConfig，在第一个CommonConfig类中定义了一个bean对象，bean对象的名字叫reader。
# 利刃出鞘_Tomcat 核心原理解析（三）
段子手168的博客
08-09 843
# 利刃出鞘_Tomcat 核心原理解析（三） 11. Tomcat专题 - Tomcat架构 - 启动流程 12. Tomcat专题 - Tomcat架构 - 启动流程 - 涉及组件介绍 13. Tomcat专题 - Tomcat架构 - 启动流程 - 源码跟踪 14. Tomcat专题 - Tomcat架构 - 启动流程 - 跟踪源码 - Debug 15. Tomcat专题 - Tomcat架构 - 请求处理流程 16. Tomcat专题 - Tomcat架构 - 请求处理流程 - 源码跟踪
Apple Maps现在可在Firefox和Mac版Edge浏览器中使用
最新发布
weixin_41446370的博客
08-10 177
Apple Maps最初只能在 Windows 版 Safari、Chrome 浏览器和 Edge 浏览器上运行，现在已在其他浏览器上运行，包括 Mac 版 Firefox 和 Edge。经过十多年的等待，Apple Maps于今年 7 月推出了新版地图应用的测试版，但只能在有限的浏览器中使用，在周五的更新中，更多的浏览器可以访问Apple Maps了。与其他浏览器一样，新支持的浏览器也具有相同级别的功能，包括搜索和熟悉的地图界面，你可以在 Apple Maps 应用程序中找到这些功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值