千秋霸业
- 浏览: 16596 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
javascript实现走马灯效果[无缝连接、循环滚动、无空白maquee]
以下代码在IE6、Firefox+Win2k环境下测试通过
一、向上的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<div id="demo1">
<!-- 定义内容-->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.gif">
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //滚动速度值，值越大速度越慢
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器
-->
</script>
二、向下的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<div id="demo1">
<!-- 定义内容-->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.gif">
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //数值越大滚动速度越慢
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>
三、向左的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
<td id="demo2"> </td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //数值越大滚动速度越慢
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>
四、向右的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
<td id="demo2"> </td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //数值越大滚动速度越慢
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>
来源：http://thomaslee007.javaeye.com/blog/204708
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
上下綜合實例
<a href="#" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed" >^^^^^^^^^^^^^^^^^^^^^^^^</a>
<div id=demo style="overflow:hidden;height:421px;width:190px;">
<div id="demo1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="421" align="center">
<table width="95%" border="0" cellspacing="7" cellpadding="0">
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=1"><img src="http://qz/upload/2008/12/20081216101239_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=2"><img src="http://qz/upload/2008/12/20081216101251_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=1"><img src="http://qz/upload/2008/12/20081216101239_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=2"><img src="http://qz/upload/2008/12/20081216101251_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
<a href="#" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)" >ⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤ</a>
<script>
var speed=1 ;
var addspeed=1;
var dafault_addspeed=1;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML ;
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop=demo.scrollTop+addspeed;
}
}
function rightAddSpeed(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop-=10;
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
=================================================
+++++++++++++++左右綜合实例++++++++++++++
<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="153" valign="top" background="images/pro_centerbg2.jpg"><table width="1002" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="106" align="center" valign="top"><img src="images/jiantou_left.jpg" width="60" height="88" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed"/></td>
<td width="790" valign="top">
<!----------------------------小圖展示區------------------------------------>
<div id=demo style="overflow:hidden;height:100px;width:790px;">
<table>
<tr>
<td id="demo1" valign="top">
<table width="790" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="131" align="center" valign="top" >
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest1.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top" >
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest2.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest3.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest4.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest5.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="135" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest6.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="135" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest6.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
</tr>
</table>
</td>
<td valign="top" id="demo2"></td>
</tr>
</table>
</div>
<!----------------------------小圖展示區end------------------------------------>
</td>
<td width="106" align="center" valign="top"><img src="images/jiantou_right.jpg" width="60" height="88" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)"/></td>
</tr>
</table></td>
</tr>
</table>
<script>
var speed=1
var addspeed=1;
var dafault_addspeed=1;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft=demo.scrollLeft+addspeed
}
}
function rightAddSpeed(){
if(demo2.offsetWidth-demo.scrollLeft>0)
demo.scrollLeft+=demo1.offsetWidth
else{
demo.scrollLeft=demo.scrollLeft-10
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
一、向上的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<div id="demo1">
<!-- 定义内容-->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.gif">
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //滚动速度值，值越大速度越慢
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器
-->
</script>
二、向下的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<div id="demo1">
<!-- 定义内容-->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.gif">
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //数值越大滚动速度越慢
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>
三、向左的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
<td id="demo2"> </td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //数值越大滚动速度越慢
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>
四、向右的无缝循环滚动
程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
<td id="demo2"> </td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //数值越大滚动速度越慢
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>
来源：http://thomaslee007.javaeye.com/blog/204708
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
上下綜合實例
<a href="#" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed" >^^^^^^^^^^^^^^^^^^^^^^^^</a>
<div id=demo style="overflow:hidden;height:421px;width:190px;">
<div id="demo1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="421" align="center">
<table width="95%" border="0" cellspacing="7" cellpadding="0">
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=1"><img src="http://qz/upload/2008/12/20081216101239_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=2"><img src="http://qz/upload/2008/12/20081216101251_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=1"><img src="http://qz/upload/2008/12/20081216101239_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href="main.php?action=introduce_view&id=2"><img src="http://qz/upload/2008/12/20081216101251_small.jpg" width="180" height="73" border="0" /></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
<a href="#" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)" >ⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤ</a>
<script>
var speed=1 ;
var addspeed=1;
var dafault_addspeed=1;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML ;
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop=demo.scrollTop+addspeed;
}
}
function rightAddSpeed(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop-=10;
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
=================================================
+++++++++++++++左右綜合实例++++++++++++++
<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="153" valign="top" background="images/pro_centerbg2.jpg"><table width="1002" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="106" align="center" valign="top"><img src="images/jiantou_left.jpg" width="60" height="88" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed"/></td>
<td width="790" valign="top">
<!----------------------------小圖展示區------------------------------------>
<div id=demo style="overflow:hidden;height:100px;width:790px;">
<table>
<tr>
<td id="demo1" valign="top">
<table width="790" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="131" align="center" valign="top" >
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest1.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top" >
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest2.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest3.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest4.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="131" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest5.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="135" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest6.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
<td width="135" align="center" valign="top">
<DIV class="example" style="width:130px; ">
<!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
<DIV class="bd" style="width:110px; height:74px;">
<img src="images/protest6.jpg" width="110" height="74" /></DIV>
<!--[if lte IE 6.5]></v:rect><![endif]-->
</DIV>
</td>
</tr>
</table>
</td>
<td valign="top" id="demo2"></td>
</tr>
</table>
</div>
<!----------------------------小圖展示區end------------------------------------>
</td>
<td width="106" align="center" valign="top"><img src="images/jiantou_right.jpg" width="60" height="88" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)"/></td>
</tr>
</table></td>
</tr>
</table>
<script>
var speed=1
var addspeed=1;
var dafault_addspeed=1;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft=demo.scrollLeft+addspeed
}
}
function rightAddSpeed(){
if(demo2.offsetWidth-demo.scrollLeft>0)
demo.scrollLeft+=demo1.offsetWidth
else{
demo.scrollLeft=demo.scrollLeft-10
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
分享到：
发表评论
相关推荐
5. 判断当滚动条到达指定内容宽度时，将内容追加到元素的末尾，实现循环滚动。 6. 通过setInterval函数设置scroll函数定时执行，以达到连续滚动的效果。 在实际项目中，推荐使用第二种方法，因为其可定制性更高，...
通过研究源码，可以了解如何使用编程语言（如JavaScript、Python等）结合数据可视化库来创建复杂的可视化界面，以及如何实现数据的动态加载和交互功能。 5. 可演示特性：此DEMO源码是可演示的，意味着它可以作为一...
ECharts是一个基于JavaScript的数据可视化库，它充分利用了HTML5的Canvas或SVG进行图表渲染。ECharts提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、K线图等，能够满足各种数据分析和展示需求。此外，...
特征 这是vue专有的选取框组件，其特征是无限的上下旋转木马，将首尾相连。 用法 安装 npm i @ vue_modules / vue - marquee - straight 基本的 ...import TheMarquee from "@vue_modules/vue-marquee-straight" ;...
【资源说明】 基于微信小程序的校园论坛；微信小程序；云开发；云数据库；云储存；云函数；纯JS无后台；全部资料+详细文档+高分项目.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
单电阻采样 基于单电阻采样的相电流重构算法 keil完整工程。 单电阻采样 f103的单电阻，完整工程，带文档，带硬件资料。 f3平台的单电阻完整工程，代码详细注释。 还有微芯的单电阻smo代码加文档 具体如截图请看下
jQuery左侧导航右侧tab页面切换
哈希查找
五相电机邻近四矢量SVPWM模型_MATLAB_Simulink仿真模型包括： （1）原理说明文档（重要）：包括扇区判断、矢量作用时间计算、矢量作用顺序及切时间计算、PWM波的生成； （2）输出部分仿真波形及仿真说明文档； （3）完整版仿真模型：Simulink仿真模型； 注意，只包含五相电机邻近四矢量SVPWM算法，并非五相电机双闭环矢量控制，如果想要五相电机双闭环矢量控制资料，另一个链接。 资料介绍过程十分详细
法码滋.exe法码滋2.exe法码滋3.exe
项目包含完整前后端源码和数据库文件，均测试可正常运行 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 部署容器：tomcat7
算法允许用户在图像上自行划定标签，并对这些区域内的图像进行肤色检测和处理；最后在一个PyQt窗口中显示处理后的三张图片，分别为带标签图片，二值化图片，膨胀后图片。
内容概要： 本资料包含了一系列用于庆祝浪漫节日的创意代码，主要包括爱心代码和圣诞树代码。这些代码可以生成视觉上吸引人的图案和动画，用于在屏幕上展示爱心和圣诞树，增加节日气氛。爱心代码可以用于表达爱意，而圣诞树代码则适合在圣诞节期间使用，为用户带来节日的欢乐和视觉享受。 适用人群： 本资料适用于以下人群： 程序员和开发者，他们希望在项目中添加节日元素或为特别场合创造个性化的视觉效果。 网页设计师，他们需要为网站或应用程序添加节日主题的装饰。 技术爱好者和DIY爱好者，他们喜欢通过编程来庆祝节日或为朋友和家人制作特别的礼物。 实现：可直接运行python程序。
1. 患者信息与隔离状态管理 患者基本信息录入：对于疑似、确诊或密切接触者患者，系统记录其基本信息，包括姓名、年龄、性别、联系方式、住址等。 疫情风险评估：通过问卷或医务人员评估，系统对患者进行风险评估，判断是否需要隔离、隔离的级别（如轻症、中症、重症等）。 隔离状态管理：记录患者的隔离状态（如隔离中、已解除隔离、转入ICU等），并能够实时更新隔离状态变化。 隔离病房分配：根据患者的病情、感染风险和病房资源，系统自动分配适当的隔离病房或床位，避免交叉感染。 2. 隔离病房与环境管理 病房信息管理：系统对每个隔离病房进行实时监控，包括病房的床位使用情况、设备设施、清洁消毒状况等，确保每个病房的隔离效果。 空气流通与环境消毒管理：记录隔离病房的空气流通情况、消毒记录、物品消耗等，确保符合疫情防控要求。 设备与物资分配：针对隔离病房的特殊需求，系统可以自动化管理医疗设备（如氧气、呼吸机等）与防护物资（如口罩、手套、防护服等）的分配与库存管理。 3. 医护人员防护与工作管理 医护人员排班与防护管理：为隔离病房的医护人员进行特殊排班，避免交叉感染，并根据需要分配适当的防护装备，如全身防护服、N9
适配文章:https://editor.csdn.net/md?not_checkout=1&spm=1011.2415.3001.6217&articleId=144663667 富芮坤FR8003作为主机连接FR8003二:官方代码主从的UUID和att_idx
内容概要：文章介绍了USB PD协议单口控制器DP3145D的技术特点、主要功能和应用场景。DP3145D支持USB Type-C和USB Power Delivery（PD）3.1协议，具备多种配置选项，最高输出功率45W。它集成了CV环路光耦驱动电路、反馈网络电阻以及多项保护措施，适用于ACDC适配器等USB充电设备。 适合人群：电子工程师、电源产品设计师和技术研究人员。 使用场景及目标：主要用于设计和开发支持USB PD协议的ACDC适配器和充电设备，实现高效、安全的充电解决方案。 阅读建议：重点关注DP3145D的具体技术参数、功能特点和典型应用实例，结合自身需求进行产品选型和设计。
VBA视频教程 05
基于Spring Boot框架的网上蛋糕销售系统_30z8r428_231-wx.zip
matlab
蜡笔小新-去掉动效.zip