横向无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分享一个横向图文无缝滚动的代码，全兼容</title>
</head>
<body>
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:left; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
.lmboxb ul {
margin-left:12px;
margin-top:5px;
}
.lmboxb ul li {}
.lmboxb ul li a {
line-height:24px;}
}
-->
</style>
<div id="demo">
<div id="indemo">
<div class="lmboxb" id="demo1">
<ul>
<li>
<div></div>
<div><a href="#">春季女性补血食谱</a></div>
</li><li>
<div></div>
<div><a href="#">大枣木耳汤 神情气爽</a></div>
</li><li>
<div></div>
<div><a href="#">春季女性补血食谱</a></div>
</li><li>
<div></div>
<div><a href="#">大枣木耳汤 神情气爽</a></div>
</li><li>
<div></div>
<div><a href="#">大枣木耳汤 神情气爽</a></div>
</li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<div style="width:100%;">
</div>
<script>
<!--
var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>

时间： 2024-10-10 19:44:28

横向无缝滚动的相关文章

marquee横向无缝滚动无js

<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title></head><body><marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.

信息无缝滚动效果marquee

横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML2. scrollTop3. offsetHeight4. setInterval()5. clearInterval() HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset

javascript无缝滚动原理

相比之下,无缝拼接能避免切换时出现空白,使用户体验更好! 无缝滚动原理: 制作一个双胞胎,内容跟主体内容一致,样式一致,如果横向排列则并排,当切换的时候,就可以弥补主体空白的地方,其他按普通循环操作即可. 源码: <!DOCTYPE html> <html lang="zn-ch"> <head> <meta charset="UTF-8"> <title>demo</title> <st

自己编写插件 之 无缝滚动

昨天 - 扒衣见君节,今天 - 牛郎织女节.光棍只能来撸代码了,哎! 首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 over

CSS3实现无限循环的无缝滚动

有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setInterval向上滚动A的父级容器: 当向上滚动的距离L正好的A的高度时(L==A.height()),L=0,重新开始滚动,无限循环. 克隆一份数据放在后面,是为了当A向上移动时,后面有数据能填补漏出来的空白.当B移动到可视区域的顶部时,此时A刚好移出可视区域,那么此时将容器重新归0,用户是没有感知

jq封装-无缝滚动效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{ margin:0; padding: 0; } .outer{ position: relative; margin:30px auto; border:1px solid #ccc; border

JS 实现无缝滚动动画原理（初学者入）

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码:https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML ps: 上面和下面的滚动进度是一致的,上面红色框是为了演

SuperSlidev2.1 轮播图片和无缝滚动

SuperSlidev2.1 轮播图片和无缝滚动 使用方法点击链接:http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"><ul><li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a hr

JQuery中Table标签页和无缝滚动

HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/tab1.css" /> <script src="js/jquery.js"></script> &