scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...onMouseUP 当鼠标 按下又抬起。。。 onmousemove 当鼠标移动。。 onmousedown 当鼠标按下时。。 假设 obj 为某个 HTML 控件。...1.clientHeight, clientWidth: 这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入 元素中的页边距,边框等. 2.clientLeft...对于不可以滚动的元素,这些值总是0. 4.scrollHeight,scrollWidth: 不管有多少对象在页面上可见,他们得到的是整体. 5.style.left: 定位元素与包含它的矩形左边界的偏移量...offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务的坐标值 <input type=”button” value=”点一下
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。 3.keyup 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。...mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标 5.mouseout 当鼠标指针从元素上移开时，发生 mouseout 事件。...6.mouseover 当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。...7.mouseup 当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。...四：其他事件： 1.scroll 当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
function() { mask.style.display = 'none'; bigImgBox.style.display = 'none'; }) // 当鼠标在大盒子内移动时...页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。...1.3.3.案例：仿淘宝固定右侧侧边栏 原先侧边栏是绝对定位 当页面滚动到一定位置，侧边栏改为固定定位 页面继续滚动，会让 返回顶部显示出来 1.3.4.案例分析: 需要用到页面滚动事件 scroll...因为是页面滚动，所以事件源是document 滚动到某个位置，就是判断页面被卷去的上部值。...的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
2、涉及到的主要知识 offsetLeft: 获取当前对象与父元素的左距离 offsetTop: 获取当前对象与父元素的上距离 offsetWidth: 获取元素（含边框）的自身宽度 offsetHight...: 获取元素（含边框）自身高度 scrollLeft: 获取元素的左滚距离 scrollTop: 获取元素的上滚距离 event.clientX: 元素的X坐标 event.clientY: 元素的Y坐标...onmouseover: 当鼠标指针位于元素上方时，会发生mouseover事件 onmouseout: 当鼠标指针从元素上移开时，发生mouseout事件 onmousemove: 当鼠标指针在指定的元素中移动时...当鼠标移动到原图上时，通过对大图进行位置控制来显示对应的部位。 2....当鼠标移动到box上方时，move块将显示，同时在放大区中显示大图的对应位置，所以我们在这里需要使用mousemove事件监听，当我们鼠标移入box时，就需要获取当前鼠标的相对坐标位置。
最后说一下align属性，这个属性决定滚动文字位于距形内边框的上下左右位置。...onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。 ...注释 MARQUEE 元素的默认宽度与其父元素的宽度相等。如果 MARQUEE 位于没有指定宽度的 TD 内，你就需要明确设置 MARQUEE 的宽度。...当不处于滚动状态时，scrollLeft 对于设置为水平滚动的字幕来说为可读写，scrollTop 对于设置为垂直滚动的字幕来说为可读写。 ...-- 单击此按钮可在字幕滚动时读取 scrollLeft 和 scrollTop 属性的值。
鼠标的拖拽事件 拖拽的流程： （1）onmousedown：当鼠标在被拖拽元素上按下时，开始拖拽； （2）onmousemove：当鼠标移动时被拖拽元素跟随鼠标移动； （3）onmouseup：当鼠标松开时...，被拖拽元素固定在当前位置。...鼠标的滚轮事件 onmousewheel：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。 DOMMouseScroll：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。...当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，后续的间隔会非常快。这种设计是为了防止误操作的发生。 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。...speed = 20; } /* * 37 左 * 38 上
（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。...接下来讨论元素周围的内容流，首先得一个概念是当前行，其表示一个用于在页面上放置元素的不可见的行，这一行涉及页面上的元素留，当在页面的水平和垂直方向上一个接一个的排列元素时，它就可以派上用场。...，scroll可以给元素增加滚动条。...CSS列表处理：在列表中，可以通过list-style-position来设置指示符的位置，inside表示指示符位于标签中，outside（默认值）则相反，而将list-style设置为none...CSS设计导航系统：不同于简单的项目符号或编号列表，导航元素一般会需要如下特性：用户鼠标光标会改变，以指示元素是可单击的；当鼠标悬停在元素上时，元素周围的区域会改变外观；内容区域在视觉上显得与普通文本不同
内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。...这意味着，可以创建不干扰页面上其他元素的位置的隔离的 UI 功能，如弹出信息框和控制菜单，翻转面板，可以在页面上任何地方拖放的 UI 功能等。...> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。...https://codepen.io/cellinlab/pen/dydgwGp # 粘性定位 position: sticky，基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样...，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。
behavior： 设置文本在 marquee 元素内如何滚动。可选值有 scroll(连续滚动)，slide(滑动一次) 和 alternate(往返滚动)。...loop： 设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动. scrollamount ：设置每次滚动时移动的长度（以像素为单位）。...scrolldelay： 设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意， 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。...align：表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle 6.鼠标悬停事件 //表示当鼠标以上区域的时候滚动停止 onmouseover=this.stop...() //当鼠标移开的时候又继续滚动 onmouseout=this.start() 设置透明度（比如图片） 最常用的，在你需要修改透明度的元素的CSS样式上添加属性opacity：0-5；（0.1
当监听鼠标事件时，会触发一些事件，我们可以与之交互： mousedown 按下鼠标按钮触发 mouseup 鼠标按钮被释放 click 点击事件 dblclick 双击事件 mousemove 当鼠标移动到元素上时...，鼠标移动 mouseover 当鼠标移动到一个元素或它的一个子元素上时，鼠标悬停。...mouseenter 当鼠标移动到一个元素上时，鼠标进入。类似于mouseover但不冒泡。 mouseout 当鼠标移出元素时，以及当鼠标进入子元素时。...mouseleave 当鼠标移出一个元素时，mouseleave。类似于mouseout但不冒泡。 contextmenu 快捷菜单当快捷菜单打开时，例如用鼠标右键点击 事件重叠。...buttons 按钮(如果有)，表示在任何鼠标事件上按下的按钮的数字。 clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标。
很多朋友在使用Axure制作移动端原型时，希望内容区域在固定的区域内滚动，但是转换为动态面板后，显示滚动条会使美观度大打折扣，本文将介绍3个可以隐藏滚动条的小tips。...2.选中「内容区」的所有元件，右键转换动态面板。 3.调整动态面板的高度，使其小于内部内容区的高度，右键-【滚动条】-选择【垂直滚动】，这时候动态面板右侧会出现一条滚动条。...4.拉宽动态面板，使滚动条位于内容区之外。 5.拖入我们设备模版素材，置于所有元件图层的顶层，调整内容区动态面板的宽度和位置，使设备模版可以遮挡住我们的滚动条即可。...- 方法二：转换两次动态面板 - 方法一仅限于设备模版素材的宽度足以遮挡住滚动条的情况，如果不想添加设备素材，或设备素材的边框比较宽度不足以遮挡滚动条时，我们可以通过转换两次动态面板的方式来遮挡。...1.首先按照方法一中的步骤1-4制作出第一层动态面板，在此动态面板的基础上右键再次转换为动态面板。
fixed 固定定位，相对于浏览器窗口进行定位 静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。...相对定位relative 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 固定定位的元素跟父亲没有任何关系，只认浏览器。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 ie6等低版本浏览器不支持固定定位。 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
行内元素的特点: 相邻行内元素在一行上，一行可以显示多个。 高、宽直接设置是无效的， 默认宽度就是它本身内容的宽度。 行内元素只能容纳文本或其他行内元素。...我们称它们为行内块元素。 行内块元素的特点: 可以和相邻行内元素或行内块元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)。.../* 背景图像位于元素的 25% 水平位置和 75% 垂直位置 */ .element { background-position: 25% 75%; } /* 背景图像距离左边缘 50px，距离上边缘...其常用值包括： scroll（默认）：背景图像会随着内容滚动。 fixed：背景图像固定在视口，不随内容滚动。...从而节约代码量当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为: background:背景颜色, 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
TTabControl 属性 DisplayRect：只定该控件客户区的一个矩形 HotTrack：设置当鼠标经过页标签时，它的字是否有变化。...：在指定的数值中判断该位置位于该控件是什么位置 IndexOfTabAt：返回指定位置是在哪个页标签上，并返回它的索引号 RowCount：返回页标签的行数 ScrollTabs：当MultiLine...：是否使用系统字体 方法 ExecuteAction：执行Action属性中指定的动作 FlipChildren：指定面板最相反位置 SetBounds：设置控件的上，下，左，右的位置...事件 OnDrawPanel：当面板需要重新绘制时触发 OnCreatePanelClass：当一个面板需要创建时触发 OnHint：当显示提示时触发 TToolBar 属性...当拖动页滚动组件上的箭头时，页滚动组件滚动 Margin：被控控件与该控件的距离 Orientation：设置该控件的方向 Position：确定页流离颠沛滚动组件的滚动位置 方法
9、OnMouseDown() 当鼠标在一个载有GUI元素或碰撞器的游戏对象上按下时执行该函数 10、OnMouseOver() 当鼠标在一个载有GUI元素或碰撞器的游戏对象上经过时执行该函数 11、...滚动条又两部分组成GUI.BeginScrollView开始滚动视图，GUI.EndScrollView 结束滚动视图 参数 参数 描述 position 位置及大小 viewRect 设置滚动整体显示范围...HorizontalScrollbar 水平滚动条 VerticalScrollbar 垂直滚动条 ScrollPosition 显示滚动位置 alwaysShowHorizontal 可选参数，总是显示水平滚动条...，实际上就是一个容器；一个面板里还可以套用其他面板 面板创建时会默认包含一个Image(Script组件) Source Image 设置面板的图像 Color 用于改变面板的颜色 Text 文本框 参数...Size 设置操作条矩形对应的缩放长度，取值0~1 Numbers Of Steps 设置滚动条可滚动的位置数目 On Value Changed 设置值改变时触发消息 Input Field 也有
然后就是JList的多列显示，使用setLayoutOrientation(参数)方法来实现，共有3个参数，默认值是JList.VERTICAL，只用一列来显示，但不会自动滚动，需要添加滚动面板才能出现滚动条...setVisibleRowCount(n);方法可以设置最多显示多少行（若没有添加滚动面板，此设置无效，所有内容均会显示）。...此时滚动面板无效，因为行数永远不可能超标，因此滚动面板也永远不会出现 。...其中前景色和背景色又分为2中情况，就是选中时和未选中时，这点需要注意。...对于尺寸有一点需要注意，上述代码给的是一个固定尺寸。如果尺寸不固定有变化，那么最终会选择最大的那个尺寸作为所有Cell的尺寸。
事件名称 事件触发时机 click 当按下并释放任意鼠标按键时触发 dblclick 当鼠标双击时触发 mouseover 当鼠标进入时触发 mouseout 当鼠标离开时触发 change 当内容发生改变时触发...，一般多用于 对象 mousedown 当按下任意鼠标按键时触发 mouseup 当释放任意鼠标按键时触发 mousemove 在元素内当鼠标移动时持续触发 在项目开发中还经常涉及一些常用的鼠标属性...位置属性（只读） 描述 clientX 鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标） clientY 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标） pageX 鼠标指针位于文档的水平坐标...3.4 作业练习 鼠标拖曳特效 盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。 编写HTML，设计弹框用于实现拖拽特效。...大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。 当鼠标在小图上移动时，显示鼠标的遮罩和大图。
right 右侧偏移量，定义元素相对于其父元素右边线的距离 # 静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。...# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 固定定位的元素跟父亲没有任何关系，只认浏览器。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 # 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度 由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能...window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角,设置scrollTo(0,0)可以实现回到顶部的效果 1 2 元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。...如果没有提供该参数，默认为true,使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...hover效果，当鼠标移动到该元素上时，显示回到顶部的文字，移出时不显示 .box{ position:fixed; right:10px; bottom: 10px; height
对于内容相对简单的提示框，建议将按钮放在对话框的右侧，肯定性按钮位于否定性按钮的右侧。 对于冗长或复杂的表单，建议将按钮放在表单的左侧，肯定性按钮位于否定性按钮的左侧。...密度 当鼠标和键盘是主要的输入方法时，可以稍微减少按钮尺寸以适应密集的UI界面。 ---- 扁平按钮(Flat button) 用法 平面按钮印在材料上。 不会浮起，但点击时会填充颜色。...可以在以下位置使用扁平按钮： ·在 toolbars上 ·在提示框中，将按钮操作与对话框内容统一起来 ·Inline, with padding，因此用户可以轻松找到它们 ?...请勿在固定按钮区域使用浮动按钮。 ? 添加分隔后，底部固定按钮可用于滚动的提示框。 ?...当用户与按钮交互时，Menus会覆盖按钮并显示可能的状态。 按下某个状态会取消Menus并更新按钮以显示此新状态。 在下拉菜单中滚动的方式与Menus滚动的方式相同。 ? ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
