标题:兼容性好的图片滚动代码,能否分享一下?[问题已解决,加给175版主50分!]
只看楼主
tepnidh
Rank: 2
等 级:论坛游民
帖 子:192
专家分:24
注 册:2009-8-2
结帖率:87.5%
已结贴  问题点数:50 回复次数:7 
兼容性好的图片滚动代码,能否分享一下?[问题已解决,加给175版主50分!]
谢谢您!

[ 本帖最后由 tepnidh 于 2010-7-22 17:00 编辑 ]
搜索更多相关主题的帖子: 加给 兼容性 代码 滚动 分享 
2010-07-22 10:50
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
得分:50 
程序代码:
<style>
.dhMarquee {width:120px;height:450px;text-align:center;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
.mqdemo {margin:0px auto;padding:0px;border:0px;}
.dhScrollA {font-size:12px;display:block;padding:2px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1">
<div id="mqdemo" class="mqdemo">
<a class="dhScrollA" href="javascript:alert('1')"><img src='1.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('2')"><img src='2.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('3')"><img src='3.jpg' width='100px' height='100px'/></a>
</div>
</div>
<script language="javascript"> 
var speed = 10; 
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetHeight;
var odl = omqdemo.offsetHeight;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){

 var o = omqdemo.cloneNode(true);

 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){

 oMarquee.scrollTop += iScrollAmount;

 var ol = oMarquee.scrollTop;

 if(odl-ol<=0){
  oMarquee.scrollTop = 0;

 }
}
var MyMar = window.setInterval(scroll,speed); 
</script>

上下滚动,可以兼容市场上常见的多种浏览器!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-07-22 11:18
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
得分:0 
再发一个左右滚动的代码:
程序代码:
<style>
a {font-size:12px;} 
.dhMarquee {
width:500px;
height:110px;
line-height:110px;
text-align:center;
margin:0px;
padding-top:8px;
*_padding-top:4px;/*IE*/
border:1px solid #000;
overflow:hidden;
white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;}
.dhScrollA img{border:0px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
<span id="mqdemo" class="mqdemo"> 
<a class="dhScrollA" href="javascript:alert('1')"><img src='1.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('2')"><img src='2.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('3')"><img src='3.jpg' width='100px' height='100px'/></a>
</span> 
</div> 
<script language="javascript"> 
var speed = 90; 
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){

 var o = omqdemo.cloneNode(true);

 oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){

 oMarquee.scrollLeft += iScrollAmount;

 var ol = oMarquee.scrollLeft;

 //IE和FF的位置有不同

 if(isMSIE){
  if(odl-ol<=0){
   oMarquee.scrollLeft = 0;
  }

 }

 else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }

 }
}
var MyMar = window.setInterval(scroll,speed); 
</script>

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-07-22 11:48
tepnidh
Rank: 2
等 级:论坛游民
帖 子:192
专家分:24
注 册:2009-8-2
得分:0 
回复 3楼 gupiao175
非常感谢您,很好用!这里再请教您一下,在左右滚动的代码中,在哪儿能改动图片的间距啊?期待着。。。。。。再次表示谢意!!!...................................给您加50分!

[ 本帖最后由 tepnidh 于 2010-7-22 14:08 编辑 ]
2010-07-22 13:54
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
得分:0 
在style里多加入这么一句控制A的右边距即可:
.dhScrollA{margin-right:25px;}/*25这个数值可以自己定,也可以改小点,自己慢慢调整体会吧!*/


Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-07-22 15:06
tepnidh
Rank: 2
等 级:论坛游民
帖 子:192
专家分:24
注 册:2009-8-2
得分:0 
回复 5楼 gupiao175
谢谢!试了一下,只能调整一组图片的首尾间距,图片间的间距没有变化。
2010-07-22 15:27
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
得分:0 
不会吧,我这里测试FF还是IE6,在每张图片之间都是有间距的!
我是放在这两句之间
.mqdemo {margin:0px;padding:0px;border:0px;}
.dhScrollA{margin-right:25px;}
.dhScrollA img{border:0px;}

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-07-22 15:46
tepnidh
Rank: 2
等 级:论坛游民
帖 子:192
专家分:24
注 册:2009-8-2
得分:0 
回复 7楼 gupiao175
谢谢您的支持和帮助!我在网上找到了一个代码很好用!您的我再试试,再次感谢!
<style type="text/css">
   img{
    margin:5px;}
</style>
2010-07-22 16:08



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-313701-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.122179 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved