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 ...
随机推荐
- HIVE-利用ow_number() OVER(PARTITION BY)函数介绍求TOP-K
http://blog.csdn.net/631799/article/details/7419797 第一句话: select row_number() over (partition by mon ...
- CF 986A Fair——多源bfs
题目:http://codeforces.com/contest/986/problem/A 如果从每个村庄开始bfs找货物,会超时. 发现k较小.那就从货物开始bfs,给村庄赋上dis[ 该货物 ] ...
- 14.Selenium+Python使用火狐浏览器问题解决
一开始使用的是IE浏览器作为自动化浏览器,但是由于想学习无头模式,故选择FireFox作为浏览器,以下是遇到的相关问题: 1.简单代码 from selenium import webdriver d ...
- Azure Blob存储更改缓存时间
Azure的Blob存储可以作为Http的服务来使用.很多客户已经把Blob作为图片存储的服务,这样稍作代码的修改,解决了图片服务器带宽.性能等多种问题. 但同时问题也出现了:在传统Http的服务中很 ...
- Azure disk iops的测试
在Public Cloud中,VM.Storage和Network是IaaS的三大基础.本文将介绍在Azure的VM上测试磁盘IOPS的工具和方法. 一.添加磁盘.初始化磁盘 1.添加磁盘 把相应的信 ...
- jenkins学习 02 jenkins安装与配置
1: Jenkins安装 在最简单的情况下,Jenkins 只需要两个步骤: (1)下载最新的版本(一个 WAR 文件).Jenkins官方网址: http://Jenkins-ci.org/ (2 ...
- 自定义数据校验（4）---demo3---bai
工具类:CharUtil package com.etc.util; import java.util.regex.Pattern; public class CharUtil { public st ...
- Windows_Server_2008远程桌面多用户登陆的配置方法
开启远程桌面后,Windows Vista(或Windows 2008)下默认只支持一个administrator用户登陆,一个登录后另一个就被踢掉了,下面提供允许同一个用户名同时多个用户登录的配置方 ...
- python-xlrd 实现excel 导入数据
首先安装 xlrd 两种方式: 1.wheel 方式 安装: 首先要下载 wheel :
- Java 的标识符
标识符: 在写代码的时候为了增强代码的阅读性会自定义很多名字,如:类名.方法名.变量名等 这种名称成为标识符 标识符命名规则: 由字母(可以是中文).数字.下划线.$ 组成,但不能以数字开头 大小写敏 ...