webbrowser内容滚动（javascript内容无缝滚动）
一 使用webbrowser现有方法
引用：https://blog.csdn.net/xiaokailele/article/details/48392673
public partial class Form1 : Form
{
int current = ;
Timer timeDown = new Timer();
Timer timeUp = new Timer(); public Form1()
{
InitializeComponent(); webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser1_DocumentCompleted);
webBrowser1.Navigate("http://www.yahoo.com.cn"); timeDown.Interval = ;
timeDown.Tick += new EventHandler(timeDown_Tick);
timeUp.Interval = ;
timeUp.Tick += new EventHandler(timeUp_Tick); }
void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
current = ;
timeDown.Enabled = true;
}
void timeDown_Tick(object sender, EventArgs e)
{
HtmlDocument doc = webBrowser1.Document;
int height = webBrowser1.Document.Body.ScrollRectangle.Height;
current += height / ;
if (current >= height)
{
current = height;
timeDown.Enabled = false;
timeUp.Enabled = true;
} doc.Window.ScrollTo(new Point(, current));
}
void timeUp_Tick(object sender, EventArgs e)
{
HtmlDocument doc = webBrowser1.Document;
int height = webBrowser1.Document.Body.ScrollRectangle.Height;
current -= height / ;
if (current <= )
{
current = ;
timeUp.Enabled = false;
}
doc.Window.ScrollTo(new Point(, current));
}
}
二 使用javascript
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset="utf-8" />
<title>内容循环滚动</title>
<style type="text/css">
.bg {
position: relative;
width: 800px;
height: 300px;
overflow: hidden;
border: 1px solid;
} .content1 {
width: 700px;
position: absolute;
top: 8px;
} .content2 {
width: 700px;
position: absolute;
visibility: hidden;
}
</style>
<script type="text/javascript">
var y = ;
var myLoop;
var scrollStatus = false; function ScrollLoop() {
var content1 = document.getElementById('content1');
var content2 = document.getElementById('content2');
var height1 = parseInt(content1.offsetHeight);
var height2 = parseInt(content2.offsetHeight); y -= ;
if (parseInt(content1.style.top) < parseInt(content2.style.top)) {
content1.style.top = y + 'px';
content2.style.top = y + height1 + 'px'; if (parseInt(content2.style.top) <= ) {
y = parseInt(content2.style.top);
content1.style.top = parseInt(content2.style.top) + height2 + 'px';
}
}
else {
content2.style.top = y + 'px';
content1.style.top = y + height2 + 'px'; if (parseInt(content1.style.top) <= ) {
y = parseInt(content1.style.top);
content2.style.top = parseInt(content1.style.top) + height1 + 'px';
}
}
} function ResetLoopTime() {
clearInterval(myLoop);
var time = document.getElementById('textTime').value;
myLoop = setInterval(ScrollLoop, time);
scrollStatus = true;
} function startScrollLoop(isResetY, loopTime) {
var content1 = document.getElementById('content1');
var content2 = document.getElementById('content2'); if (isResetY) {
y = ;
content1.style.top = y + 'px';
content2.style.top = y + parseInt(content1.offsetHeight) + 'px';
} clearInterval(myLoop);
content2.style.visibility = 'visible';
myLoop = setInterval(ScrollLoop, loopTime);
scrollStatus = true;
} function stopScrollLoop(reset) {
clearInterval(myLoop);
scrollStatus = false;
} function reset() {
document.getElementById('content2').style.visibility = 'hidden';
document.getElementById('content1').style.top = + 'px';
} function getTextHeight() {
return parseInt(document.getElementById('content1').offsetHeight);
} function getScrollStatus() {
return scrollStatus;
} </script>
</head>
<body>
<div>
<input type="button" onclick="startScrollLoop(true, 10)" value="开始滚动" />
<input type="button" onclick="stopScrollLoop()" value="停止滚动" />
<input type="button" onclick="getTextHeight()" value="获取内容高" /><br>
<input type="text" id="textTime" />
<input type="button" onclick="ResetLoopTime()" value="重新设置滚动时间" />
</div>
<div class='bg'>
<div class="content1" id="content1">
<p>pppppppppppppppppp1</p>
<p>pppppppppppppppppp2</p>
<p>pppppppppppppppppp3</p>
<p>pppppppppppppppppp4</p>
<p>pppppppppppppppppp5</p>
<p>pppppppppppppppppp6</p>
<p>pppppppppppppppppp7</p>
<p>pppppppppppppppppp8</p>
<p>pppppppppppppppppp9</p>
<p>pppppppppppppppppp10</p>
</div>
<div class="content2" id="content2">
<p>pppppppppppppppppp1</p>
<p>pppppppppppppppppp2</p>
<p>pppppppppppppppppp3</p>
<p>pppppppppppppppppp4</p>
<p>pppppppppppppppppp5</p>
<p>pppppppppppppppppp6</p>
<p>pppppppppppppppppp7</p>
<p>pppppppppppppppppp8</p>
<p>pppppppppppppppppp9</p>
<p>pppppppppppppppppp10</p>
</div>
</div>
</body>
</html>
webbrowser调用
private void ControlScroll()
{
if (!IsAutoScroll)
return; bool scrollStatus = (bool)webbrowser1.Document.InvokeScript("getScrollStatus");
int height = (int)((int)webbrowser1.Document.InvokeScript("getTextHeight") * Convert.ToDouble(currDisplayRate) / );
if (height > webbrowser1.Height)
{
if (!scrollStatus)
{
webbrowser1.Document.InvokeScript("startScrollLoop", new object[] { true, LoopTime });
webbrowser1.ScrollBarsEnabled = false;
}
}
else
{
if (scrollStatus)
{
webbrowser1.ScrollBarsEnabled = true;
webbrowser1.Document.InvokeScript("stopScrollLoop");
webbrowser1.Document.InvokeScript("reset");
}
}
} }
三 结果：
我选择使用第二种方法，因为我是通过比较网页内容的高度和webbrowser的高度来确定是否滚动的
第一种相对于第二种
（1）进行网页的缩放处理 webBrowser1.Document.Body.ScrollRectangle.Height 这个值是不变的，不能用来确定何时内容滚动
（2）触底事件不好判断
（3）实现内容无缝循环，不如js方便
webbrowser内容滚动（javascript内容无缝滚动）的更多相关文章
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- JavaScript实现无缝滚动 原理详细讲解
先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...
- JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- javascript实现的可改变滚动方向的无缝滚动
效果图如下: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 利用JavaScript做无缝滚动
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- Javascript图片无缝滚动
http://www.cnblogs.com/shouce/p/5068787.html
- JS无缝滚动
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- 实现文字左右滚动 javascript
参考链接:http://www.86y.org/art_detail.aspx?id=587 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
随机推荐
- ubuntu lts install licode tag pre-v5.4
1. Requirements Ubuntu 14.04 LTS 2. Clone Licode codeYou first need to clone our code from github.Yo ...
- （1）java8初体验
很多博客都拿Comparator,我也贴一下吧. java8以前的匿名内部类用来排序. //匿名内部类 @Test public void java8Test() { Person p1 = new ...
- 编译PHP扩展的通用方法
以安装swoole扩展为例: 步骤1: wget pecl.php.net/get/swoole-1.7.21.tgz (下载swoole打包文件) 步骤2: tar zxvf swoole-1. ...
- 获得Oracle中刚插入的数据的ID（for produce）
在sql sever中实现插入数据的自动增长是很容易的,但是在oracle数据库中实现这一操作不是很容易,同时要想在.net中实现获取新插入数据的id,而 且不会出现读错的情况,就更显得困难了,为了解 ...
- C语言第二次实验作业
PTA ================= 11-6 方阵循环右移 --------------- 本题要求编写程序,将给定n×n方阵中的每个元素循环向右移m个位置,即将第0.1.....n-1列变换 ...
- 批量删除osd的shell脚本
cluster环境: # cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) # ceph -v ceph version 12. ...
- hibernate 延长加载范围
1. 关闭延迟加载功能 lazy="false"2.修改抓取策略 fetch="join"直接查询关联数据,一个联接查询搞定3.使用Hibernate对象的in ...
- jdbcTemplate学习（一）
概述 Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDBC模板类是第一种工作模式. JdbcTe ...
- JavaScript中给对象添加方法
在JavaScript中,我们经常要给已定义的对象添加一些方法,如下: function circle(w,h){ this.width=w; this.height=h; ...
- DAY17-Ajax
Ajax准备知识:json 什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 它基于 ECMAScript ( ...