barriers / 阅读 / 详情

网页中的滚动图片的代码怎么写?

2023-07-27 08:25:31
TAG: 代码 网页
共2条回复
wpBeta

网页中的滚动图片的代码有上下左右四个方向,分别是:

<head>

<----->

</head>

<body>

<!--向上滚动代码开始-->

<div id="colee" style="overflow:hidden;height:253px;width:410px;">

<div id="colee1">

<p><img src=""></p>

<p><img src=""></p>

<p><img src=""></p>

<p><img src=""></p>

<p><img src=""></p>

<p><img src=""></p>

<p><img src=""></p>

<p><img src=""></p>

<p><img src=""></p>

</div>

<div id="colee2"></div>

</div>

<script>

var speed=30;

var colee2=document.getElementById("colee2");

var colee1=document.getElementById("colee1");

var colee=document.getElementById("colee");

colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

function Marquee1(){

//当滚动至colee1与colee2交界时

if(colee2.offsetTop-colee.scrollTop<=0){

colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

}else{

colee.scrollTop++

}

}

var MyMar1=setInterval(Marquee1,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

colee.onmouseover=function() {clearInterval(MyMar1)}

//鼠标移开时重设定时器

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="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>

</div>

<div id="colee_bottom2"></div>

</div>

<script>

var speed=30

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

colee_bottom.onmouseover=function() {clearInterval(MyMar2)}

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>

<!--向下滚动代码结束-->

<div id="colee_left" style="overflow:hidden;width:500px;">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="colee_left1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

</tr>

</table>

</td>

<td id="colee_left2" valign="top"></td>

</tr>

</table>

</div>

<script>

//使用div时,请保证colee_left2与colee_left1是在同一行上.

var speed=30//速度数值越大速度越慢

var colee_left2=document.getElementById("colee_left2");

var colee_left1=document.getElementById("colee_left1");

var colee_left=document.getElementById("colee_left");

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度

colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度

else{

colee_left.scrollLeft++

}

}

var MyMar3=setInterval(Marquee3,speed)

colee_left.onmouseover=function() {clearInterval(MyMar3)}

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>

<!--向左滚动代码结束-->

<!--下面是向右滚动代码-->

<div id="colee_right" style="overflow:hidden;width:500px;">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="colee_right1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>

</tr>

</table>

</td>

<td id="colee_right2" valign="top"></td>

</tr>

</table>

</div>

<script>

var speed=30//速度数值越大速度越慢

var colee_right2=document.getElementById("colee_right2");

var colee_right1=document.getElementById("colee_right1");

var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){

if(colee_right.scrollLeft<=0)

colee_right.scrollLeft+=colee_right2.offsetWidth

else{

colee_right.scrollLeft--

}

}

var MyMar4=setInterval(Marquee4,speed)

colee_right.onmouseover=function() {clearInterval(MyMar4)}

colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

</script>

<!--向右滚动代码结束-->

瑞瑞爱吃桃

图片滚动代码 (从右向左滚动) <marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img border="0" src="要滚动的图片地址1"> <img border="0" src="要滚动的图片地址2"> </marquee> 图片滚动代码 (从下往上滚动) <marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img border="0" src="要滚动的图片地址1"> <img border="0" src="要滚动的图片地址2"> </marquee> 改版: <marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle> <img border="0" src="要滚动的图片地址1"> <img border="0" src="要滚动的图片地址2"> </marquee> 说明: 1.direction属性:决定文本的滚动方向,分为向左left和向右right,up和down默认状态向左。 <marquee direction=left>从右向左滚动</marquee> <marquee direction=right>从左向右滚动</marquee> 2.behavior属性:指定文本的滚动方式,分为三种: Scroll:从一端消失后,在另一端出现并继续滚动。 <marquee behavior=scroll>一圈一圈地滚动</marquee> Slide:从一端滚动,接触到另一端后停止 <marquee behavior=slide>只滚动一次就停止</marquee> Alternate:从一端滚动到另一端后,反向滚动。 <marquee behavior=alternate>来回滚动</marquee> direction=up(left、right、down) 这个属性可以更改,这样就可以实现上下左右了 3.scrolldelay属性设置移动每步的延时单位为毫秒 4.scrollamount 属性 设置滚动速度 单位为秒,取值 1-60

相关推荐

html里的标签吧 marquee是滚动标签 onmouseover 当鼠标指上去 停止滚动 onmouseout 当鼠标离开 开始滚动 后面是marquee的属性 滚动方向 速度 如何滚动
2023-07-26 03:50:472

JS中onmouseout onmouseleave究竟有何区别?

onMouseOut就是鼠标移出规定范围除了你说的几个还有: onmouseenter Fires when the user clicks the object with either mouse button. onmouseleave Fires when the user moves the mouse pointer outside the boundaries of the object. onmousemove Fires when the user moves the mouse over the object. onmouseup Fires when the user releases a mouse button while the mouse is over the object. onmousewheel Fires when the wheel button is rotated.
2023-07-26 03:51:032

onmouseover和onmouseout的用法?

意思是当鼠标滑上触发什么事件,滑离又触发什么事件,比如让鼠标滑上滚动、滑离停止:onMouseOver="this.stop()" onMouseOut="this.start()" 。都是可以的。用处很多。
2023-07-26 03:51:101

用onmouseout和onmouseover怎么改变span或div中的文字的颜色、大小、粗体、字体等?

onmouseover="show()" id="aaa" show(){ set nnn=document.getElementById("aaa") nnn.style.background="#ffffff" }诸如此类的用法 当然还有很多 比如在CSS里 例如<style> .td_mouseover{ background-color:#FF0000; color:#FFFFFF; } .td_normal{ background-color:#FFFFFF; color:#000000; } </style> <table> <tr> <td onmouseover="this.className="td_mouseover";" onmouseout="this.className="td_normal";"> 鼠标经过这里背景和文字会变色 </td> <tr> </table>
2023-07-26 03:51:191

用jquery怎么写onmouseout事件呢 而且刚刚打开页面的时候就默认一种颜色 该怎么写呢

没明白你的意思.onmouseout是鼠标的事件,是指鼠标离开元素时执行的事件.
2023-07-26 03:51:262

onmouseout与onmouseleave的区别是什么?(js)

onMouseOver 就是鼠标经过……也就是鼠标悬停在指定的范围内 onMouseOut相反,就是移出这个范围…………………… 上面那段代码基本上就是鼠标经过的时候显示一个层,然后鼠标移开后这个层就消失………………
2023-07-26 03:51:342

onmouseover,onmouseout的使用方法

<img src="原始图片路径" width="" height="" onmouseover="this.src="鼠标移上的图片路径"" onmouseout="this.src="移开的图片路径""/>还有不清楚的可以继续补充。
2023-07-26 03:51:461

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)

需要准备两张图,一张是小图,一张是指向的时候显示的大图。在小图<img>的hover事件中把大图显示出来就行了(可以先隐藏,指向的时候再显示,然后滑出来的时候再隐藏)。用jquery实现大致就是这样子:$("#xiaotu").hover( function(){ // 滑进去显示隐藏的大图 }, function(){ // 划出去隐藏已经显示的大图 });
2023-07-26 03:52:183

JS:子元素 onmouseover 触发了父元素的 onmouseout,子元素的onmouseout 同时也触发 父元素的 onmouseout

代码贴出来!
2023-07-26 03:53:503

怎么用JS控制表格中的onmouseover和onmouseout事件

循环所有行,给每行添上这两个事件
2023-07-26 03:54:0610

DIV里面如何添加(内嵌)onmouseout和onmouseover事件

<div onmouseover="this.style.color="red";" onmouseout="this.style.color="black";" style="color:black; font-size:16px; font-family:"微软雅黑""> 你好呀</div>
2023-07-26 03:54:311

onmouseover="this.stop()" onmouseout="this.start()">应该写在怎么位置?

写在<marquee >里面就好, 这是marquee的鼠标动作.改好后是:<marquee onmouseover="this.stop()"onmouseout="this.start()"><img src="DSC00433.JPG" width="100" height="120" /> <img src="DSC00743.JPG" width="160" height="120" /> <img src="DSC00770.JPG" width="160" height="120" /><img src="DSC00789.JPG" /> <img src="DSC00778.JPG" width="160" height="120" /><img src="DSC00375.JPG" width="160" height="120" /><img src="綦江N464.JPG" width="100" height="120" /><img src="綦江N464A.JPG" width="100" height="120" /></marquee>
2023-07-26 03:54:381

用JavaScript写出当鼠标悬停在按钮上时WEB页面从绿色变为红色,当鼠标移开时页面从红色变为蓝色的代码

<body bgcolor="#00ff00"><input type="button" id="btn" value="按钮" onmouseover="over();" onmouseout="out();" /></body><script>function over(){document.bgColor = "#ff0000";}function out(){document.bgColor = "#0000ff";}</script>
2023-07-26 03:54:494

JS怎么阻止阻止onmouseover和onmouseout事件冒泡

在事件最后加上e.stopPropagation();就好
2023-07-26 03:54:561

onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage什么意思

当光标移开时,会执行“MM_swapImgRestore()”函数,当光标经过时,会执行“MM_swapImage”函数,但函数具体代表什么,得看你定义的函数是什么!
2023-07-26 03:55:151

JAVASCRIPT代码问题:onmouseover="mOver(this)" onmouseout="mOut(this)" 中的this指的是什么?如下:

就是该鼠标事件对应的div标签
2023-07-26 03:55:423

onmouseover="this.select()"实现选中文本框里内容,那么onmouseout=""中怎样写实现取消选中?

历史悠久的问题,我也期待着答案。
2023-07-26 03:55:492

JS中onmouseover图片放大onmouseout 图片恢复原状

<html><head></head><body><img src="这里加上你的图片路径" height="200px" width="150px" onmouseover="this.style.width=400;this.style.height=400;" onmouseout="this.style.width=200;this.style.height=150;"/></body></html>定义了height="200px" width="150" 图片大小,鼠标移上去大小变为400,400px,鼠标移开变成200,150大小
2023-07-26 03:55:561

onmouseover=stop()onmouseout=start()控制不了鼠标的原因

写在<marquee >里面就好, 这是marquee的鼠标动作.改好后是:<marquee onmouseover="this.stop()"onmouseout="this.start()"><img src="DSC00433.JPG" width="100" height="120" /> <img src="DSC00743.JPG" width="160" height="120" /> <img src="DSC00770.JPG" width="160" height="120" /><img src="DSC00789.JPG" /> <img src="DSC00778.JPG" width="160" height="120" /><img src="DSC00375.JPG" width="160" height="120" /><img src="綦江N464.JPG" width="100" height="120" /><img src="綦江N464A.JPG" width="100" height="120" /></marquee>
2023-07-26 03:56:061

使用JavaScript代码给每个li列表加两个鼠标事件onmouseover和onmouseout

这个css就能实现吧?li div{display:none;}li:hover div{display:block;}
2023-07-26 03:56:141

让图片从右到左滚动的网页代码是怎么样的?

<marquee align="right" behavior="scroll"></marquee>
2023-07-26 03:56:473

js鼠标移动事件(onmouseover,onmouseout)放在和控件中有什么不同?

接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件。突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有奇怪的特性。首先实现一个盒子。给这个盒子上绑定上onmouseover事件和onmouseout事件。发现它们不会发生什么问题。让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素。依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。
2023-07-26 03:57:081

如何避免移入子级时触发父级的onmouseout事件

取消冒泡事件:function stopBubble(e){if(e && e.stopPropagation){//W3C取消冒泡事件e.stopPropagation();}else{//IE取消冒泡事件window.event.cancelBubble = true;}};
2023-07-26 03:57:361

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)

可以用js事件“onmouseover”和“onmouseout”来实现。1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:3、添加“onmouseout”js事件,首先获取图片标签,然后定义鼠标移开图片时发生的事件,这时图片将会缩小:
2023-07-26 03:57:441

js里面如何使鼠标经过出现一个div,移开就消失?求大神帮帮忙啊~

document.documentElement.onmouseout = function(){this.style.display = "none";}//document.documentElement=文档中任何元素//可以替换成要触发的元素============鼠标经过显示,移开消失的粒子==========<div><button>2017年经典动作</button></div><div>2017年隐藏的密码</div><script type="text/javascript">function $(id) {return document.getElementsByTagName(id);}var a = $("div")[0];//div1var b = $("div")[1];//div2b.style.display = "none";a.onmouseover = function () {b.style.display = "block";}a.onmouseout = function () {b.style.display = "none";}}</script>
2023-07-26 03:58:093

onmouseover用法

这个是一个动态菜单吧~~代码不完整只能简单解释下onmouseover鼠标经过onmouseout鼠标离开当鼠标经过的时候执行clearhidemenu()函数和highlightmenu(event,"on")函数根据名字猜测clearhidemenu是隐藏所有的菜单,highlightmenu是高亮本菜单on应该是传递参数控制高亮的开关当鼠标离开的时候执行highlightmenu(event,"off");dynamichide(event)同样根据名字猜测一个是高亮本菜单关闭另一个是同时隐藏本菜单下的子菜单//望采纳
2023-07-26 03:58:171

javascript鼠标移入移出事件

要么就hover的时候增加width来连接二级菜单要么就二级菜单加个底层背景.大小可以接上一级菜单 不过只有右边可以离开二级菜单时隐藏了或者做成点击事件.直接解决
2023-07-26 03:58:242

A元素没有stop()方法的吧,不知你是做什么用的;不注明的话,默认是javascript,如果要用VBscript,应该在代码前注明,如:<a href="#" onmouseover="vbscript:this.stop()" ...>
2023-07-26 03:58:323

onmousemove在JavaScript表什么意思啊??

事件:onmousemove 当鼠标移到所指的对象上。。。onmouseout 当鼠标离开所指的对象
2023-07-26 03:58:403

网页设计-图片滚动问题

你的代码本身就有错误!一、向左滚动1、调用“图片”栏目图片的向左滚动代码以下是首页模板最新图片部分代码:----------------------------------- 〈tr〉 〈td class=main_title_575〉〈B〉最新图片〈/B〉〈/td〉 〈/tr〉 〈tr〉 〈td class=main_tdbg_575 vAlign=center align=middle height=131〉 〈!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--〉 〈/td〉 〈/tr〉 ------------------------------------ 用以下是滚动代码代替上面红色的标签部分,注意红色部分的变化。 ------------------------------------ 〈!--滚动代码开始--〉 〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉 〈table cellPadding=0 align=left border=0 cellspace="0"〉 〈tr〉 〈td id=demo11 vAlign=top〉 〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉 〈td id=demo12 vAlign=top〉〈/td〉 〈/tr〉 〈/table〉 〈/div〉 〈SCRIPT〉 var speed=15 demo12.innerHTML=demo11.innerHTML function Marquee11(){ if(demo12.offsetWidth-demo.scrollLeft〈=0) demo.scrollLeft-=demo11.offsetWidth else{ demo.scrollLeft++ } } var MyMar1=setInterval(Marquee11,speed) demo.onmouseover=function() {clearInterval(MyMar1)} demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)} 〈/SCRIPT〉 〈!--滚动代码结束--〉 ----------------------------------- 2、文章频道图片向左滚动代码 (效果演示) 以下是文章频道模板最新图片部分代码 ----------------------------------- 〈tr〉 〈td Class="main_title_575"〉〈b〉最新图片{$ChannelShortName}〈/b〉〈/td〉 〈/tr〉 〈tr〉 〈td Class="main_tdbg_575"〉 {$GetPicArticle(ChannelID,0,True,0,4,false,false,0,3,2,130,90,20,0,True,4)} 〈/td〉 〈/tr〉 〈tr〉 〈td Class="main_shadow"〉〈/td〉 〈/tr〉 ------------------------------------ 用以下是滚动代码代替上面红色的标签,注意红色部分的变化。红色数字代表了滚动图片的总数(这里为8张)。 ---------------------------------- 〈!--滚动代码开始--〉 〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉 〈table cellPadding=0 align=left border=0 cellspace="0"〉 〈tr〉 〈td id=demo11 vAlign=top〉 〈!--{$GetPicArticle(ChannelID,0,True,0,8,false,false,0,3,2,130,90,20,0,True,8)}--〉〈/td〉 〈td id=demo12 vAlign=top〉〈/td〉 〈/tr〉 〈/table〉 〈/div〉 〈SCRIPT〉 var speed=15 demo12.innerHTML=demo11.innerHTML function Marquee11(){ if(demo12.offsetWidth-demo.scrollLeft〈=0) demo.scrollLeft-=demo11.offsetWidth else{ demo.scrollLeft++ } } var MyMar1=setInterval(Marquee11,speed) demo.onmouseover=function() {clearInterval(MyMar1)} demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)} 〈/SCRIPT〉 〈!--滚动代码结束--〉 ----------------------------------- 3、下载频道图片向左滚动代码 (效果演示) 以下是下载频道模板推荐下载图片部分代码 ----------------------------------- 〈tr〉 〈td Class="main_title_575"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0"〉 〈tr〉 〈td〉〈b〉〈a class="Class" href="{$InstallDir}{$ChannelDir}/ShowElite.asp"〉推荐下载(图)〈/a〉〈/b〉〈/td〉 〈td align="right"〉{$RssElite}〈/td〉 〈/tr〉 〈/table〉〈/td〉 〈/tr〉 〈tr〉 〈td align="center" Class="main_tdbg_575"〉 {$GetPicSoft(ChannelID,0,True,0,4,false,True,0,3,2,130,90,20,0,True,4)} 〈/td〉 〈/tr〉 ------------------------------------ 用以下是滚动代码代替上面红色的标签,注意红色部分的变化。红色数字代表了滚动图片的总数(这里为12张)。 ------------------------------------ 〈!--滚动代码开始--〉 〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉 〈table cellPadding=0 align=left border=0 cellspace="0"〉 〈tr〉 〈td id=demo11 vAlign=top〉 〈!--{$GetPicSoft(ChannelID,0,True,0,12,false,True,0,3,2,130,90,20,0,True,12)}--〉〈/td〉 〈td id=demo12 vAlign=top〉〈/td〉 〈/tr〉 〈/table〉 〈/div〉 〈SCRIPT〉 var speed=15 demo12.innerHTML=demo11.innerHTML function Marquee11(){ if(demo12.offsetWidth-demo.scrollLeft〈=0) demo.scrollLeft-=demo11.offsetWidth else{ demo.scrollLeft++ } } var MyMar1=setInterval(Marquee11,speed) demo.onmouseover=function() {clearInterval(MyMar1)} demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)} 〈/SCRIPT〉 〈!--滚动代码结束--〉 ------------------------------ 从以上可以看出,滚动图片代码基本上是相同的,不同的是调用图片的标签变了。 ------------------------------ 二、向上滚动 向上滚动代码使用方法同上左滚动代码,这里只给出代码,不再说明。 以下是文章频道图片调用的滚动代码。 ----------------------------------------------------------- 〈!--向上滚动代码开始--〉 〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 360px"〉 〈DIV id=rolllink1〉 〈TABLE cellSpacing=5 width="100%"〉 〈tr〉 〈td id=demo11 vAlign=top〉 〈!--{$GetPicArticle(0,0,True,0,6,false,false,0,3,2,160,100,20,0,True,1)}--〉 〈/td〉 〈td id=demo12 vAlign=top〉〈/td〉 〈/tr〉 〈/TABLE〉 〈/DIV〉 〈DIV id=rolllink2〉〈/DIV〉 〈/DIV〉 〈SCRIPT〉 var rollspeed=40 rolllink2.innerHTML=rolllink1.innerHTML function Marquee(){ if(rolllink2.offsetTop-rolllink.scrollTop〈=0) rolllink.scrollTop-=rolllink1.offsetHeight else{ rolllink.scrollTop++ } } var MyMar=setInterval(Marquee,rollspeed) rolllink.onmouseover=function() {clearInterval(MyMar)} rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)} 〈/SCRIPT〉 〈!--向上滚动代码结束--〉 ----------------------------------------------------------- 以下是图片频道的3行4列向上滚动代码摘录: (效果演示) ……………………… 〈tr〉 〈td colspan="3" Class="main_title_575"〉〈a class="Class" href="{$InstallDir}{$ChannelDir}/ShowNew.asp"〉〈b〉最新{$ChannelShortName}〈/b〉〈/a〉〈/td〉 〈/tr〉 〈tr valign="top"〉 〈td colspan="3"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0" Class="main_tdbg_575"〉 〈tr〉 〈td height="200" valign="top"〉 〈!--向上滚动代码开始--〉 〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 575px; HEIGHT: 365px"〉 〈DIV id=rolllink1〉 〈TABLE cellSpacing=5 width="100%"〉 〈tr〉 〈td id=demo11 vAlign=top〉 〈!--{$GetPicPhoto(ChannelID,0,True,0,24,False,False,0,1,1,130,90,20,0,True, 4)}--〉〈/td〉 〈td id=demo12 vAlign=top〉〈/td〉 〈/tr〉 〈/TABLE〉 〈/DIV〉 〈DIV id=rolllink2〉〈/DIV〉 〈/DIV〉 〈SCRIPT〉 var rollspeed=40 rolllink2.innerHTML=rolllink1.innerHTML function Marquee(){ if(rolllink2.offsetTop-rolllink.scrollTop〈=0) rolllink.scrollTop-=rolllink1.offsetHeight else{ rolllink.scrollTop++ } } var MyMar=setInterval(Marquee,rollspeed) rolllink.onmouseover=function() {clearInterval(MyMar)} rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)} 〈/SCRIPT〉 〈!--向上滚动代码结束--〉 〈/td〉 〈/tr〉 〈/table〉 〈/td〉 〈/tr〉 〈tr〉 〈td colspan="3" Class="main_shadow"〉〈/td〉 〈/tr〉 ………………………… 三、向右滚动 -------------------------------------- 〈!--向右滚动代码开始--〉 〈div id=demo style=overflow:hidden;height:120;width:560;〉 〈table align=left cellpadding=0 cellspace=0 border=0〉 〈tr〉 〈td id=demo1 valign=top〉〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉 〈td id=demo2 valign=top〉〈/td〉 〈/tr〉 〈/table〉 〈/div〉 〈script〉 var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollLeft=demo.scrollWidth function Marquee(){ if(demo.scrollLeft〈=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } var MyMar=setInterval(Marquee, speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee, speed)} 〈/script〉 〈!--向右滚动代码结束--〉注意滚动图片数不要太大,这会影响页面下载速度。你可以参照!http://99mp3.go2.icpcn.com/网站的!http://99mp3.go2.icpcn.com/tu/a.htm
2023-07-26 03:58:471

TABLE标签的一种效果,鼠标移动到选项上就显示相应的内容层的技术用DW怎么做?

是JS做的..<STYLE type=text/css>a{color: #333333; text-decoration: none}.alpha { FILTER: Alpha(Opacity=80)}.td1 { FONT-SIZE: 12px; FONT-FAMILY: "tahoma"}.td2 { FONT-SIZE: 12px; CURSOR: hand; FONT-FAMILY: "tahoma"; BACKGROUND-COLOR: #cfe7ff}.maskl { OVERFLOW: hidden}.cardtitle { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 12px; BORDER-LEFT: black 0px solid; CURSOR: default; TEXT-INDENT: 4pt; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: "tahoma"}.cardbottom { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #aa6699}</STYLE><SCRIPT language=Javascript><!--tBack=new Array(6); tOut=new Array(6);function menuOut(i){var curMenu=eval("menu"+i); curMenu.runtimeStyle.zIndex=6; clearTimeout(tBack[i]); moveOut(i);}function menuBack(i){ var curMenu=eval("menu"+i); curMenu.runtimeStyle.zIndex=curMenu.style.zIndex; clearTimeout(tOut[i]); moveBack(i);}function moveOut(i){ var curMenu=eval("menu"+i); if(curMenu.style.posLeft>0) { curMenu.style.posLeft-=2; tOut[i]=setTimeout("moveOut(""+i+"")",1); }}function moveBack(i){ var curMenu=eval("menu"+i); if(curMenu.style.posLeft<30) { curMenu.style.posLeft+=2; tBack[i]=setTimeout("moveBack(""+i+"")",1); }}function swapClass(){var swap=event.srcElement; if(swap.className=="td1") swap.className="td2" else if(swap.className=="td2") swap.className="td1";}document.onmouseover=swapClass;document.onmouseout=swapClass; //--></SCRIPT><BODY><DIV class=maskl id=menuPos style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 256px"><DIV id=menu1 onmouseover=menuOut(1) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px" onmouseout=menuBack(1)><DIV class=cardbottom id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px"><TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=td1 align=middle>公共信息</TD></TR> <TR> <TD class=td1 align=middle>部门信息</TD></TR> <TR> <TD class=td1 align=middle>在线用户</TD></TR> <TR> <TD class=td1 align=middle>讨论区</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=100 border=0> <TBODY> <TR> <TD class=cardtitle width=86 bgColor=#aa6699 height=14> 我的办公室</TD></TR></TBODY></TABLE></DIV><DIV id=menu2 onmouseover=menuOut(2) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 20px; HEIGHT: 20px" onmouseout=menuBack(2)><DIV class=cardbottom id=Layer2 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px"><TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=td1 align=middle><a href="#" target="_blank">教学大纲</a></TD> </TR> <TR> <TD class=td1 align=middle><a href="#" target="_blank">教学计划</a></TD></TR> <TR> <TD class=td1 align=middle><a href="#" target="_blank">教学总结</a></TD></TR> <TR> <TD class=td1 align=middle><a href="#" target="_blank">教学周历</a></TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=100 border=0> <TBODY> <TR> <TD class=cardtitle width=86 bgColor=#aa6699 height=14> 政务空间</TD></TR></TBODY></TABLE></DIV><DIV id=menu3 onmouseover=menuOut(3) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 40px; HEIGHT: 20px" onmouseout=menuBack(3)><DIV class=cardbottom id=Layer3 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px"><TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=td1 align=middle>即时通讯</TD></TR> <TR> <TD class=td1 align=middle>快速搜索</TD></TR> <TR> <TD class=td1 align=middle>在线音乐</TD></TR> <TR> <TD class=td1 align=middle>校园新闻</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=100 border=0> <TBODY> <TR> <TD class=cardtitle width=86 bgColor=#aa6699 height=14> 网络空间</TD></TR></TBODY></TABLE> </DIV><DIV id=menu4 onmouseover=menuOut(4) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 60px; HEIGHT: 20px" onmouseout=menuBack(4)><DIV class=cardbottom id=Layer4 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px"><TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=td1 align=middle>电子邮件</TD></TR> <TR> <TD class=td1 align=middle>信访管理</TD></TR> <TR> <TD class=td1 align=middle>电子贺卡</TD></TR> <TR> <TD class=td1 align=middle>通讯录</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=100 border=0> <TBODY> <TR> <TD class=cardtitle width=86 bgColor=#aa6699 height=14> 个人事物</TD> </TR> </TBODY></TABLE></DIV><DIV id=menu5 onmouseover=menuOut(5) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 80px; HEIGHT: 134px" onmouseout=menuBack(5)><DIV class=cardbottom id=Layer5 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px"><TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD class=td1 align=middle>电话黄页</TD></TR> <TR> <TD class=td1 align=middle>列车时刻</TD></TR> <TR> <TD class=td1 align=middle>航空时刻</TD></TR> <TR> <TD class=td1 align=middle>世界时间</TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></DIV><TABLE cellSpacing=0 cellPadding=0 width=100 border=0> <TBODY> <TR> <TD class=cardtitle width=86 bgColor=#aa6699 height=14> 办公助理</TD></TR></TBODY></TABLE></DIV></BODY>
2023-07-26 03:59:071

需要用jQuery 实现 在一个元素上鼠标移入延迟200毫秒触发事件,但是200不到则取消触发。用JS也可以

你先告诉我你问的是个什么意思,我完全看不懂。哈哈哈哈哈
2023-07-26 03:59:152

html:用onMouseOver和onMouseOut设置鼠标移动时文本框边框变色,导致文本框左、上边和右、下边颜色不同

AB那么A的下边框就是B的上边框,如果设置A的下边框为红色 然后设置B的上边框为绿色 那么A的下边框也就变成绿色了
2023-07-26 03:59:252

html怎么让滚动条自动显示或隐藏

window.onscroll=function(){ var doc = document.documentElement || document.body; if(doc .scrollTop > "你要求的高度"){ document.getElementById("xx").style.display="block"; }}
2023-07-26 03:59:322

HTML当鼠标放上去时出现边框

在样式上写li:hover{border:1px solid #ddd}不过这样的伪类,ie6、7不支持。若要兼容性,只有通过js去写。例如:先定义一个样式名是带边框的.hover{border:1px solid #ddd}<LI onmouseover="this.className="hover"" onmouseout="this.className=""" >当鼠标放在</li>但是这样非常麻烦,因为每个li都要写。所以还有更好的做法。<ul id="rank"><li>当鼠标放在上时周边出现边框</li><li>当鼠标放在上时周边出现边框</li><li>当鼠标放在上时周边出现边框</li><li>当鼠标放在上时周边出现边框</li></ul><script>var aa=document.getElementById("rank").getElementsByTagName("li");for(var i=0;i<aa.length;i++){aa[i].onmouseover=function(){this.className=this.className+" hover";}aa[i].onmouseout=function(){var cn=this.className;this.className=cn.replace(" hover","");}}</script>纯手打,望采纳。
2023-07-26 03:59:401

用onmouseover显示一个div,onmouseout消失,显示的这个div会对其下面的元素造成挤压变形,如何解决

需要css调节图层。position:absolute;//绝对定位z-index:1000;//图像层级,越大越在最上面。
2023-07-26 03:59:473

javascript关于鼠标的移入移除事件的问题

onmouseout就是鼠标移出事件(out就是外面的意思),如果你觉得不行,那就是你的代码有问题。你试试下面的代码就知道了:<div style="width:100px; height:100px; border:1px solid #00" onmouseover="this.innerText="鼠标移入";" onmouseout="this.innerText="鼠标移出";"></div>
2023-07-26 03:59:552

js怎么做鼠标移过去会显示隐藏的内容

onMouseOver鼠标移入事件,设置控件的displaydocument.getElementById("控件的Id").style.display("none");onMouseOut鼠标移出事件,设置控件的dispalydocument.getElementById("控件的Id").style.display("block");
2023-07-26 04:00:033

怎样设置鼠标悬停时滚动的图片或文字停止?

网页上最常用的是MARQUEE,也是最简单的一种:把要想滚动的内容放到<marquee></marquee>中,然后在MARQUEE中设置属性,onmouseover="this.stop();" scrollamount="3" direction="left" onmouseout="this.start(); this.stop()就是表示它停止也可以用js+div来写写一个js递调用控制div里面的内容的距离js就稍微比MARQUEE复杂一点:下面我给你它的代码<DIV id=cfdemo style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 120px"><TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"><TBODY><TR><TD id=cfdemo1>要滚动的内容,这个滚动是不间隔的滚动</TD><TD id=cfdemo2 width=10></TD></TR></TBODY></TABLE></DIV><SCRIPT> var speed=20; //改变该数值可改变滚动速度,数值越小,速度越快 cfdemo2.innerHTML=cfdemo1.innerHTML function CFMarquee(){ if(cfdemo2.offsetWidth-cfdemo.scrollLeft<=0) cfdemo.scrollLeft-=cfdemo1.offsetWidth else{ cfdemo.scrollLeft++ } } var CFMar=setInterval(CFMarquee,speed) cfdemo.onmouseover=function() {clearInterval(CFMar)} cfdemo.onmouseout=function() {CFMar=setInterval(CFMarquee,speed)} </SCRIPT>如果还不懂就直接问我也可以
2023-07-26 04:00:191

onMouseOver=this.stop() onMouseOut=this.start() scrollamount=2 scrolldelay=50 direction=left behavi

挠头。。。这个我不是很懂···
2023-07-26 04:00:522

html中给div设置onmouseover事件 这个代码为什么不对?

大概有几个问题吧1,getElementById是在文档节点加载完成之后才能获取到的,所以你这个代码即使没错误也会提示你 null,所以应把script代码放到div下面2,getElementById本来就是一个object了,所以后面的function不需要传入obj,里面直接用this即可 document.getElementById("div").onmouseout = function onmouseout(){ this.style.background = "blue"; }3,</body>标签有两个,不认真的家伙
2023-07-26 04:00:591

下拉列表中 ONMOUSEOVER显示注释

HTML:<select id="selects"> <option selected="selected" id="brazil" onmouseover="tooltip(this)" onmouseout="nodisplay()" onclick="nodisplay()">巴西</option> <option id="usa" onmouseover="tooltip(this)" onmouseout="nodisplay()" onclick="nodisplay()">美国</option> <option id="chn" onmouseover="tooltip(this)" onmouseout="nodisplay()" onclick="nodisplay()">中华人民共和国</option></select><div id="tooltipBlock" style="position: block; display: none;">sdffds</div>JAVASCRIPT: var tip = document.getElementById("tooltipBlock"); var selects = document.getElementById("selects"); function tooltip(obj) { var x = selects.offsetLeft, y = obj.offsetTop, h = obj.offsetHeight, w = selects.offsetWidth; /*tip.style.width = w + "px"; (这部分是定义显示提示的块的宽度) */ tip.style.marginLeft = x + w + "px"; tip.style.marginTop = y - 30 + "px"; tip.style.display = "block"; tip.innerHTML = "这部分为程序传递(把数据库里相关国家资料传过来)"; } function nodisplay() { tip.style.display = "none"; }
2023-07-26 04:01:061

当鼠标离开textbox 触发事件,alert 这个代码怎么来写呢?

服务端<asp:TextBox ID="TextBox1" runat="server" onblur="alert("鼠标离开文本框了");"></asp:TextBox>客户端<input type="text" onblur="alert("鼠标离开文本框了");" />
2023-07-26 04:01:143

onmouseover用法

这个是一个动态菜单吧~~代码不完整只能简单解释下onmouseover 鼠标经过onmouseout 鼠标离开 当鼠标经过的时候执行clearhidemenu()函数和highlightmenu(event,"on")函数 根据名字猜测 clearhidemenu是隐藏所有的菜单,highlightmenu是高亮本菜单 on应该是传递参数控制高亮的开关当鼠标离开的时候 执行highlightmenu(event,"off");dynamichide(event) 同样根据名字猜测 一个是高亮本菜单关闭 另一个是同时隐藏本菜单下的子菜单//望采纳
2023-07-26 04:01:211

如何样式里加onmouseover?

<style type="text/css">table{cursor:hand;}td{ onmouseover: expression(onmouseover=function (){this.style.backgroundColor ="yellow"}); onmouseout: expression(onmouseout=function (){this.style.backgroundColor =""}); }</style>
2023-07-26 04:01:293

如何防止鼠标移出移入子元素触发mouseout和mouseover事件

如何防止鼠标移出移入子元素触发mouseout和mouseover事件:关于mouseout和mouseover事件这里就不多介绍了,具体可以参阅javascript的mouseout和mouseover事件详解一章节。 这两个事件有一个共同特点,那就是当鼠标移入或者移出子元素的时候都会触发对应的事件,这个往往在实际应用中是不需要的,或者说能够带来很大的困扰,下面就通过实例代码介绍一下如何避免此影响。代码实例如下:<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box{ width:200px; height:200px; background-color:red; padding:50px;}#inner{ width:50px; height:50px; background-color:blue;}</style><script type="text/javascript"> function isMouseLeaveOrEnter(e, handler) { var reltg=e.relatedTarget?e.relatedTarget:e.type=="mouseout"?e.toElement:e.fromElement; while (reltg && reltg != handler){ reltg = reltg.parentNode; } return (reltg != handler); } window.onload=function(){ var box=document.getElementById("box"); var num=document.getElementById("num"); var count=0; box.onmouseout=function(ev){ var ev=ev||window.event; if(!isMouseLeaveOrEnter(ev,box)){ return false; } num.innerHTML=count++; }}</script></head><body><div id="box"> <div id="inner"></div></div><div>事件触发了<span id="num"></span>次</div></body></html>以上代码实现了我们的要求,可以消除鼠标指针移入或者移出子元素所带来的困扰,虽然例子只是mouseout事件的,对于mouseover事件也是如此,下面就介绍一下此代码的实现过程:一.实现原理:当触发这个事件的时候,事件对象都会有一个relatedTarget属性(标准浏览器支持,IE8和IE8以下浏览器需要使用其他属性返回),它能够返回一个与事件目标节点相关的节点,如果返回的节点都是注册事件的对象的子孙元素,说明是我们将要消除的事件触发,所以只要判断如果relatedTarget返回的节点是子孙节点,就进行特殊的处理就可以了,具体可以参阅代码注释。二.代码注释:1.function isMouseLeaveOrEnter(e, handler) {},此函数是功能的核心,可以返回一个布尔值用来标识relatedTarget属性返回的是否是子孙节点,如果返回true说明不是子孙节点,如果是false则说明是子孙节点。第一个参数是事件对象,第二个是注册事件处理函数的对象。2.var reltg = e.relatedTarget ? e.relatedTarget : e.type == "mouseout" ? e.toElement : e.fromElement,返回事件关联对象,相关属性可以参阅相关阅读。3.while (reltg && reltg != handler){reltg = reltg.parentNode},一个while循环,条件是:如果reltg存在并且不是当前注册事件的节点,如果条件不被满足,那么将获取reltg的父节点然后再赋值给reltg,如此循环往复。这个语句的作用是判断相关元素是否值子孙元素,如果是的话,总会有一个reltg.parentNode会和handler相同。4.return (reltg != handler),返回一个布尔值,如果相同就返回false,如果不相同就返回true。
2023-07-26 04:01:381

关于JS mouseover与mousout的用法!

看不懂的哈、
2023-07-26 04:02:041

html设置滚动内容

HTML 又叫静态网页。字体滚动代码 在body语句添加/marquee direction="这里为设置滚动方向如右right左left">这里为滚动内容</marquee。
2023-07-26 04:02:123

mouseover和Onmouseover区别

onmouseover是Event 对象的一个属性,hover这是一个CSS的伪类请采纳答案,支持我一下。
2023-07-26 04:03:032

网页设计 图片滚动代码

这是啥玩意儿?用JS
2023-07-26 04:03:145