窗口滚动

最新推荐文章于 2023-02-10 15:39:28 发布
最新推荐文章于 2023-02-10 15:39:28 发布
阅读量362 收藏
点赞数
文章标签： 窗口滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Super_Gods/article/details/49130003
版权

窗口滚动

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#list img {
    width:200px;
    height:180px;
}
#list {
    width:200px;
    height:180px;
    position:absolute;
    top:200px;
    left:500px;
    overflow:hidden;
}
#lists{
      position:relative;
      list-style:none;
      width:1000px;
      height:180px;
      margin:0;
      padding:0;
      left:-200px;
      z-index:0;
}
#lists li{
    float:left;
    width:200px;
     height:180px;
}
.movebt{
    width:41px;
    line-height:41px;
    background:#333333;
    color:#FFF;
    text-align:center;
    font-size:32px;
    font-family: "宋体";
    cursor:pointer;
    opacity:filter(alpha=80);
    opacity:0.8;
    display:none;

}
#nextbt{
    position:absolute;
    left:149px;
    top:68px;
    z-index:10;
}
#prebt{
    position:absolute;
    left:17px;
    top:70px;
    z-index:10;
}
#list:hover .movebt{
    display:block;
}
</style>
<script>
window.onload=function(){
    var timer=setInterval(next1,2000);

    var contair=document.getElementById("list");
    var pre=document.getElementById("prebt");
    var next=document.getElementById("nextbt");
    var contentlist=document.getElementById("lists");
    var len=contentlist.getElementsByTagName("li").length;
    var index=0;
    var flag=false;

    contair.onmouseover=function (){
        clearInterval(timer);
    }

    contair.onmouseout=function(){
        timer=setInterval(next1,2000);
    }
    pre.onclick=function(){
        pre1();
    }

    function pre1(){
            if(!flag){
        aminate(200);
            }
    }

    next.onclick=function(){
        next1();
    }
    function next1(){
            if(!flag){
        aminate(-200);
            }
    }

    function aminate(movejl){
            var newleft= parseInt(contentlist.offsetLeft)+movejl;
            var alltime=300;
            var jgtime=10;
            var speed=movejl/(alltime/jgtime);
            function aa(){
            if((speed<0&&parseInt(contentlist.offsetLeft)>newleft)||(speed>0&&parseInt(contentlist.offsetLeft)<newleft)){
             var nxleft=parseInt(contentlist.offsetLeft)+speed;
            contentlist.style.left = nxleft+"px";
            setTimeout(aa,jgtime);
          }else{
             flag=false;
            contentlist.style.left = newleft+"px";
            if(newleft<-600){
            contentlist.style.left=-200+"px";
        }
             if(newleft>-200){
            contentlist.style.left=-600+"px";
        }

          }
        }
          aa();
    }

}
</script>
</head>

<body>


<div id="list">
<div id="prebt" class="movebt"><</div>
<ul id="lists">
<li><img src="../jsImage/2011022516043391.jpg" /></li>
<li><img src="../jsImage/2011022516043389.gif" /></li>
<li><img src="../jsImage/2011022516043390.gif" /></li>
<li><img src="../jsImage/2011022516043391.jpg" /></li>
<li><img src="../jsImage/2011022516043389.gif" /></li>
</ul>
<div id="nextbt" class="movebt">></div>
</div>

</body>
</html>
Super_Gods
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C++ 窗口滚动条
weixin_40806975的博客
04-08 1872
1.给窗口添加滚动条 WS_HSCROLL，WS_VSCROLL 2.设定滚动条的范围，位置，页面大小 SetScrollInfo()，SetScrollPOS() 3.使滚动条滑块大小和窗口尺寸同步变化 OnSize() 4.处理滚动条消息 OnHScroll()，OnVScroll() 5.滚动窗口 ScrollWindow() ...
VB6.0实现代码窗口滚动
08-01
以下是关于“VB6.0实现代码窗口滚动”的详细知识点： 1. **代码编辑器组件**：VB6.0的代码编辑器是IDE（集成开发环境）的一部分，它允许开发者编写、编辑和调试VBA（Visual Basic for Applications）代码。这个编辑...
Vue监听窗口滚动事件
行如逆水行舟，不进则退
03-29 2669
Vue监听窗口滚动事件例子：当video滚动到可视区时自动播放监听窗口滚动事件处理函数 例子：当video滚动到可视区时自动播放 监听窗口滚动事件 记得在恰当的地方清除事件监听 mounted () { window.addEventListener('scroll', this.handleScroll) }, destroyed () { window.removeEventListener('scroll', this.handleScroll) }, 处理函数 methods:
【前端】如何判断是页面滚动还是窗口滚动
karshey的博客
01-30 2871
如何判断是页面滚动还是窗口滚动
Selenium基础 — Selenium操作浏览器窗口滚动条
测试-八戒
10-26 4165
这个大纲涵盖了目前市面上企业百分之99的技术，这个大纲很详细的写了你该学习什么内容，企业会用到什么内容。世界的模样取决于你凝视它的目光，自己的价值取决于你的追求和心态，一切美好的愿望，不在等待中拥有，而是在奋斗中争取。这里我准备了对应上面的每个知识点的学习资料、可以自学神器，已经项目练手。需求：访问淘宝首页，在淘宝首页实现Selenium对滚动条的操作。注：1000不代表一定到最底层，要根据浏览器页面的实际大小。聚焦元素：就是把滚动条滚动到你想要查找的元素的位置。脚本的方法，所以我们可以通过。
MFC窗口滚动条用法
Serven的博客
06-06 3249
MFC窗口滚动条的用法
QT添加窗口滚动条
huaw_en的博客
12-14 2545
QT添加窗口滚动条
web自动化：8.3 selenium中如何实现浏览器的窗口滚动
花测试
09-13 4338
介绍3种窗口滚动的方法
Flink 滚动窗口、滑动窗口详解
热门推荐
qq_34125999的博客
02-10 1万+
滚动窗口有固定的大小，是一种对数据进行“均匀切片”的划分方式。窗口之间没有重叠，也不会有间隔，是“首尾相接”的状态。如果我们把多个窗口的创建，看作一个窗口的运动，那就好像它在不停地向前“翻滚”一样。这是最简单的窗口形式，我们之前所举的例子都是滚动窗口。也正是因为滚动窗口是“无缝衔接”，所以每个数据都会被分配到一个窗口，而且只会属于一个窗口。 滚动窗口可以基于时间定义，也可以基于数据个数定义；需要的参数只有一个，就是窗口的大小（window size）。比如我们可以定义一个长度为 1 小时的滚动时间窗口，那么
jquery-窗口滚动事件-属性操作
pyhui的技术博客
06-26 2974
窗口的滚动事件 scrollLeft scrollTop 给scrollTop设置值 文档对象.scrollTop（） 可以获取值 如何给scrollTop设置值 文档对象.scrollTop（值） html方法操做 标签对象内的值 取值 标签对象.html() 赋值 标签对象.html(值) prop方法, 操作标签对象的属性值 取值 值 = 标签对象.prop（属性) 如果...
JavaScript 如何手动触发窗口滚动事件
KevinMiGuan的博客
12-04 2837
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{height:2000px;} </style> </head> <bo...
易语言窗口滚动条
07-22
在易语言中，窗口滚动条是常见的一种控件，它用于在窗口中提供用户界面交互，帮助用户浏览和控制大量信息。本文将深入探讨易语言窗口滚动条的实现原理、相关知识点以及如何利用源码进行开发。 首先，窗口滚动条分为...
jQuery侧边栏随窗口滚动实现方法
10-27
jQuery侧边栏随窗口滚动实现方法，需要的朋友可以参考一下
MFC窗口滚动条
03-29
本文将深入探讨如何在MFC环境中实现窗口滚动条，特别是通过GDI+加载多张图片来设定滚动条高度，并响应滚动条操作以实现窗口内容的动态滚动。 首先，我们需要了解MFC中的滚动条。MFC提供了CScrollBar类来处理滚动条...
易语言-易语言复制窗口组件后组件的排列计算+实现窗口滚动功能
06-25
这个主题涉及到两个关键的知识点：窗口组件的复制和排列计算，以及窗口滚动功能的实现。 首先，让我们深入探讨易语言中的组件复制与排列计算。在GUI设计中，组件可能需要被复制以创建类似或完全相同的控件布局。在...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
tkinter tk 主窗口滚动
06-03
要在 Tkinter 中实现主窗口滚动，可以使用滚动条控件和 Canvas 控件的组合。具体步骤如下： 1. 创建一个主窗口，并在其中添加一个 Canvas 控件。 2. 将 Canvas 控件的滚动区域设置为窗口的尺寸。 3. 创建一个滚动条控件，并与 Canvas 控件相连。 4. 设置滚动条控件的回调函数，以便在滚动条滑动时更新 Canvas 控件的视图。 下面是一个示例代码，演示了如何在 Tkinter 中实现主窗口滚动： ```python import tkinter as tk root = tk.Tk() # 创建 Canvas 控件 canvas = tk.Canvas(root, width=400, height=400, scrollregion=(0, 0, 800, 800)) canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True) # 创建滚动条控件 scrollbar = tk.Scrollbar(root, command=canvas.yview) scrollbar.pack(side=tk.RIGHT, fill=tk.Y) # 将滚动条控件与 Canvas 控件相连 canvas.config(yscrollcommand=scrollbar.set) # 添加一些内容到 Canvas 控件 for i in range(50): canvas.create_text(100, i*20, text=f"Line {i+1}") root.mainloop() ``` 在上述代码中，我们创建了一个 400x400 的 Canvas 控件，并将其滚动区域设置为 (0, 0, 800, 800)，这意味着我们可以在 Canvas 控件中滚动 800x800 的区域。 然后，我们创建了一个垂直滚动条控件，并将其与 Canvas 控件相连。当我们滑动滚动条时，Canvas 控件的视图会相应地更新。 最后，我们在 Canvas 控件中添加了一些文本，以便演示滚动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值