在DIV里怎么让文字实现上下滚动的效果_百度知道
在DIV里怎么让文字实现上下滚动的效果
我有更好的答案
　　使文字滚动的方法：　　BGColor：滚动文本框的背景颜色。　　Direction：滚动方向设置，可选择Left、Right、up和down。　　scrolldelay：每轮滚动之间的延迟时间，越大越慢。　　scrollamount：一次滚动总的时间量，数字越小滚动越慢。　　Behaviour：滚动的方式设置，三种取值：Scroll（循环滚动） lide（单次滚动）、Alternate（来回滚动）。　　Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。　　Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。　　Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。　　loop：滚动次数。默认为infinite　　c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。　　d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。　　e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
在校本科生
this.MouseOver = 0, &down&.&gt.width);if(this.Height == 0)this.indexOf(&:3}.Start = function(){if(this.ID == -1)if(this.WaitTime &r\string&MSCLASS_TEMP_HTML&/&this.Timer = 30;&lt.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()];table cellspacing='0' cellpadding='0' style='border-collapse:collapse.Width = this.Height = this.DelayTime = this.Width / 2);this.&}this.Direction = this:1 , &quot.height).style:keep-&#39.width = this.Width + &px&;this.ID;if(arguments.length &table cellspacing='0' cellpadding='0' style='border-collapse:collapse.height = this.Hvar templateLeft = &&if(typeof this.Direction == &display.round(this.Height / 2);'&MSCLASS_TEMP_HTML&tr&gt:0 , &td noWrap=true style=')table&&:/tr&&/word-break:keep-all.ID.noWrap =bottom&quot.WaitTime =&opera&) == -1);)/td&&/tr&&tr&&td&MSCLASS_TEMP_HTML&/td&&/tr&&/table&&;var msobj =msobj.tempHTML = msobj.ID.innerHTML;if(msobj.Direction &= 1){msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);}else{if(msobj.ScrollStep == 0 && msobj.DelayTime == 0){msobj.ID.innerHTML += msobj.ID.innerHTML;}else{msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);}}var timer = this.Tvar delaytime = this.DelayTvar waittime = this.WaitTmsobj.StartID = function(){msobj.Scroll()}msobj.Continue = function(){if(msobj.MouseOver == 1){setTimeout(msobj.Continue,delaytime);}else{ clearInterval(msobj.TimerID);msobj.CTL = msobj.Stop = 0;msobj.TimerID = setInterval(msobj.StartID,timer);}}msobj.Pause = function(){msobj.Stop = 1;clearInterval(msobj.TimerID);setTimeout(msobj.Continue,delaytime);}msobj.Begin = function(){msobj.ClientScroll = msobj.Direction & 1 ? msobj.ID.scrollWidth / 2 : msobj.ID.scrollHeight / 2;if((msobj.Direction &= 1 && msobj.ClientScroll &= msobj.Height + msobj.Step) || (msobj.Direction & 1 && msobj.ClientScroll &= msobj.Width + msobj.Step))
{msobj.ID.innerHTML = msobj.tempHTML;delete(msobj.tempHTML);}delete(msobj.tempHTML);msobj.TimerID = setInterval(msobj.StartID,timer);if(msobj.ScrollStep & 0)msobj.ID.onmousemove = function(event){if(msobj.ScrollStep == 0 && msobj.Direction & 1){var event = event || window.if(window.event){if(msobj.IsNotOpera){msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX;}else{msobj.ScrollStep =}}else{msobj.EventLeft = event.layerX - msobj.ID.scrollL}msobj.Direction = msobj.EventLeft & msobj.HalfWidth ? 3 : 2;msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft);msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfWidth);}}msobj.ID.onmouseover = function(){if(msobj.ScrollStep == 0)msobj.MouseOver = 1;clearInterval(msobj.TimerID);}msobj.ID.onmouseout = function(){if(msobj.ScrollStep == 0){if(msobj.Step == 0)msobj.Step = 1;}msobj.MouseOver = 0;if(msobj.Stop == 0){clearInterval(msobj.TimerID);msobj.TimerID = setInterval(msobj.StartID,timer);}}}setTimeout(msobj.Begin,waittime);}Marquee.prototype.Scroll = function(){switch(this.Direction){case 0:this.CTL += this.Sif(this.CTL &= this.ScrollStep && this.DelayTime & 0){this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;this.Pause();}else{if(this.ID.scrollTop &= this.ClientScroll){this.ID.scrollTop -= this.ClientS}this.ID.scrollTop += this.S}case 1:this.CTL += this.Sif(this.CTL &= this.ScrollStep && this.DelayTime & 0){this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;this.Pause();}else{if(this.ID.scrollTop &= 0){this.ID.scrollTop += this.ClientS}this.ID.scrollTop -= this.S}case 2:this.CTL += this.Sif(this.CTL &= this.ScrollStep && this.DelayTime & 0){this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL;this.Pause();}else{if(this.ID.scrollLeft &= this.ClientScroll){this.ID.scrollLeft -= this.ClientS}this.ID.scrollLeft += this.S}case 3:this.CTL += this.Sif(this.CTL &= this.ScrollStep && this.DelayTime & 0){this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL;this.Pause();}else{if(this.ID.scrollLeft &= 0){this.ID.scrollLeft += this.ClientS}this.ID.scrollLeft -= this.S}}}这个实例是在div中调用js实现的，希望能对你有所帮助.Stop =:2 ;if(.HalfWidth = Math.round(n请检查标签ID设置是否正确!&);number&this.Step = 1;:0 .overflowX = this.ID;this.DirectionArray = {&top&quot.Height + &px&;)if(typeof arguments[2] == &quot.IsNotOpera = (if(typeof arguments[3] == &&number&if(typeof arguments[6] == &quot.ID.style.overflow = this.ID.CTL = this.StartID =hidden&quot.ID = -1;= 7)this.Start();}Mthis.ID.Width = arguments[3];if(typeof arguments[4] == &number&)this.Height = arguments[4];if(typeof arguments[5] == &number&)this.Timer = arguments[5].style.BakStep = this.Sif(typeof this.ScrollStep != &number&)this.ScrollStep = this.Direction & 1 ? this.Width .DelayTime = arguments[6];if(typeof arguments[7] == &number&)this.WaitTime = arguments[7];if(typeof arguments[8] == &number&)this.ScrollStep = arguments[8];/td&&td noWrap=true style='white-space:word-var templateTop = &if(typeof arguments[1] == &quot!this.ID){alert(&您要设置的\&& + arguments[0] + &\:1 ; || typeof arguments[1] == &string&)this.Direction = arguments[1];'&&tr&&td&MSCLASS_TEMP_HTML&lt.WaitTime = 800;if(this.Timer & 20); 800)this.style:'td&初始化错误&#92.Height = parseInt(this.ID;)this.HalfHeight = M&lt, &up&;number&quot, &right&left&quot.toLowerCase();number&white-space.Timer = 20;if(this.Width == 0)this.Width = parseInt(this.ID.style.Step = arguments[2].style.overflowY = &quot.userAgent下面是一个实例，你看一下，应该就懂了function Marquee(){this.ID = document.getElementById(arguments[0])
本回答被提问者采纳
bgcolor 表示运动区域的背景色，值是16进制的RGB颜色：底部对齐（默认），小A博客导航&/marquee&6;/marquee&/marquee&gt，默认width=100% height为标签内元素的高度如;小A博客导航&font&marquee direction=#&小A博客导航&&#47，即&marquee&gt、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。如：&marquee vspace=&&gt。如;100& hspace=&100&quot，middle：中间对齐，单位是毫秒如： &lt：左对齐;marquee&&//marquee&gt：&marquee&2.behavior 表示滚动的方式;up&marquee height=40 width=50% bgcolor=aaeeaa&marquee id=&scrollarea& direction=&marquee align=# width=400&小A博客导航&/80&小A博客导航&lt.stop();& onmouseout=&5;8;&小A博客导航&lt，值可以是left，right，小A博客导航& bgcolor=&#CCCCCC&quot：1; width=&150&quot：&lt，texttop：&3;marquee loop=# behavior=scroll&gt.start()，absmiddle.scrolldelay 表示停顿时间，值是正整数，默认为0;小A博客导航&lt.loop 表示循环的次数，值是正整数，默认为无限循环&输入滚动的文字&&#47、p等字母的最下端对齐）：绝对底部对齐（与g，默认为白色如：&marquee bgcolor=aaaaee&小A博客导航&/小A博客导航&lt：顶线对齐，top：顶部对齐　　如：&font size=6&marquee&9.&11.onmouseover=this，当鼠标移开的时候又继续滚动. scrollamount 表示运动速度，值是正整数，默认为6如：&marquee scrollamount=20&&10.hspace，down，默认为left如;marquee behavior=#&gt，值可以是absbottom.valign 表示元素的垂直对齐方式，值可以是top，middle.direction 表示滚动的方向：右对齐;marquee&marquee标签的参数如下; onmouseover=&this，bottom，默认为middle7;/marquee&gt：底线对齐，bottom、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，marquee scrolldelay=500 scrollamount=100& scrolldelay=&10& scrollamount=&1&/marquee& height=&quot：绝对中央对齐，baseline：&lt.stop() onmouseout=this.start() 表示当鼠标移上区域的时候滚动停止.align 表示元素的水平对齐方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）如;/marquee&4给文字添加marquee标签
为您推荐：
其他类似问题
div的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。7被浏览6,814分享邀请回答12 条评论分享收藏感谢收起function smartTouchScroll() {
var startY, allow, body = document.body;
function isAllow(target, r, adjust) {
adjust = adjust || 0;
r.down = r.down || (target.scrollTop & 0);
var scrollHeight = target !== body ? target.scrollHeight + adjust: target.clientHeight;
var $target = $(target);
if ($target.css('overflow-y') !== 'hidden') {
= r.up || (target.scrollTop & scrollHeight - target.clientHeight);
if (!r.down || !r.up) {
adjust = $target.cssv('margin-top');
target = target.offsetParent;
if (!!target) {
return isAllow(target, r, adjust);
document.addEventListener('touchstart', function(event) {
allow = body.clientHeight & window.innerHeight
? {up: true, down: true}
: isAllow(event.target, {});
startY = event.pageY;
document.addEventListener('touchmove', function(event) {
var up = (event.pageY & startY), down = (event.pageY & startY);
startY = event.pageY;
if ((up && allow.up) || (down && allow.down)) {
event.stopPropagation();
event.preventDefault();
01 条评论分享收藏感谢收起写回答如何用div实现页面上下部分固定，中间部分随滚动条移动而移动的代码_百度知道
如何用div实现页面上下部分固定，中间部分随滚动条移动而移动的代码
上下蓝色部门始终固定，中间灰色部分可以随浏览器滚动条上下移动 。中间灰色部分的内容会随着滚动条的上下移动至上蓝色后边。
我有更好的答案
代码详情如下，直接使用即可！.content1{overflow:overflow-y:SCROLLBAR-FACE-COLOR:#205e17;SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-3DLIGHT-COLOR:#205e17;SCROLLBAR-TRACK-COLOR:#205e17;SCROLLBAR-DARKSHADOW-COLOR:#205e17;SCROLLBAR-BASE-COLOR:#205e17;SCROLLBAR-ARROW-COLOR:#86ff92;height:700width:748}中间的div就用下面的，样式是上面的。&div class=&content1&&&div&
1、头部定义一个div，固定高度，设置绝对定位(position:absolute)，设置上边距(top:0);2、底部定义一个div，固定高度，设置绝对定位(position:absolute)，设置下边距(bottom:0);3、中间定义一个div，设置滚动条自动(&overflow: auto); 设置绝对定位(position:absolute)，设置top和bottom，top的值等于头部div的高度，bottom的值等于底部div的高度示例&html&&head&&&&&&meta&http-equiv=&Content-type&&content=&text/&charset=UTF-8&&/& &title&&/title& &style&
#page{margin:0&width:960}
#header{width:960&height:60&position:&top:0;background-color:#}
#footer{width:960&height:30&position:&bottom:0;&background-color:#}
#content{width:960&overflow:&&position:&top:60&bottom:30} &/style&&/head&&body&&div&id=&page&& &div&id=&header&&定义顶部&/div&&& &div&id=&content&&content定义中间&/div& &div&id=&footer&&footer定义底部&/div&&/div&&/body&&/html&
width:748}中间的div就用下面的:#205e17;SCROLLBAR-TRACK-COLOR;
SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-SHADOW-COLOR:#86ff92.content1{ overflow: overflow-y:scroll:#205e17:700px:#205e17; height，样式是上面的。&div class=&content1&&&div&SCROLLBAR-DARKSHADOW-COLOR:#205e17;SCROLLBAR-BASE-COLOR; SCROLLBAR-FACE-COLOR;SCROLLBAR-3DLIGHT-COLOR:#86ff92;SCROLLBAR-ARROW-COLOR:#205e17
本回答被提问者和网友采纳
div设置成{position:}
其他1条回答
为您推荐：
其他类似问题
滚动条的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何让DIV固定在页面而不随着滚动条随意滚动_百度知道
如何让DIV固定在页面而不随着滚动条随意滚动
我有更好的答案
&title&gt:div style=&&lt？我们该如何去解除它呢？带着这样的郁闷，我们需要开始新的探险;&lt:20
&Only fit FireFox!
，滚动条是容器所固有的，不管是外面那个滚动条.com--" target="_blank">http，可定位于相对于浏览器窗口的指定坐标;节（root）;&lt。它有一个根;组合在一起;/style&
left:200或者&/head&和&lt，那么您就对了，因为它是依附容器而存在的，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。说到这里您估计都还很清楚。不论窗口滚动与否，元素都会留在那个位置。很显然://volnet.cnblogs.com--&
height:100%;html&&lt， 在根节点下常见的节点中，我们通常能见到&lt，我们将目光投向了CSS规范，是的，HTML的代码就是被解释为了一棵树被浏览器所认识;&lt，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？如果您觉得它是HTML中的一部分，但是效果一模一样噢～）&html&&head&
&title&tag&组成的，而这一大堆的&tag&gt!--Some thing about the fixed style!--&
&style type=&height:888&&&/ style=&border，很显然;body&gt:(&&#47，除了IE7，我们大概能看到fixed是比较符合我们的需 求的：fixed:位置被设置为 fixed 的元素;、&top&quot，我们的挑战还有包括IE6在内的一大堆未知的因素，IE中并不能通过严格的测试，假设fixed对您当前（失败）的浏览器无效的话;text/css&quot？滚动条;css&&/html&不管上面上面说的IE7的strict模式;&quot，并不知道它中间的内容究竟是否需要滚动条的支持。那么让我们回顾上面的那几行代码吧;、&right&quot，那么我们来看看它们的结构，外面是html标签，向内是 body标签：static、&/div&&lt。工作于 IE7（strict 模式）。于是我们很快就有了以下的代码;title&
&;style type=&text/tag&&&#47。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？看到滚动条的控制可以通过CSS的overflow的几个属性来控制首先，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么 作用）改变不了自身显示状况，我们的症结究竟在哪;left&&html&/body&两个 节点，它们之下又有……现在回顾一下我们的问题，我们的问题是我们滚动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。我们能否更换一个思路呢;&head&
.fixed_div{
position,body {
overflow:hidden，啥是滚动条;/head&&body&
&div class=&fixed_div&body&gt，还是里面那个滚动条。难道我们只能使用JavaScript让这一切继续“卡”下去么？（我指的是用JavaScript的时候效果很卡）当然不行，不过很遗憾;&gt，虽然这个方法通过了FireFox，但我们还是宣告失败了;html&head&
overflow-y、absolute、fixed。很高兴，我们在阅读了相关的注释后;
&/tag&gt:1px solid #200888，那就是&html&&&#47。那么下面让我们来回答另一个问题，但是FireFox中却可以通过测试，顾名思义，就是可以滚动的条（ScrollBar）（废话）。准确地说。此元素的位置可通过 &quot:100%;
height，而默认产生滚动条的容器 是&body&&&#47！&div&&&#47.virtual_body {
width，想必大家都不陌生了, I'm content&/title& 以及&bottom& 属性来规定;
width:100%;
。HTML究竟是啥？这个问题换在别的地方问，您可能要搬出一大堆的文档来告诉我HTML的定义，但这里我并不需要那么完整的答案。我们知道HTML是由一大堆 的&!--<a href="http://volnet，我想很多人和我一样很快就想到了position属性;
&body&gt，它们的结构就像一棵 树;/html&节，它并不是浏览器固有的一部分，浏览器 只是默认完整展示了一整个html文档:
overflow-x:
.fixed_div {
z-index:2008;
background:#e5e5e5;
&/style&&/head&&body&&div class=&fixed_div&&I am still here!&/div&&div class=&virtual_body&&
&div style=&height:888&&
I am content !
&/div&&/div&&/body&&/html&分析：html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。通过这篇文章，希望您能解决这个问题，更深入一点，希望您能够对HTML的具体内容有更深刻地理解？刚才我说了。（陌生的朋友点击相关链接即可进入查看）那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？（虽说是模拟，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候.cnblogs，说到定位，我们很容易想到这个属性。这个属性一共有四个 选项
div&&p&p&&p&body&2&/p&&p&2&/2&/2&/p&&p&p&&p&p&&p&p&&p&style&&/&&2&/head&p&&p&p&&p&2&/2&/2&/2&/2&/p&&p&div{
position:p&&p&text/css&2&/2&/p&&p&p&&p&p&&/2&/p&&p&2&/2&/p&&p&p&&p&2&/2&/p&&p&2&/p&&p&2&/p&&p&}&/&2&/p&&p&2&/p&&p&2&/div&some text.&/2&/&p&&p&gt:48%;!DOCTYPE HTML&&html&&head&&style type=&p&&p&p&&p&2&/p&&p&2&/body&gt：
&lt将css中的position设成fixed就行例
为您推荐：
其他类似问题
滚动条的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何实现DIV跟随滚动，到网页底部的时候固定
[问题点数：40分，结帖人allen_studies]
如何实现DIV跟随滚动，到网页底部的时候固定
[问题点数：40分，结帖人allen_studies]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|}