如何在循环中垂直滚动div内容，如php页面中的新闻提要
Posted
技术标签:
【中文标题】如何在循环中垂直滚动div内容，如php页面中的新闻提要【英文标题】：How to scroll div contents vertically in a loop like news feed in php page 【发布时间】：2016-11-08 10:41:22 【问题描述】：我现在正在制作一个 php 网页，并希望在右侧有一个小的“新闻”DIV。页面加载后立即自动滚动垂直文本。但是，下面的代码在 php 页面中不起作用。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"
integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
crossorigin="anonymous">
</script>
<style>
span
display:block;
width:350px;
word-wrap:break-word;
.display
height:200px;
border:none;
overflow: hidden;
padding:5;
</style>
</head>
<body onLoad="scroll()" style="background-color: black;">
<!---***************** Php Code Start ************************--->
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
//********************* DB Configuration Code *********************
ob_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'xxxx');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'MyDb');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
//************** Selection of Data *********************
$select=mysql_query("SELECT * FROM newsfeedtest order by created asc");
$i=1;
//************* Display Data *********************
while($userrow=mysql_fetch_array($select))
$id=$userrow['id'];
$usernews=$userrow['news'];
$created=$userrow['created'];
//******** Div Displays Data *******
echo '<div class="display" id="news" style="width:350px; margin-bottom:-20px;">
<!-------------------- News : --------------------------------->
<p style="color:#fff;">
<span style="color: #fff;font-size:17px;">'.$usernews.'</span> </p><br />
</div>';
//********************* End of Php Code *********************
?>
<script language="javascript">
i = 0
var speed = 1
function scroll()
i = i + speed
var div = document.getElementById("news")
div.scrollTop = i
if (i > div.scrollHeight - 160) i = 0
t1=setTimeout("scroll()",100)
</script>
</body>
</html>
此外，是否有可能在鼠标悬停时停止滚动并在鼠标移出时开始滚动继续循环。 我已经尝试搜索正确的代码，但到目前为止没有任何效果。
“我现在很沮丧！”
任何帮助将不胜感激！
【问题讨论】：
我从数据库中检索数据没有问题，但没有垂直滚动？ 需要注意的一点是样式标签应该在头部。 附加的图片文件是什么？你说你想滚动文本。为什么要在此处附上图片？ @nerdlyist 最好有一个单独的 css 文件来定义所有样式。 OT：使用带有overflow-y的div：滚动来启用滚动元素。 不要使用mysql_query，它已被弃用。使用 mysqli 或 pdo
【参考方案1】：
这是我能想到的最简单的解决方案 - 它会实现您想要的，并且还会根据您定义的 CSS 代码进行调整（因此，如果您在 CSS 中更改高度，则不必更改脚本） .
var i = 0;
$(document).ready(function()
var interval = setInterval(function ()
i += 4; // speed
$('#container').animate( scrollTop: i , 1);
if (i >= $('#container').prop('scrollHeight') - $('#container').height())
i = 0;
, 100);
);#container
background-color: #000;
color: #fff;
height: 180px;
overflow: hidden;
padding: 5px 20px;
width: 350px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>请注意，我已将“速度”设置为 4 以更快地查看结果 - 将其更改为 1 以获得您想要的结果。我还将所有内容都放在了正确的位置，这意味着没有内联样式或内联脚本，这将在您的项目中越长越容易维护。
此外，为了将所有内容包装到可运行的 sn-p 中，我省略了 PHP 代码，但生成与您在示例中的生成基本相同，除了您需要#container它周围的元素作为上下文。
【讨论】：
好的，谢谢你的回答，但是我如何用我的 php 代码实现它，并且 是使用循环显示记录，如示例图像所示。那么，我如何使用 因为它的独特性？ 我在带有“div 类容器”的 .php 页面上尝试了它，但仍然没有任何反应文本不滚动????? @Vir：基本上，您需要添加的不是 while 循环中的 echo，而是echo '<p>'.$usernews.'</p>'; - around 您的 while 循环，您需要这个元素：@ 987654325@。一旦你有了这个，它应该可以工作 - 但是请注意你需要导入 jQuery（参见答案的 html 代码块的第一行）
【参考方案2】：
// please add bootstrap.css & jquery.js in the same file folder //
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4" style="min-height:300px">
<ul id="marquee-vertical">
<li style="list-style-type:none">
<a href="">Breaking News 1</a>
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</li>
<li style="list-style-type:none">
<a href="">Breaking News 2</a>
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</li>
<li style="list-style-type:none">
<a href="">Breaking News 3</a>
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</li>
<li style="list-style-type:none">
<a href="" >Breaking News 4</a>
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<script type="text/javascript">
(function($, window, document, undefined)
var pluginName = "marquee",
defaults =
enable : true,
direction: 'vertical',
itemSelecter : 'li',
delay: 1000,
speed: 1,
timing: 1,
mouse: true
;
function Widget(element, options)
this.element = element;
this.settings = $.extend(, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.$element = $(this.element);
this.$wrapper = this.$element.parent();
this.$items = this.$element.children(this.settings.itemSelecter);
this.next = 0;
this.timeoutHandle;
this.intervalHandle
if(!this.settings.enable)return;
this.init();
Widget.prototype =
init:function()
var that = this;
var totalSize = 0;
$.each(this.$items, function(index, element)
totalSize += that.isHorizontal()
? parseInt($(element).outerWidth())
: parseInt($(element).outerHeight());
);
var elmentTotalSize = this.isHorizontal()
? this.$element.outerWidth
: this.$element.outerHeight;
if(totalSize < elmentTotalSize)return;
this.$wrapper.css(
position : 'relative',
overflow : 'hidden'
);
this.$element.css(
position : 'absolute',
top : 0,
left: 0
);
this.$element.css(this.isHorizontal() ? 'width' : 'height', '1000%');
this.cloneAllItems();
if(this.settings.mouse)
this.addHoverEvent(this);
this.timer(this);
,
timer : function(that)
this.timeoutHandle = setTimeout(function()that.play(that), this.settings.delay);
,
play : function(that)
this.clearTimeout();
var target = 0;
for(var i = 0; i <= this.next; i++)
target -= this.isHorizontal()
? parseInt($(this.$items.get(this.next)).outerWidth())
: parseInt($(this.$items.get(this.next)).outerHeight());
this.intervalHandle = setInterval(function()that.animate(target),this.settings.timing);
,
animate : function(target)
var mark = this.isHorizontal() ? 'left' : 'top';
var present = parseInt(this.$element.css(mark));
if(present > target)
if(present - this.settings.speed <= target)
this.$element.css(mark, target);
else
this.$element.css(mark, present - this.settings.speed);
else
this.clearInterval();
if(this.next + 1 < this.$items.length)
this.next++;
else
this.next = 0;
this.$element.css(mark,0);
this.timer(this);
,
isHorizontal : function()
return this.settings.direction == 'horizontal';
,
cloneAllItems: function()
this.$element.append(this.$items.clone());
,
clearTimeout : function()
clearTimeout(this.timeoutHandle);
,
clearInterval : function()
clearInterval(this.intervalHandle);
,
addHoverEvent : function(that)
this.$wrapper
.mouseenter(function()
that.clearInterval()
that.clearTimeout();
)
.mouseleave(function()
that.play(that);
);
$.fn[pluginName] = function(options)
return this.each(function()
if (!$.data(this, "plugin_" + pluginName))
$.data(this, "plugin_" + pluginName, new Widget(this, options));
);
;
)(jQuery, window, document);
$(function()
$('#marquee-vertical').marquee();
);
</script>
</body>
</html>
【讨论】：
每个人都可以将此代码用于新闻垂直滚动，就像字幕标签一样......只需将提到的核心文件添加到与 .HTML 文件相同的文件夹中。（bootstrap.css & jquery.js) 请注意代码是引用的。【参考方案3】：我使用 marquee 和它的一些属性，问题就解决了！
<marquee behavior="scroll" scrollamount="1" direction="up" onmouseover="this.stop();" onmouseout="this.start();">
<!---*********************** Php Code Start ***************************--->
<?php
//********** Php code goes here ***********
?>
<!---******************** Php Code End ********************************--->
</marquee>
【讨论】：
marquee 已被 w3c 弃用，并在 html5 规范中归类为 non-conforming feature，因为它具有专有性质。你不应该使用它，也不应该期望浏览器支持这个功能。
感谢@TheThirdMan 提供信息，我会尽快将其删除。但是，其他解决方案是什么？
基于 JS/jQuery 的解决方案是当今最广泛支持的方式。我相信我对这个问题的回答以非常干净的方式解决了它，但如果它不满足您的要求，请澄清这一点作为对该答案或原始问题的评论，我将尝试相应地编辑我的答案.以上是关于如何在循环中垂直滚动div内容，如php页面中的新闻提要的主要内容，如果未能解决你的问题，请参考以下文章
网页中如何隐藏iframe中的垂直滚动条，但依然可以用滚轮实现页面滚动？？？求大神啊