下面是两种实现内容滚动效果的实例,供大家参考指正
一、js控制
<div id=ov style="height:32px;overflow:hidden;">
<div id=iv style="padding:32px 0px;">
<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
今天是星期一 ^_^
</div>
<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
今天是星期二 ^_^
</div>
<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
今天是星期三 ^_^
</div>
<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
今天是星期四 ^_^
</div>
<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
今天是星期五 ^_^
</div>
<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
今天是星期六 ^_^
</div>
<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
今天是星期日 ^_^
</div>
</div>
</div>
对应的js部分如下:
var i=null,ccc;
var mf=function(o1,o2){
this.oo=o1;this.oi=o2;this.pl=15;
this.Me=this.Mf=i;this.lt=2E3;this.ah=100;
this.Xz=0;this.Ki=3;this.zi=0
};
pt=mf.prototype;
pt.start=function(){
if(!this.Mf){
var a=this;
this.Mf=window.setInterval(function(){a.Ax()},this.lt)
}
};
pt.stop=function(){
if(this.Mf){
window.clearInterval(this.Mf);
this.Mf=i
}
if(this.Me){
window.clearInterval(this.Me);
this.Me=i
}
};
pt.Pk=function(a){
this.pl=a
};
pt.Ax=function(){
if(!this.Me){
this.zi=1;
var a=this;
this.Me=window.setInterval(function(){a.ci()},this.ah)
}
};
pt.ci=function(){
if(!this.rp()){
this.Xz=0;this.rp()
}
++this.zi;
if(this.zi>this.Ki){
window.clearInterval(this.Me);
this.Me=i;++this.Xz
}
};
pt.rp=function(){
var a=Math.round(this.pl*(this.Xz+this.zi/this.Ki));
this.oo.scrollTop=a;
return this.oo.scrollTop==a
};
var D=function(did){
return document.getElementById(did)
};
var minit=function(k){
var bb=k[0],cc=k[1];
k=k[2];bb=D(bb);cc=D(cc);
if(bb&&cc){
ccc=new mf(bb,cc);ccc.Pk(k);ccc.start();
}
}
window.onload=function(){
var pms=["ov","iv","32"];minit(pms);
}
二、marquee标签
<div>
<MARQUEE scrollAmount=2 direction=up style="height:38px"
onmouseover="this.setAttribute('scrollamount', 0, 0);"
onmouseout="this.setAttribute('scrollamount', 2, 0);">
<ul>
<li style="margin:5px 0 0 5px;">
今天是星期一 ^_^
</li>
<li style="margin:5px 0 0 5px;">
今天是星期二 ^_^
</li>
<li style="margin:5px 0 0 5px;">
今天是星期三 ^_^
</li>
<li style="margin:5px 0 0 5px;">
今天是星期四 ^_^
</li>
<li style="margin:5px 0 0 5px;">
今天是星期五 ^_^
</li>
<li style="margin:5px 0 0 5px;">
今天是星期六 ^_^
</li>
<li style="margin:5px 0 0 5px;">
今天是星期日 ^_^
</li>
</ul>
</MARQUEE>
</div>
ps:下载附件即可看到效果.
分享到:
相关推荐
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图: (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden;) 2. 样式方面:由于要滚动,所以必须2个ul的高度 > ...
主要为大家详细介绍了基于iScroll实现内容滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Unity实现文字滚动效果,可自适应文字长度,鼠标放入UI文字开始滚动,移出后恢复原位。
Jquery实现简单的滚动刷新效果: 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: <form id="form1" runat="server"> </form> Javascript操作代码: $(document)....
用GridView实现数据列表中数据内容滚动 表头固定的例子
Sly 是一个可实现内容滚动幻灯片的jQuery 插件,支持显示图片、文字等其它 HTML 元素。支持鼠标滚轮。它提供了滚动条、前后浏览按钮等多种导航方式,并且内置了不同的导航逻辑,可让你打造出非常给力的内容滚动效果...
纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器
使用QT实现一个消息滚动显示的widget
HTML中实现文字各种滚动HTML中实现文字各种滚动HTML中实现文字各种滚动HTML中实现文字各种滚动
js Tab选项卡标签滑动带滚动条的内容滚动切换显示代码 http://www.17sucai.com/pins/5386.html
自定义UI是高手必经之路,本人目前也在加紧学习中,本篇博文中实现的事自定义TextView实现文本内容的滚动显示,在文本内容超出textview所能显示的区域之后,超出部分没有办法显示,为了能够显示,所以自定义一个属性...
js实现文字内容无缝循环滚动动画效果,效果显示 http://t.harjes.cn/wfgd/ 使用方法简单,希望对有需要的人有帮助
1.前端如何CSS实现文字滚动效果,鼠标悬浮停止滚动 【内容介绍】 主要应用于web后台管理系统的头部实现文字滚动的效果,如何通过CSS来实现文字动态滚动的效果,核心应用于告警展示,重要通知等应用场景。 【页面效果...
就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。志文工作室调研了几种类似功能的实现方法,摘录之以供参考。 参考一、提高浏览量的特效:侧栏跟随滚动条 来源:...
本文实例为大家分享了vue实现整屏滚动切换的具体代码,供大家参考,具体内容如下 1、下载vue-awesome-swiper npm i vue-awesome-swiper -S 2、在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' ...
本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 1、可以自己封装一个组件,也可以自己写,也可以复制以下代码 ...
js div实现左右滚动 无缝接 ,比 marquee强