求助:一个关于图片横向无间断滚动的问题
现需要再一个变态的环境下 实现 图片横向无间断滚动该环境 css 不支持 overflow
Dhtml不支持 offsetWidth 等offset????
不支持 scrollLeft 等scoll?????
所以常用的js 移动的方法都无效
maquee 是支持的
帮忙想想还有什么方式 能实现图片无间断滚动的效果
先谢了 [html]
<style>
*{padding:5px;margin:0;}
#demo img{width:300px;height:200px;}
#demo div{}
ul,li{LIST-STYLE-TYPE: none;display:inline;float:left;text-align:center;padding:0 1px;}
.ZL2{float:left;width:1244px;}
img{border:0}
</style>
<div id=demo style="overflow:hidden;height:240px;width:576" >
<div id="con" style="width:2500px">
<div class="ZL2"id=demo1>
<ul>
<li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas003.jpg"/><br>111</a></li>
<li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas005.jpg" /><br>222</a></li>
<li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas001.jpg" /><br>333</li>
<li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas009.jpg" /><br>444</a></li>
</ul>
</div>
<div class="ZL2" id=demo2 style="margin-left:-16px;"></div>
</div>
</div>
<script>
var speed=1
demo2.innerHTML=demo1.innerHTML
function Marquee(){
var Mleft=parseInt(con.style.marginLeft||con.currentStyle.marginLeft)
//alert(Mleft)
if(Mleft<=-1244)
con.style.marginLeft=(Mleft+1244-16)+"px"
else{
con.style.marginLeft=Mleft-1+"px"
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
[/html]
[[i] 本帖最后由 caiying2007 于 2008-8-28 19:04 编辑 [/i]] overflow:hidden 不支持:(
没办法 用层做类似遮照 [attach]98657[/attach]
[[i] 本帖最后由 caiying2007 于 2008-8-28 22:05 编辑 [/i]] 呵呵，版主的那个应该可以啊，看起来挺舒服的！ 查了一下 崩溃了:(
marginLeft 不支持
我想能不能用maquee滚动 然后用背景移动 把前面的空白填上 做了个移动背景的测试
[html]
<html>
<head>
</head>
<style type="text/css">
<!--
#pic {
width:480px;
height:320px;
border: 3px solid #ccc;
background-image: url(http://bbs.blueidea.com/images/default/logo.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
var p = new Array();
var xPos = 0 ;
var yPos = 0 ;
function moveLeft(){
xPos++;
//yPos++;
// alert(xPos+"px "+yPos+"px")
document.getElementById('pic').style.backgroundPosition=xPos+"px "+yPos+"px";
}
function autoPlay(){
//setInterval("moveLeft()",50);
doAutoPlay = setInterval("moveLeft()",50);
}
function stopPlay(){
clearInterval(doAutoPlay);
//doAutoPlay = null;
}
-->
</script>
<body>
<div id="pic"> </div>
<a href="#" onClick="autoPlay()">+</a> <a href="#" onClick="stopPlay()">-
</a>
</body>
[/html]
放到环境中测试 再次崩溃
不支持backgroundPosition
:(
帮忙支支招 实在是没办法了-_!!
[[i] 本帖最后由 Aero-lk 于 2008-8-29 11:23 编辑 [/i]] [attach]98684[/attach] 不支持 css positioning properties
Left 不起作用 Flash/gif
回复 4# caiying2007 的帖子
怎么不支持ff 哈哈版主 直接无语了 请使用Flash/gif
页:
[1]