`

随屏滚动测试

jQueryAntJavaScriptHTML 
阅读更多

 <script type="text/javascript" src="http://gooday.cn/js/jquery/jquery-1.3.1.min.js"></script>
 

 <style>
        #show{width:30px;height:200px;background:red;overflow:hidden;}
  </style>


 </head>

 <body style="height:2000px;width:800px;">

 

  <div id="show">0</div>


<script>
        var a = 0 ;
        jQuery(window).scroll(function(){
                var top =  parseInt( $( document ).scrollTop() );
                a++;
                function ant(){
                     var a1 = jQuery("#show").html();
                     jQuery("#show").html(a1 + ", "+ a);
                     jQuery("#show").queue( [ ] ).animate({marginTop:top},1000);
                }
                window.setTimeout(ant,200); 
       });
</script>

分享到：
| IOC控制反转
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js自适应屏幕滚动效果

    因为经常拿网上的插件，感觉起来很多插件都是先做一部分 然后经过调试测试完善，看了下他们代码感觉自己也可以...自适应浏览器 上下滚动 效果，运行起来还看不出有问题，在IE7以上跟谷歌上能正常运行，其他浏览器未测试

    链接三方QQ随屏幕滚动而滚动的QQ对话框

    在IT行业中，与“链接三方QQ随屏幕滚动而滚动的QQ对话框”相关的技术主要涉及到网页交互设计、JavaScript编程、CSS3以及可能的第三方QQ API整合。以下是对这些知识点的详细说明： 1. **网页交互设计**：这种效果是...

    随滚动条滚动的两侧的层

    标题“随滚动条滚动的两侧的层”暗示了我们即将探讨的是网页布局中一种特定的效果，通常称为“固定定位”或者“侧边栏固定显示”。这种设计使得页面的某些元素（比如导航菜单或广告栏）在用户滚动页面时始终保持在...

    红色界面QQ界面的随屏滚动QQ客服代码.zip

    标题中的“红色界面QQ界面的随屏滚动QQ客服代码”指的是一个特定的网页设计效果，它结合了QQ的视觉风格和一种动态的客服系统。这个效果允许一个客服对话框随着用户在网页上的滚动而始终保持在屏幕可见范围内，提高了...

    qq客服随滚动条滚动

    【标题】"qq客服随滚动条滚动"是一个关于网页设计和JavaScript实现的专题，主要涉及到的是如何让网页上的QQ客服窗口随着用户滚动页面而始终保持在视野范围内。这通常是为了提供更好的用户体验，确保用户在浏览网站时...

    随滚动条滚动代码.rar

    6. **响应式设计**：考虑到不同设备的屏幕大小和滚动行为可能不同，实现滚动效果时需要考虑响应式设计，确保在手机和平板等移动设备上也能正常工作。 7. **兼容性检查**：最后，别忘了进行浏览器兼容性测试，确保...

    漂浮在右侧随页面滚动的手机屏幕样式在线客服

    【标题】：“漂浮在右侧随页面滚动的手机屏幕样式在线客服”是一种创新的网页设计技术，它将传统的在线客服窗口模拟成手机屏幕的样式，让访客在浏览网站时可以方便地与客服人员进行实时交流。这种设计既美观又实用，...

    漂浮在右侧随页面滚动的手机屏幕样式在线客服.zip

    标题 "漂浮在右侧随页面滚动的手机屏幕样式在线客服.zip" 暗示了这是一个实现特定网页交互效果的资源包，它包含了一个能够悬浮在页面右侧并随着用户滚动页面而始终保持可见的手机屏幕样式在线客服系统。这种设计通常...

    div不随滚动条的滚动而动 可以兼容到IE6

    这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置，提供持续的可访问性。在本文中，我们将探讨如何实现这种效果，并确保其兼容到早期版本的Internet Explorer（IE6）。 首先，我们需要理解CSS中的`...

    JS实现兼容性较好的随屏滚动效果

    4. **兼容性测试**：在不同的浏览器中测试随屏滚动效果，确保它在每种浏览器中的表现都是一致的，对发现的兼容性问题进行修复。 ### 结语 随屏滚动效果的实现是现代网页设计的一个重要组成部分，它不仅可以使页面...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...

    android 菜单滚动 内容跟随滚动实例

    9. **适配不同设备和方向**：考虑到不同屏幕尺寸和设备方向，需要确保布局在横竖屏下都能正常工作。可能需要为不同方向提供不同的布局资源。 10. **测试和调试**：完成代码编写后，进行充分的测试，确保在各种情况...

    漂浮图片随页面而滚动

    5. **测试与优化**：最后，保存并预览`test.html`文件，检查图片是否按预期随页面滚动。可能需要根据实际需求调整图片的位置和大小，以及延迟加载的配置。 通过以上步骤，我们就成功地实现了漂浮图片随页面滚动的...

    全屏焦点图片无滚动条 css3动画特效 图片随鼠标移动而移动

    此外，还需要检查并测试项目在旧版浏览器中的表现，必要时引入polyfill库来模拟缺失的功能。 六、响应式设计 考虑到不同的设备和屏幕尺寸，项目可能需要采用响应式设计。可以使用媒体查询（`@media`）来根据视口...

    鼠标放置图片滚动特效

    "可以随鼠标移动"是指当用户移动鼠标时，图片滚动的方向或速度会根据鼠标的移动轨迹相应调整，创造出更自然、流畅的视觉效果。 【知识点详解】 1. **JQuery**：JQuery 是一个广泛使用的JavaScript库，简化了DOM...

    滚动条随鼠标移动的程序演示VB6.0源代码编写

    这涉及到将屏幕坐标转换为滚动条的值空间，可能需要根据控件大小和滚动范围进行计算。 6. **代码实现**：在VB6.0的代码编辑器中，需要创建一个新的窗体，并添加一个滚动条控件。然后，在窗体的MouseMove事件中编写...

    微信小程序商城分类菜单带滚动

    10. **测试与调试**：最后，开发者需要使用微信开发者工具进行真机调试、模拟器测试以及性能分析，确保分类菜单在各种环境下都能正常工作。 通过以上这些技术点的整合，我们可以构建出一个功能完备、用户体验良好的...

    滚动条动态改变大小

    在IT领域，滚动条是用户界面（UI）设计中不可或缺的一部分，它允许用户在内容超出屏幕显示范围时浏览和操作长文档或界面。本话题主要关注如何实现滚动条的动态改变大小，即调整其取值范围，以适应不同场景的需求。...

    关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

    同时，进行充分的测试以确保修改后在不同环境和设备上的表现都符合预期。 在项目中，你可以根据实际情况选择合适的方法进行修复。如果你已经下载了名为"dist"的压缩包文件，里面可能包含了修复后的代码或示例。解压...

    头部横向导航点击可滚动

    这种设计通常用于网站顶部，提供主要的页面链接或者功能选项，用户通过点击导航栏上的不同选项，页面会沿着X轴（水平方向）平滑滚动到相应的区域，同时页面内容随之切换，以呈现不同的信息。 描述进一步解释了这一...

Magicbox
Global site tag (gtag.js) - Google Analytics