我现在正在制作一个Php网页，并希望有一个＆＃34;新闻＆＃34; 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>
此外，可以在Mouseover上停止滚动和鼠标滚动开始滚动继续循环。 我已经尝试过搜索正确的代码，但到目前为止还没有任何工作。
＆＃34;我现在非常沮丧！ ＆＃34;
非常感谢任何帮助！
答案 0 :(得分：5)
这是我能想到的最简单的解决方案 - 它将实现您想要的效果，并且还可以调整您定义的CSS代码（因此，如果您在CSS中更改高度，脚本将赢得＆＃39;必须改变。）
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>
请注意，我已经设置了＆＃34;速度＆＃34;到4可以更快地查看结果 - 将其更改为1以获得您想要的结果。我还把所有内容都放在了正确的位置，这意味着没有内联样式或内联脚本，随着项目的增长，它将更容易在项目中维护。
另外，为了将所有内容都包装成一个可运行的代码片段，我省略了PHP代码，但代码基本上与您在示例中的代码相同，除非您需要围绕它的#container元素用于上下文。
答案 1 :(得分：0)
// 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>
答案 2 :(得分：-2)
我使用marquee的一些属性，问题解决了！
function random_password($length = 8) {
$password = "";
$possible = "2346789bcdfghjkmnpqrtvwxyzBCDFGHJKLMNPQRTVWXYZ";
$maxlength = strlen($possible);
if ($length > $maxlength) {
$length = $maxlength;
}
$i = 0;
while ($i < $length) {
$char = substr($possible, mt_rand(0, $maxlength-1), 1);
if (!strstr($password, $char)) {
$password .= $char;
$i++;
}
}
return $password;
}
function encrypt($plaintext, $salt) {
$td = mcrypt_module_open('cast-256', '', 'ecb', '');
$iv = mcrypt_create_iv (mcrypt_enc_get_iv_size($td), MCRYPT_RAND);
mcrypt_generic_init($td, $salt, $iv);
$encrypted_data = mcrypt_generic($td, $plaintext);
mcrypt_generic_deinit($td);
mcrypt_module_close($td);
$encoded_64 = base64_encode($encrypted_data);
return trim($encoded_64);
}
function decrypt($crypttext, $salt) {
$decoded_64=base64_decode($crypttext);
$td = mcrypt_module_open('cast-256', '', 'ecb', '');
$iv = mcrypt_create_iv (mcrypt_enc_get_iv_size($td), MCRYPT_RAND);
mcrypt_generic_init($td, $salt, $iv);
$decrypted_data = mdecrypt_generic($td, $decoded_64);
mcrypt_generic_deinit($td);
mcrypt_module_close($td);
return trim($decrypted_data);
}