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 ...
随机推荐
- 快速沃尔什变换（FWT）学习笔记
概述 FWT的大体思路就是把要求的 C(x)=A(x)×B(x) 即 \( c[i]=\sum\limits_{j?k=i} (a[j]*b[k]) \) 变换成这样的:\( c^{'}[i]=a^ ...
- CF 732F Tourist Reform——v-SCC+dfs
题目:http://codeforces.com/contest/732/problem/F 给无向图定向使得从每个点出发能去的点数最小值最大. SCC.点内部dfs定向.点间以siz最大的为起点反向 ...
- IEEE1588精密网络同步协议（PTP）
1 引言 以太网技术由于其开放性好.价格低廉和使用方便等特点,已经广泛应用于电信级别的网络中,以太网的数据传输速度也从早期的10M提高到100M,GE,10GE.40GE,100GE正式产品也于20 ...
- 单端IO标准
单端标准 常用的单端IO标准是LVTTL和LVCMOS. 目前业界绝大部分FPGA/CPLD器件的LVCOMS的IO是由CMOS推挽(push-pull)驱动器构成的,这种结构是上面的PMOS管和下面 ...
- shell脚本 - 快速到达目录
服务器中存放很多工程目录,通过ssh登录,需要手动敲命令,很麻烦,可以建立自动登录脚本 1.在服务器登录是默认的目录中建立脚本文件 vi drivers.sh #建立登录脚本 cd data/work ...
- PAT 垃圾箱分布（30分）dijstra
垃圾箱分布 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 大家倒垃圾的时候,都希望垃圾箱距离自己比较近,但是谁都不愿意守着垃圾 ...
- Vue开发模板简介
1. 传统发开模式的问题 用传统模式引用vue.js以及其他的js文件的开发方式,会产生一些问题. 基于页面的开发模式:传统的引用vue.js以及其他的js文件的开发方式,限定了我们的开发模式是 ...
- 【转】js获取对象的所有属性和方法
//有时候需要知道一个js对像的所有属性和方法来帮助调试,下面是再网上找到的一个比较给力的方法 function displayProp(obj){ var names=""; f ...
- DataGridView风格设置
http://blog.csdn.net/wangzhen209/article/details/51744518 http://www.cnblogs.com/hanpanpan
- samba Nginx
1.samba 2.nfs 3.crond 4.nginx ifconfig yum install net-tools -y ifconfig #查看所有已激活的网卡信息 ifconfig eth0 ...