衡水网站建设,衡水网络公司,衡水做网站,衡水网站制作,安平网站建设,安平网站优化,冀州网站建设,武强网站建设,衡水做网站的公司

我们是技术出身,不擅长花言巧语
我们只专心为客户提供实实在在、看得见的技术与服务!

seo学习

无限互联 无尽商机 成就你我 传递价值!

Unlimited Internet endless business opportunities to achieve your value to me!首页  »  新闻中心  »  seo学习

marquee和#demo配合实现图片向左向右不间断滚动的效果

来源:http://www.baisoubao.cn/  发布者:网站建设 发布时间:2012-11-1 10:14:52 浏览量:

marquee图片无缝滚动
先了解一下对象的几个的属性:
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
 ------------------------------------------以下开始样式的描述---------------------------------

图片向左无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
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>
------------------------------------------------------
图片向右无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.baisoubao.cn/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->


(转载请注明转自:http://www.chaofan.biz 谢谢!)
  • 60天打造网络营销的主战场!

    专业独家定位策划;三站合一网络营销系统助力更多的关键词上百度首页!

  • 180天快速见效

    专业营销人员协助客户进行网络推广有效快速提升网站转化率,180天快速见效!

  • 打破潜规则,帮你打造团队!

    为您打造一支高效率网络营销运营团队,让你自主操盘网络营销!让你的网络营销真正落地!

  • 7*24小时售后服务保障

    云商衡水网站建设团队将以专业的态度,为您提供100%的专业服务!
    网站有问题3分钟内即可作出反馈