前两天做个图片滚动效果,可是现在发现个问题1、当滚动的内容太短的时候就不滚动
2、滚动到出现右侧边界时就停止滚动
高手赐教
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body> <!--图片滚动代码开始-->
<span id="ademo" style="overflow:hidden;width:960px;">
<span id="ademo1" align="center">
dddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddd
</span> <span id="ademo2" style="visibility:hidden;"></span>
</span>
<script language="javascript">
var speed=8;//速度数值越大速度越慢
var ademo2=document.getElementById("ademo2");
var ademo1=document.getElementById("ademo1");
var ademo=document.getElementById("ademo"); ademo2.innerHTML=ademo1.innerHTML; function Marquee()
{
showInfo();
if(ademo2.offsetWidth-ademo.scrollLeft<=0)
{
ademo.scrollLeft-=ademo1.offsetWidth;
}
else
{
ademo.scrollLeft+=50;
}
}
var MyMar=setInterval(Marquee,speed);
//ademo.onmouseover=function() {clearInterval(MyMar)}
//ademo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function showInfo()
{
document.getElementById("eee").innerHTML="ademo2.offsetWidth=" + ademo2.offsetWidth + "<br>" + "ademo.scrollLeft=" + ademo.scrollLeft +"<br>" + "ademo2.offsetWidth-ademo.scrollLeft=" + (ademo2.offsetWidth-ademo.scrollLeft).toString()+ "<br>" + "ademo2.offsetWidth-ademo.scrollLeft<=0 =" + (ademo2.offsetWidth-ademo.scrollLeft<=0).toString() + "<br>" + "ademo1.offsetWidth=" + ademo1.offsetWidth + "<br>" + "ademo.offsetWidth=" + ademo.offsetWidth;
}
function resetval()
{
ademo.scrollLeft=0;
}
</script>
<div id="ddd"></div><input type="button" onClick="resetval()" value="=============" >
<div id="eee"></div>
<!--图片滚动代码结束--></body>
</html>
2、滚动到出现右侧边界时就停止滚动
高手赐教
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body> <!--图片滚动代码开始-->
<span id="ademo" style="overflow:hidden;width:960px;">
<span id="ademo1" align="center">
dddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddd
</span> <span id="ademo2" style="visibility:hidden;"></span>
</span>
<script language="javascript">
var speed=8;//速度数值越大速度越慢
var ademo2=document.getElementById("ademo2");
var ademo1=document.getElementById("ademo1");
var ademo=document.getElementById("ademo"); ademo2.innerHTML=ademo1.innerHTML; function Marquee()
{
showInfo();
if(ademo2.offsetWidth-ademo.scrollLeft<=0)
{
ademo.scrollLeft-=ademo1.offsetWidth;
}
else
{
ademo.scrollLeft+=50;
}
}
var MyMar=setInterval(Marquee,speed);
//ademo.onmouseover=function() {clearInterval(MyMar)}
//ademo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function showInfo()
{
document.getElementById("eee").innerHTML="ademo2.offsetWidth=" + ademo2.offsetWidth + "<br>" + "ademo.scrollLeft=" + ademo.scrollLeft +"<br>" + "ademo2.offsetWidth-ademo.scrollLeft=" + (ademo2.offsetWidth-ademo.scrollLeft).toString()+ "<br>" + "ademo2.offsetWidth-ademo.scrollLeft<=0 =" + (ademo2.offsetWidth-ademo.scrollLeft<=0).toString() + "<br>" + "ademo1.offsetWidth=" + ademo1.offsetWidth + "<br>" + "ademo.offsetWidth=" + ademo.offsetWidth;
}
function resetval()
{
ademo.scrollLeft=0;
}
</script>
<div id="ddd"></div><input type="button" onClick="resetval()" value="=============" >
<div id="eee"></div>
<!--图片滚动代码结束--></body>
</html>
解决方案 »
- 通过什么方法可以获取某个dom元素上面都绑定了哪些事件
- 求浮动于网页右下角的播放flv或swf的代码
- 一个需求不是很理解,大家给个思路或给个参考
- 如何实现jtextarea中文字拖拽来?
- 如何实现点击页面A上的按钮,控制Div层B的显示
- for 里面加 if判断
- 表格背景色的问题
- 请问一个有关传递参数的问题?
- jquery 的蛋疼问题。
- javascript调用WScript.Shell使ie全屏的问题
- javascript求救!!!!
- 字符串1=“,1,2,3,4,6,4,0,” 字符串2=“,2,4,0” 如何去除去除字符串1里面的“2,4,0”,凡是带包括2,4,0都去掉,并去掉后面的逗号??
建议先看看各个定位参数代表什么
这个说的不够详细, 设定scroll时并不是跟设定left,top属性一样的随意设定, 而是跟dom结点之间的关系相关, 比如当字符太短时, scrollleft始终是0, 到右边时, 始终是最大值. 这个需要自己在使用的过程中多体会.解决方法是, ademo1设定position(absolute/relative均可), 然后通过操作left属性控制位置.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body> <!--图片滚动代码开始-->
<span id="ademo" style="height:30px;overflow:hidden;width:960px;">
<span id=ademo_con>
<span id="ademo1" align="center" style="height:20px;white-space:nowrap;float:left;display:inline">
前两天做个图片滚动效果,可是现在发现个问题
1、当滚动的内容太短的时候就不滚动
2、滚动到出现右侧边界时就停止滚动
前两天做个图片滚动效果,可是现在发现个问题
1、当滚动的内容太短的时候就不滚动
2、滚动到出现右侧边界时就停止滚动
--
</span>
<span id="ademo2" style="height:20px;white-space:nowrap;float:left;display:inline"></span>
</span></span>
<script language="javascript">
var speed=80;//速度数值越大速度越慢
var ademo2=document.getElementById("ademo2");
var ademo1=document.getElementById("ademo1");
var ademo=document.getElementById("ademo");
var ademo_con=document.getElementById("ademo_con");ademo2.innerHTML=ademo1.innerHTML;
ademo_con.style.width=ademo2.offsetWidth*2+"px"
function Marquee(){
showInfo();
if(ademo2.offsetWidth-ademo.scrollLeft<=0){
ademo.scrollLeft-=ademo1.offsetWidth+260;
}
else{
ademo.scrollLeft+=5;
}
}
var MyMar=setInterval(Marquee,speed);
//ademo.onmouseover=function() {clearInterval(MyMar)}
//ademo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}function showInfo(){
document.getElementById("eee").innerHTML="ademo2.offsetWidth=" + ademo2.offsetWidth + "<br>" + "ademo.scrollLeft=" + ademo.scrollLeft +"<br>" + "ademo2.offsetWidth-ademo.scrollLeft=" + (ademo2.offsetWidth-ademo.scrollLeft).toString();
}function resetval(){
ademo.scrollLeft=0;
}
</script>
<div id="ddd"></div><input type="button" onClick="resetval()" value="=============" >
<div id="eee"></div>
<!--图片滚动代码结束--></body>
</html>
showInfo();
if(ademo2.offsetWidth-ademo.scrollLeft<=0){
ademo.scrollLeft-=ademo1.offsetWidth+260;
}
else{
ademo.scrollLeft+=5;
}
}
你这里的260哪里来的?
如果我换个宽度,是不是还需要重新设这个值?
960px换小点100px,滚动的内容的宽度要大于滚动容器的宽度