HTML语言。写一个图片移动的代码。要求:从右往左滚动,鼠标放上去停止,显示大图,移出继续滚动,大图消

滚动我会做,显示大图,隐藏大图我也会做,我的问题是两个结合在一起。具体的可行性代码

图片向左无缝滚动

<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.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/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>
温馨提示:内容为网友见解,仅供参考
第1个回答  2011-04-07
假如function a{}是执行滚动的函数这个你会做
function b{}是执行显示大图缩小大图的函数这个你也会做
那么只有将这两个函数放到一个function c{}中不就可以实现了吗?
然后鼠标onmouserover事件触发时调用function c{}就可以了本回答被提问者采纳
第2个回答  2011-04-01
marquee direction=right
好像是这个标签吧
不大记得了
那就是在onmouseon这个事件上加上显示大图的function名就可以了啊

...要求:从右往左滚动,鼠标放上去停止,显示大图,移出继续滚动,大图消...
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...

html中如何制作随着屏幕滚动的文字(就是会跟着屏幕走的文字)
direction=up(left、right、down) 这个属性可以更改,这样就可以实现上下左右了 但是.我建议用一种无缝的文字滚动.这样的效果会比较好看.而用marquee就没那么好了方法代码 先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo...

急求html代码,当鼠标移动到图片,图片停此滚动?
<img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <\/div> <div id=butong_net_bottom2><\/div> <\/div> <script> var speed=30 butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML butong_ne...

网页制作-图片从左向右滚动且鼠标之在图片上就暂停的现成代码
<marquee height="150" width="345" behavior="alternate" scrollamount="4" scrolldelay="100" id="myopus" onmouseout=myopus.start() onmouseover=myopus.stop() > <table width="10" height="150" border="3" cellpadding="0" cellspacing="3" bordercolor="#5BA7FF"> <tr> <td align...

网页中的滚动图片的代码怎么写?
\/\/鼠标移开时重设定时器 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} <\/script> <!--向上滚动代码结束--> <!--下面是向下滚动代码--> <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> <div id="colee_bottom1"> <p><img src="\/...

图片不间断循环滚动代码(向左,向右,向上,向下)
demo.scrollLeft++ \/\/向左} } var MyMar=setInterval(Marquee,speed)demo.onmouseover=function(){clearInterval(MyMar)} demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} <\/script>\/\/向右滚动,其实代码差不多,就一个地方不一样<script> var speed=30 demo2.innerHTML=demo1.inner...

鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片?
代码有bug,修改后如下:需要注意,拷贝下面这段代码,保存为 html后缀名的文件;需要自己在相同的目录下,放置两张图片,小图片.jpg 大图片.jpg 效果如下图:当鼠标悬停在小图片上面的时候,会显示大图片;鼠标移出,隐藏大图片。问题:定位需要读者自己去实现一下吧,偷懒了。感谢楼上分享!<!docty...

寻求一段dreamweaver代码:让多张照片在一个框中来回(从右向左)浮动...
icefable1v.innerHTML=icefable2v.innerHTML+icefable2v.innerHTML;setInterval("scrollUp2()",5);} function scrollUp2(){ if(stopscroll2==true) return;currentTopv+=1;if(currentTopv==67){ stoptime2+=1;currentTopv-=1;if(stoptime2==400){ currentTopv=0;stoptime2=0;} } e...

在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)_百度知...
分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸。具体代码实现如下:<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="你的图片路径" style="width:100px;height:100px;" \/> <script type="text\/javascript"> var ...

网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?
DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片热区hover效果<\/title> <style>.main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} \/* 宽度与高度必须与背景大图一致 *\/.bigImg {position: absolute; display: none; border: 1px...

相似回答