【转载】<marquee>标签去除空白代码
2017-07-13 16:30
513 查看
原来一直用<marquee>标签,就是有空白,不美观,当然如果不在意那段空白的还是推荐<marquee>标签,短小效率高.
去网上搜了下,有好多,下面的比较好用.贴上来以备不时之需
向上:
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向下:
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左:
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://blog.163.com/gfjs.gif"><img
src="http://blog.163.com/bxtt.gif"><img src="http://blog.163.com/bzjd.gif"><img src="http://blog.163.com/gfjs.gif"><img src="http://blog.163.com/bxtt.gif"><img
src="http://blog.163.com/bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向右:
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://blog.163.com/gfjs.gif"><img
src="http://blog.163.com/bxtt.gif"><img src="http://blog.163.com/bzjd.gif"><img src="http://blog.163.com/gfjs.gif"><img src="http://blog.163.com/bxtt.gif"><img
src="http://blog.163.com/bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
去网上搜了下,有好多,下面的比较好用.贴上来以备不时之需
向上:
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向下:
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
<img src="http://blog.163.com/gfjs.gif"><br><img src="http://blog.163.com/bxtt.gif"><br><img src="http://blog.163.com/bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左:
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://blog.163.com/gfjs.gif"><img
src="http://blog.163.com/bxtt.gif"><img src="http://blog.163.com/bzjd.gif"><img src="http://blog.163.com/gfjs.gif"><img src="http://blog.163.com/bxtt.gif"><img
src="http://blog.163.com/bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向右:
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://blog.163.com/gfjs.gif"><img
src="http://blog.163.com/bxtt.gif"><img src="http://blog.163.com/bzjd.gif"><img src="http://blog.163.com/gfjs.gif"><img src="http://blog.163.com/bxtt.gif"><img
src="http://blog.163.com/bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
相关文章推荐
- HTML ---滚动条样式代码及<marquee>标签的用法;
- Android 使用<include /> 标签来重用layout代码
- 根据身份证号码导出生日和性别(JavaScript代码) <别人空间转载的>
- (转载)HTML标签<br><br/>的区别在哪里?
- CSS颜色代码大全及<a>标签超链接颜色改变
- 去除CKEditor自动添加的<p></p>标签的方法, 有两种办法:
- EL表达式的相关代码和jstl中的<c:if>、<c:foreach>标签
- HTML<marquee>标签
- php去除html代码中的标签,写空白字符
- css去除<img>图片下多余空白区域
- 转载:struts标签<s:date>的使用
- 使用<include /> 标签来重用layout代码(转)
- struts2标签遍历时,显示内容忽略<html>代码问题
- 如何在Html的CSS中去除<li>标签前面小黑点
- CSS颜色代码大全及<a>标签超链接颜色改变
- html的锚标签<a>中使用javascript代码
- <转载>浅析如何去除Strings中的C#空格
- 10大最适合编程的字体推荐下载,让代码看起来更美更舒服!<转载>
- 图片攻击-BMP图片中注入恶意JS代码 <转载>
- <转载>.NET:一段比较经典的多线程学习代码