如何控制框架页的滚动

2016-02-19 13:15 6 1 收藏

下面请跟着图老师小编一起来了解下如何控制框架页的滚动,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

 解决思路

    利用框架文档中window对象的scrollBy方法来滚动。

 具体步骤

 1. 包含框架页的代码。








  2.demo.htm页代码。这里仅仅是为了测试效果,可以替换为你自己的页面。



  注意:如果iframe所加载的页为站外URL,将导致跨域问题,拒绝访问。凡是涉及到对框架页的访问及控制,都会有跨域问题。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  特别提示

  代码运行后的效果如图1.6.8所示。鼠标移上四上按钮上后,iframe内所加载的页面将分别向上、下、左和右四个方面滚动,在按下鼠标时滚动速度加快,松开鼠标(仍然在按钮上)时恢复速度,鼠标移开后滚动停止。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

1.6.8 控制iframe的滚动

特别说明

  本例主要是window对象的scrollBy方法的应用。通过设置横向滚动速度stepX和纵向滚动速度stepY为全局变量,在鼠标移上时在函数中用setInterval不断调用scrollBy方法滚动页面,通过参数控制滚动方向,在鼠标按下时放大全局变量stepX或stepY的值,人而达到加快滚动速度的效果,而鼠标移开后再用clearInterval方法清除之前的setInterval事件以停止滚动。

  scrollBy 将窗口滚动 x 和 y 偏移量。

  setInterval 每经过指定毫秒值后计算一个表达式。

  clearInterval 使用 setInterval 方法取消先前开始的间隔事件。

来源:http://www.tulaoshi.com/n/20160219/1603512.html

延伸阅读
标签: Web开发
SCRIPT language=JavaScript1.2 iens6=document.all||document.getElementById ns4=document.layers //specify speed of scroll (greater=faster) var speed=10 if (iens6){ document.write('div id="container" style="position:relative;width:600;height:430;border:0px solid&nb...
标签: Web开发
    1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-...
单页设计最近变得相当的流行,不管是一些企业还是个人都在不断的创意出有想法的单页来。加上现在每天成千上万的App应用不断的出现。而每个App都有一个简单的单页介绍。而且这些单页都设计的相当有创意。比起其他的网站,这些单页通过视差滚动设计让网站更加的生动,也会让浏览者眼前一亮。千变万化的画面引导,确实有着迷人的吸引力。今天我们...
标签: Web开发
1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本...
教你如何拍出框架人像   来自以色列的摄影师Guy Viner发挥特别创意,以框中有框、画中有画概念,加上简单后期功能,创作许多逼真的画框、人像、任意门、透视效果,令人无法分辨虚实真假,彷彿身处奇异世界之中。究竟摄影师是如何办到的呢?咱们一起来瞧瞧吧! photo by Guy Viner 早先我们介绍过英国18岁女摄影师Laura W...

经验教程

503

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部