关于onmouserout的信息

http://www.itjxue.com  2023-01-27 18:53  来源:未知  点击次数: 

怎么编写和调用js文件

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,填充问题基础代码。

2、在index.js中,实现func1和func2函数。

3、在index.html中,新增第3个button,并调用func3()方法,并在script标签中输入js代码:

function func3() {

$('body').append('use func3br/');

}

4、浏览器运行index.html页面,此时点击“函数3”按钮,能正常执行func3函数来输出内容。

怎样出现鼠标经过就变颜色的表格?

用这句吧:onmouseover="this.style.background='#222'; " onmouseout ="this.style.background=''; this.style.borderColor=''"

下面这个是完整例子:)

html

head

meta http-equiv="Content-Type" content="tet/html; charset=gb2312"

meta name="GENERATOR" content="Microsoft FrontPage 4.0"

meta name="ProgId" content="FrontPage.Editor.Document"

titleNew Page/title

style

!--

body { font-size: 8pt; font-family: Tahoma }

td { font-size: 8pt; font-family: Tahoma; padding: 2 }

--

/style

/head

body

div align="center"

center

table border="1" width="400" cellspacing="0" cellpadding="0"

tr onmouseover="this.style.background='#222'; " onmouseout ="this.style.background=''; this.style.borderColor=''"

td width="49"X/td

td width="49"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

/tr

tr onmouseover="this.style.background='#222'; " onmouseout ="this.style.background=''; this.style.borderColor=''"

td width="49"X/td

td width="49"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

td width="50"X/td

/tr

/table

/center

/div

/body

/html

求救啊,用js实现图片左右滚动,鼠标经过图像会在滚动图像下方的固定位置显示放大图像,速度啊!!!!!

!--

在图片标签里添加onmouseover事件,并且将该图片地址作为参数传给show_big函数

--

meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

div align='center' id='demo' style='overflow:hidden;height:125px;width:740px;'!--滚动区的高度和宽度--

table align='center' cellpadding='0' border='0'

tr

td id='demo1' valign='top'

table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'

tr valign='top'

td align='center'

TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0

TR

TD background="image/bg_03.gif"?/TD

TD width="105" height="85" align="center" bgcolor="#E9E9E9"

a href="?action=showproductid=2" target=_blank title='免费上网卡'

img src="goods/201085233124824.jpg" alt="免费上网卡" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"/a

/TD

TD background="image/bg_03.gif"?/TD

TD width="105" height="85" align="center" bgcolor="#E9E9E9"

a href="?action=showproductid=3" target=_blank title='最新款语音监听器'

img src="goods/2010322133233752.jpg" alt="最新款语音监听器" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"/a

/TD

TD background="image/bg_03.gif"?/TD

TD width="105" height="85" align="center" bgcolor="#E9E9E9"

a href="?action=showproductid=4" target=_blank title='远拍王'

img src="goods/20104557186.jpg" alt="远拍王" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"/a

/TD

TD background="image/bg_03.gif"?/TD

TD width="105" height="85" align="center" bgcolor="#E9E9E9"

a href="?action=showproductid=8" target=_blank title='手电筒摄像机'

img src="goods/20103845747868.jpg" alt="手电筒摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this);"/a

/TD

TD background="image/bg_03.gif"?/TD

TD width="105" height="85" align="center" bgcolor="#E9E9E9"

a href="?action=showproductid=9" target=_blank title='打火机摄像机'

img src="goods/2009115195532598.jpg" alt="打火机摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this);"/a

/TD

/TR

/TABLE

/td

/tr

/table

/td

td id=demo2 valign=top/td

/tr

/table

/div

div id="bimg"/div

script

var Picspeed=15

demo2.innerHTML=demo1.innerHTML

function Marquee1(){

if(demo2.offsetWidth-demo.scrollLeft=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar1=setInterval(Marquee1,Picspeed)

demo.onmouseover=function() {clearInterval(MyMar1)

}

demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)

document.getElementById('bimg').innerHTML='';//当鼠标移出是清空图片

}

function show_big(src){

document.getElementById('bimg').innerHTML='img src="'+src+'" width=300 height=400';//在id为bimg的div中显示图片

}

/script

!--最新图文代码结束--

(责任编辑:IT教学网)

更多