【转载】Jquery : 上下滚动--单行 批量多行 文字图片翻屏

kwenLee 2011-06-09

原文地址：http://blog.sina.com.cn/s/blog_565812e60100dku9.html

一单行滚动(ad:http://www.gz138.com)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function AutoScroll(obj){
        $(obj).find("ul:first").animate({
                marginTop:"-25px"
        },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
</script>
</head>

<body>
<div id="scrollDiv">
<ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

二,多行滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
        Scroll:function(opt,callback){
                //参数初始化
                if(!opt) var opt={};
                var _this=this.eq(0).find("ul:first");
                var        lineH=_this.find("li:first").height(), //获取行高
                        line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
                        speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
                        timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
                if(line==0) line=1;
                var upHeight=0-line*lineH;
                //滚动函数
                scrollUp=function(){
                        _this.animate({
                                marginTop:upHeight
                        },speed,function(){
                                for(i=1;i<=line;i++){
                                        _this.find("li:first").appendTo(_this);
                                }
                                _this.css({marginTop:0});
                        });
                }
                //鼠标事件绑定
                _this.hover(function(){
                        clearInterval(timerID);
                },function(){
                        timerID=setInterval("scrollUp()",timer);
                }).mouseout();
        }       
})
})(jQuery);

$(document).ready(function(){
        $("#scrollDiv").Scroll({line:4,speed:500,timer:1000});
});
</script>
</head>

<body>
<p>多行滚动演示：</p>
<div id="scrollDiv">
<ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

 三可控制向前向后的多行滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
        Scroll:function(opt,callback){
                //参数初始化
                if(!opt) var opt={};
                var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
                var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
                var timerID;
                var _this=this.eq(0).find("ul:first");
                var     lineH=_this.find("li:first").height(), //获取行高
                        line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
                        speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
                        timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
                if(line==0) line=1;
                var upHeight=0-line*lineH;
                //滚动函数
                var scrollUp=function(){
                        _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
                        _this.animate({
                                marginTop:upHeight
                        },speed,function(){
                                for(i=1;i<=line;i++){
                                        _this.find("li:first").appendTo(_this);
                                }
                                _this.css({marginTop:0});
                                _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
                        });

                }
                //Shawphy:向下翻页函数
                var scrollDown=function(){
                        _btnDown.unbind("click",scrollDown);
                        for(i=1;i<=line;i++){
                                _this.find("li:last").show().prependTo(_this);
                        }
                        _this.css({marginTop:upHeight});
                        _this.animate({
                                marginTop:0
                        },speed,function(){
                                _btnDown.bind("click",scrollDown);
                        });
                }
               //Shawphy:自动播放
                var autoPlay = function(){
                        if(timer)timerID = window.setInterval(scrollUp,timer);
                };
                var autoStop = function(){
                        if(timer)window.clearInterval(timerID);
                };
                 //鼠标事件绑定
                _this.hover(autoStop,autoPlay).mouseout();
                _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
                _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);

        }      
})
})(jQuery);

$(document).ready(function(){
        $("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"});
});
</script>
</head>

<body>
<p>多行滚动演示：</p>
<div id="scrollDiv">
<ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
</ul>
</div>

<span id="btn1">向前</span>&nbsp;&nbsp;<span id="btn2">向后</span>

</body>
</html>
 
kwenLee

kwenLee

相关推荐

Python识别图片中的文字

‘‘‘图片备份、压缩；param original_imgage:原始图片路径；param tmp_imgage_path:临时图片路径，备份路径；return‘‘‘。‘‘‘使用百度OCR进行文字识别，支持JPG、JPEG、PNG、BMP格式；param

ITxiaobaibai / 0评论 2020-07-04

Android 图片文字识别DEMO（基于百度OCR）

OCR 是 Optical Character Recognition 的缩写，翻译为光学字符识别，指的是针对印刷体字符，采用光学的方式将纸质文档中的文字转换成为黑白点阵的图像文件，通过识别软件将图像中的文字转换成文本格式，供文字处理软件进一步编辑加工的技

alanlonglong / 0评论 2020-06-14

机器学习基础---应用实例（图片文字识别）和总结

首先，展示一个复杂的机器学习系统是如何被组合起来的；最后，介绍一下照片OCR问题，展现机器学习中有用的想法和概念，其中之一就是应用在计算机视觉问题中，另一个是人工数据合成的概念。讨论一种滑动窗口分类器的方法。标准的做法是绘制一个学习曲线来确保有一个低偏差、

PeterHuang0 / 0评论 2020-05-26

js 利用canvas 生成文字图片

let context = canvas.getContext(‘2d‘);context.font = font;width = 240;width = width + 30;canvas.width = width;canvas.height = wi

大地飞鸿 / 0评论 2020-01-06

H5 canvas生成图片并上传文件转成PDF下载canvas文字排版

最近遇到一个业务需求，在小程序端定制预览功能，并在预览的图片中使用指定的外部字体。，经过实践发现，小程序尽管做了分包处理，依旧不能在本地存放字体包，把字体放OSS上返回，但是出现跨域，尽管配置了允许跨域，依旧不行。小程序的canvas API没法设置字体，

飞翔的鱼 / 0评论 2019-11-16

图片可以转换成文字吗？

图片转换成文字，无论是在生活还是工作中，都经过会用到，不知道方法的小伙伴可能会手打出来，这样费时又费力，可以试试小编这个方法，这样转换起来非常便捷哦！希望上述的分享可以帮到你，有需要的可以试试这个方法。

yyHaker / 0评论 2019-10-21

识别图片中文字的简单方法

看到喜欢的句子和一段话，喜欢拍下来，我也有这样的习惯。但是，后面需要用的时候 ，就相对比较麻烦了，以前会傻乎乎的一个个手打出来，现在信息时代，就不用担心这个问题了，可以利用ocr识别软件轻松进行识别。今天和大家一起分享一个简单的方法：第一步：首先，把安装好

yangzzguang / 0评论 2019-10-21

pyqt5 实现工具栏文字图片同时显示

from PyQt5.QtWidgets import QMainWindow, QTextEdit, QAction, QApplication. exitAction = QAction(QIcon('images/exit.png'), 'Exit'

追逐阳光的风 / 0评论 2019-06-13

利用百度AI OCR图片识别，Java实现PDF中的图片转换成文字

我们搞技术的，当然得自己学着解决现在的痛点。首先，说说一些在线版的PDF图片转文字，对文件大小有限制为2M，超过了便要收费了。

chenzhx / 0评论 2019-09-06

如何使用Python进行OCR识别图片中的文字

OCR1，全称Optical character recognition，或者optical character reader，中文译名叫做光学文字识别。它是把图像文件中的手写文本，打印文本转换为机器编码文本的一种方法。OCR技术广泛用于识别打印纸张中的文

我心飞翔之家 / 0评论 2019-04-01

使用JavaScript将当前页面保存成PDF，支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个PDF文件。如果采用屏幕截图的话，默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。我在网上找了一段时间，搜集到了一些解决方案，在这里分享给

咸鱼的星空 / 0评论 2018-09-25

一篇文章搞定百度OCR图片文字识别API

研究百度OCR的API，主要是向做对扫描版的各种PDF进行文字识别并转Word文档的需求。这里用Postman客户端进行测试和演示。因为Postman是对各种API操作的最佳入门方式。一旦在Postman里实现了正确的调用，剩下的就只是一键生成代码，和一些

那年夏天 / 0评论 2019-06-30

使用JavaScript将当前页面保存成PDF，支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个PDF文件。如果采用屏幕截图的话，默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。这个解决方案包含了两个步骤，将前端页面转化为PDF:1.

js网页特效 / 0评论 2019-06-28

使用JavaScript将当前页面保存成PDF，支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求：将您负责开发的网页的全部内容，包括文字和图片，一起保存成一个PDF文件。如果采用屏幕截图的话，默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容。这个解决方案包含了两个步骤，将前端页面转化为PDF:1.

zgwyfz / 0评论 2018-09-25

用户体验设计视觉元素构成

一般来说，网站的视觉元素主要有文字、图片、表单和按钮四大类，还包括标签，列表，多媒体等等，这些都是网站外观设计的组成部分，服从于网站的整体风格需要。用好网站视觉元素，能更好的指导和协助用户完成网站上的任务流程，使用户获得良好的在线体验。字体是帮助用户获得与

hotbillow / 0评论 2013-12-04

jquery图片切换插件制作左右按钮与标题文字图片切换

本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js，到演示页面可以查看 演示CSS Code<styletype="text/css">*{marg

有心就有方向 / 0评论 2013-11-07

PHP+百度AI OCR文字识别实现了图片的文字识别功能

-const APP_ID = '请填写你的appid';"words": "无论对方富有或贫穷。

机器之心 / 0评论 2019-05-08

SEO细节优化:关于网站图片的优化

每一个网站都无可避免的会使用图片，那到底图片怎么做对SEO比较有好呢?图文资讯，有图有真相都讲究的是图片，一张图片的作用也是不容小视的。下面小编就为大家分享关于网站图片的优化，一起来看看吧！alt属性，这一点是我们这些做SEO经常用到的，给图片添加属性，让

hexiankun / 0评论 2016-02-03

百度图片竞价排名每天最低得消费50元

5月14日消息，今天晚间，据百度内部人士向腾讯科技透露，其图片竞价排名早在今年3月份开始试运营了，但目前还不是百度营销的主打业务。而百度公关部相关人员也证实，公司确实已经在尝试着运营图片竞价业务。据了解，今年3月份百度销售部就已经开展了图片竞价排名，但主要

mianqiang / 0评论 2010-05-16

让百度蜘蛛认为你的网站是一个好网站

等一些大的论坛发布，发布后，{文章内容要和你AD目标网站的主题大致符合，这样才能激起大家的兴趣，去顶帖，去转载　　第四步：完成了，等收录把。　　这样去做，图片+文字链接，和文章的针对性极强的描述。

jtguve / 0评论 2009-10-13

多种JQuery循环滚动文字图片效果代码

自己模仿JQ插件的写法写了一个循环滚动列表插件，支持自定义上、下、左、右四个方向，支持平滑滚动或者间断滚动两种方式，都是通过参数设置。JQ里面有些重复的地方，暂时没想到更好的方法去精简。不过效果还是可以的，如下：。direction: 'left',

Mr小五 / 0评论 2016-02-02

基于Jquery制作图片文字排版预览效果附源码下载

基于jQuery图文排版图片预览特效。这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效。效果图如下所示，怎么样感兴趣吗，感兴趣的朋友继续往下学习哦。<p>Morbi faucibus euismod lectus. Morb

yaasshole / 0评论 2019-04-23

基于jquery插件制作左右按钮与标题文字图片切换效果

.ui-banner .ui-banner-slogans li{cursor:pointer;color:#8DC4EC;text-align:left;font-weight:bold;font-size:12px;line-height:14px;p

舜岳 / 0评论 2013-11-07

jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

以下代码，运行后，需要刷新下，才能加载jquery,要不然看不到效果。

melissahexiu / 0评论 2010-05-17

Python3一行代码实现图片文字识别的示例

自学Python3第5天，今天突发奇想，想用Python识别图片里的文字。没想到Python实现图片文字识别这么简单，只需要一行代码就能搞定。我们运行代码后识别的结果,有几个字没有正确识别，但是大多数字都能识别出来。这里我们需要用到两个库：pytesser

LHpython / 0评论 2018-01-15

python识别图片文字

因为学校要求要刷一门叫《包装世界》的网课，而课程里有200多道选择题，而且只能在手机完成，网页版无法做题，而看视频是不可能看视频的，这辈子都不可能看...所以写了几行代码来进行百度搜答案。手机屏幕投影到电脑上；截图并识别图片文字；调用百度来进行搜索；提取h

懒人在思考 / 0评论 2018-04-21

毁掉一个信息流广告很简单，放错一张图就行了

我们都知道，做一个成功的信息流投放不容易，需要兼顾创意、文案、图片、配色、版式、定向等多个方面，但是毁掉一个投放却是超级简单：。放错一张图就行了。是的，你没看错，不是文案，不是定向，一张入口图就有能力决定这个投放的生死。大部分广告主投放信息流的广告的目的是

不宜公开 / 0评论 2017-12-18

Android GIS开发系列-- 入门季（6）GraphicsLayer添加文字与图片标签

但有时我们设置此代码时中文并没有出现，可能会有乱码等，是因为系统的fon<br />ts下面并没有此字体，解决的办法有，将手机root，将DroidSansFallback.ttf字体添加到system\fonts下。华为的手机是有此字体的，而

最美应用有价值的好应用 / 0评论 2017-11-29

水印测试(重新测试)

注：如果你是用Fireworks来处理LOGO图片，在导出图片的时候用Alpha透明而不要用索引透明！ DimJpeg,LogoSetJpeg=Server.CreateObject("Persits.Jpeg")Jpeg.OpenS

ASP编程 / 0评论 2016-10-05