一 使用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. WINRAR4.2破解方式或注册码

    急求WINRAR4.2破解方式或注册码,谢谢大侠们!~ 亲,我是复制别个的但是可以用64位32位都可以用 自己动手破解 那感觉才棒! 来吧 将以下数据复制到记事本中 然后另存名为“rarreg.key ...

  2. centos6.5 安装gcc 4.9.0

    wget http://gcc.skazkaforyou.com/releases/gcc-4.9.0/gcc-4.9.0.tar.gz  // 下载源码 tar -zxvf gcc-4.9.0 cd ...

  3. 模块化方案esl以及amd的依赖方式

    来自AMD设计思想的总结和思考 在之前了解es6模块化的时候有遇到过依赖循环的问题,在es6中对于模块是引用性的,而当时于es6模块化做对比的commonjs(CMD规范)对于模块是值类型(会将其缓存 ...

  4. 机器学习：模型泛化（LASSO 回归）

    一.基础理解 LASSO 回归(Least Absolute Shrinkage and Selection Operator Regression)是模型正则化的一定方式: 功能:与岭回归一样,解决 ...

  5. 用nfs挂载内核时出错 ERROR: Cannot umount的解决办法

    SMDK2440 # nfs 30000000 192.168.1.106:/work/nfs_root/uImage                         ERROR: resetting ...

  6. Flash在线签名小程序，可回放，动态导出gif图片

    需求: 公司为了使得和客户领导签字的时候记录下来,签字过程,可以以后动态回放演示,最好是gif图片,在网页上也容易展示,文件也小. 解决过程: 始我们去寻找各种app,最终也没有找到合适的,后来我在f ...

  7. python 三元表达式、列表推导式、生成器表达式

    一 三元表达式.列表推导式.生成器表达式 一 三元表达式 name=input('姓名>>: ') res='mm' if name == 'hahah' else 'NB' print( ...

  8. 安装 MongoDB。

    1.安装 MongoDB. 1.为软件包管理系统导入公钥. Ubuntu 软件包管理工具为了保证软件包的一致性和可靠性需要用 GPG 密钥检验软件包.使用下列命令导入 MongoDB 的 GPG 密钥 ...

  9. MySQL在cmd和python下的常用操作

    环境配置1:安装mysql,环境变量添加mysql的bin目录 环境配置2:python安装MySQL-Python 请根据自身操作系统下载安装,否则会报c ++ compile 9.0,import ...

  10. python爬虫框架（2）--PySpider框架安装配置

    1.安装 1.phantomjs PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速.原生支持各种Web标准:DOM 处理 ...