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 ...
随机推荐
- 超时 CS-8610 中性笔
超时 CS-8610 中性笔 最初觉得这款笔很简单,而且还认为有点丑,因为笔头比较短. 比较特别提这款中性笔比一般的中性笔要粗一点. 使用后才发现比其它的中性笔好用,因为笔杆粗,手感好,笔杆上并没有特 ...
- Python collections系列之计数器
计数器(counter) Counter是对字典(无序)类型的补充,用于追踪值的出现次数. 使用counter需要导入 collections 类 ps:具备字典的所有功能 + 自己的功能 1.创建一 ...
- Qt多选框
1.获取并显示复选框文本内容 ui->label->setText(ui->comboBox->currentText());
- PostgreSQL recovery.conf恢复配置
PostgreSQL recovery.conf恢复配置 这一章描述recovery.conf 文件中可用的设置.它们只应用于恢复期.对于你希望执行的任意后续恢复, 它们必须被重置.一旦恢复已经开始, ...
- spring 学习二 @RequestMapping
RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. RequestMapping注解有六个属性,下面我们把她 ...
- Spring学习九 Servlet相关
servlet作用: 它驻留在 Web 服务器上,处理新来的请求和输出的响应.它与表示无关,实际上也不它应该与表示有关. 作为一名专业编程人员,您碰到的大多数 Java servlet 都是为响应 W ...
- Python多进程-进程间数据的传递
两个进程间的数据是独立的,要进行数据传递的话可通过几个方法 Queue 通过队列来进行进程间数据的传递 # -*- coding:utf-8 -*- __author__ = "MuT6 S ...
- PHP函数(六)-匿名函数(闭包函数)
匿名函数能够临时创建一个没有名称的函数,常用作回调函数参数的值 <?php $test = function($a){ echo "Hello,".$a; }; $test( ...
- list（）的相关问题
由php手册中可以看到对list的定义: list — 把数组中的值赋给一些变量,像 array() 一样,这不是真正的函数,而是语言结构.list() 用一步操作给一组变量进行赋值. array l ...
- python中匹配中文，解决不匹配，乱码等问题
UnicodeDecodeError: 'ascii' codec can't decode byte 0xe7 in position 0: ordinal 字符串前加 ur‘str’即可;