一 使用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内容无缝滚动）的更多相关文章

  1. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  2. JavaScript实现无缝滚动 原理详细讲解

    先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...

  3. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  4. javascript实现的可改变滚动方向的无缝滚动

    效果图如下: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  5. 利用JavaScript做无缝滚动

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  6. Javascript图片无缝滚动

    http://www.cnblogs.com/shouce/p/5068787.html

  7. JS无缝滚动

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  8. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  9. 实现文字左右滚动 javascript

    参考链接:http://www.86y.org/art_detail.aspx?id=587 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

随机推荐

  1. Java邮箱发送——企业版

    企业版邮箱发送工具类 import java.security.Security; import java.util.Properties; import javax.mail.Authenticat ...

  2. J2EE分布式服务基础之RPC

    一.RPC介绍 什么是RPC 远程过程调用(RPC)是一个协议,程序可以使用这个协议请求网络中另一台计算机上某程序的服务而不需知道网络细节. RPC模型 C/S模式 基于传输层协议 (例如 TCP/I ...

  3. Zabbix配置微信报警通知

    Zabbix告警可以通过邮件,微信,电话,短信等方式发送告警消息. 电话和短信需要向运营商购买相应的网关,需要付费: 邮件和微信是免费的,可以根据业务需要选择相应的告警模式 Zabbix版本:3.2 ...

  4. python3之编码

    这个符号(#!)的名称,叫做"Shebang"或者"Sha-bang"Shebang这个符号通常在Unix系统的脚本中第一行开头中写到,它指明了执行这个脚本文件 ...

  5. 安装CenOS7.4 LNMP环境

    从头开始安装环境 1.在vmware中安装最新的CentOS7.4 linux版本下载地址:http://man.linuxde.net/download/ 下载好的东东为:iso后缀的文件 安装教程 ...

  6. 反射ORM

    七章    反射 1节获取dll文件中的type---------------------------------------------------------------------------- ...

  7. hihoCoder#1062(最近公共祖先一)

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho最近发现了一个神奇的网站!虽然还不够像58同城那样神奇,但这个网站仍然让小Ho乐在其中,但这是为什么呢? “为什么呢 ...

  8. RabbitMQ 基本概念和使用

    当前各种应用大量使用异步消息模型,并随之产生众多消息中间件产品及协议,标准的不一致使应用与中间件之间的耦合限制产品的选择,并增加维护成本.AMQP是一个提供统一消息服务的应用层标准协议,基于此协议的客 ...

  9. Linux网络工具lsof和netstat

    lsof全名为list opened files,即列举系统中已经被打开的文件,基本使用如下: (1) 查看/etc/passwd使用情况 lsof /etc/password (2) 查看监听的so ...

  10. Rails的静态资源管理（二）—— 如何使用 Asset Pipeline

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...