这个js效果哪个高手帮我看看怎么实现啊？

见网址http://www.jgclean.com/en/default.aspx里鼠标放入下图区域显示的js效果怎么实现啊？能给个完整的差不多的例子吗？谢谢了！
你说的我试过但没有成功，我搞不来。

推荐答案 2009-09-22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>NINGBO JINGGUO SYNTHESIS MACHINE CO.,LTD</title><meta content="<% = sPagesKey %>" name="keywords">
<meta content="<% = sPagesDes %>" name="description">
<meta content="<% = sPagesUrl %>" name="url">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://www.jgclean.com/en/Css/nmain.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://www.jgclean.com/en/MenuMatic/examples/vertical/css/MenuMatic.css" type="text/css" media="all" />
<script type="text/javascript" src="http://www.jgclean.com/en/dialog/lhgcore.js"></script>
<script type="text/javascript" src="http://www.jgclean.com/en/dialog/lhgdialog/lhgdialog.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi" ></script>
<script type="text/javascript" > google.load("mootools", "1.2.1"); </script>
<script type="text/javascript" src="http://www.jgclean.com/en/MenuMatic/MenuMatic_0.68.3.js" ></script>
<script type="text/javascript">
MenuMatic
window.addEvent('domready', function() {
var myMenu = new MenuMatic({ orientation:'vertical' });
});
//dialog
function dlgopen(mailto)
{
//将参数手动转为string类型.修正传递是未定义错误.
var MailTo = mailto.toString();//document.getElementById("showItems").getAttribute("title");
J.dialog.get({ id: 'mailto', title: 'Contact us with email', width: 490, height:520, margin:0, page: 'http://www.jgclean.com/en/../../Cmail/SendContactMail.aspx?MailTo='+MailTo});//,cover:true });
}

function dlgclose()
{
J.dialog.close('mailto');
}

function dlgopen2(categorycode)
{
//将参数手动转为string类型.修正传递是未定义错误.
var categoryCode = categorycode.toString();//document.getElementById("showItems").getAttribute("title");
J.dialog.get({ id: 'showItems', title: 'Items List', width: 490, height:470, margin:0, page: 'http://www.jgclean.com/en/../../Cmail/ShowItemsImage.aspx?CategoryCode='+categoryCode});//,cover:true });
}

function dlgclose2()
{
J.dialog.close('showItems');
}

function dlgopen3(category)
{
var Category = category.toString();
J.dialog.get({ id: 'Floatbox', title: 'Send Mail To Us', width: 490, height:520, margin:0, page: 'http://www.jgclean.com/en/../../Cmail/SendMail.aspx?Category='+Category});//,cover:true });
}

function dlgclose3()
{
J.dialog.close('FloatBox');
}

</script>

</head>
<div id="navcontainer" style="width:83px;margin:0 80px;padding:0px; height:100px">
<ul id="nav" class="navul" style="margin:0px;">

<li class="navli" style="background:url('images/main_0122.jpg') no-repeat bottom; "><a href="javascript:void(0);" class="bai">Scouring</a>
<ul>

<li><a href="#" id="showItems" onclick=dlgopen2('Scouring00_01') ><img id="_ctl0_productslinkdefault_Repeater1__ctl0_Repeater2__ctl0_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/a4b1a021-df48-4f5e-825e-11d213248284.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Stainless steel scourer</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Scouring00_02') ><img id="_ctl0_productslinkdefault_Repeater1__ctl0_Repeater2__ctl1_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/2355ff45-b49f-4eff-96e8-a5e67630f8ba.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Galvanized scourer</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Scouring00_03') ><img id="_ctl0_productslinkdefault_Repeater1__ctl0_Repeater2__ctl2_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/53bfce1b-f7c3-4d7e-ab4e-3e5597b1427d.jpg" style="border-width:0px;height:50px;width:50px;" /><br />metallic silver sponge</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Scouring00_04') ><img id="_ctl0_productslinkdefault_Repeater1__ctl0_Repeater2__ctl3_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/8911c958-b186-4f7f-902f-ba11a3b4bcdc.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Plastic scourer</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Scouring00_05') ><img id="_ctl0_productslinkdefault_Repeater1__ctl0_Repeater2__ctl4_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/845f664f-c560-4bb1-b648-8a0a8f64bc0c.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Steel wool</a></li>
</ul>
</li>

<li class="navli" style="background:url('images/main_0122.jpg') no-repeat bottom; "><a href="javascript:void(0);" class="bai">Wiping</a>
<ul>

<li><a href="#" id="showItems" onclick=dlgopen2('Wiping00_01') ><img id="_ctl0_productslinkdefault_Repeater1__ctl1_Repeater2__ctl0_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/0c31b75f-4956-4efc-a737-aeda6737636a.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Microfiber</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Wiping00_02') ><img id="_ctl0_productslinkdefault_Repeater1__ctl1_Repeater2__ctl1_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/f0c5502a-cbc5-4089-985d-bdebdb87c76b.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Non-woven wipe</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Wiping00_03') ><img id="_ctl0_productslinkdefault_Repeater1__ctl1_Repeater2__ctl2_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/2585e4ae-be7f-4199-b1f5-0a0d0de17b0b.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Sponge pad</a></li>

</ul>
</li>

<li class="navli" style="background:url('images/main_0122.jpg') no-repeat bottom; "><a href="javascript:void(0);" class="bai">Dusting</a>
<ul>

<li><a href="#" id="showItems" onclick=dlgopen2('Dusting00_01') ><img id="_ctl0_productslinkdefault_Repeater1__ctl2_Repeater2__ctl0_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/a796f3c7-f490-4e18-839b-a5721e4d3eff.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Duster</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Dusting00_02') ><img id="_ctl0_productslinkdefault_Repeater1__ctl2_Repeater2__ctl1_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/88e3b830-0f46-4696-97b2-1ff3a80dd322.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Cloth</a></li>

</ul>
</li>

<li class="navli" style="background:url('images/main_0122.jpg') no-repeat bottom; "><a href="javascript:void(0);" class="bai">Floor & Window range</a>
<ul>

<li><a href="#" id="showItems" onclick=dlgopen2('Floor00_01') ><img id="_ctl0_productslinkdefault_Repeater1__ctl3_Repeater2__ctl0_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/895001f2-6d40-426e-9cfa-a40dd69a2e5b.jpg" style="border-width:0px;height:50px;width:50px;" /><br />mop</a></li>

<li><a href="#" id="showItems" onclick=dlgopen2('Floor00_02') ><img id="_ctl0_productslinkdefault_Repeater1__ctl3_Repeater2__ctl1_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/bb91487c-9ba2-4840-aded-729ab07b1685.jpg" style="border-width:0px;height:50px;width:50px;" /><br />window Cleaner</a></li>

</ul>
</li>

<li class="navli" style="background:url('images/main_0122.jpg') no-repeat bottom; "><a href="javascript:void(0);" class="bai">Detergent</a>
<ul>

<li><a href="#" id="showItems" onclick=dlgopen2('Detergent00_01') ><img id="_ctl0_productslinkdefault_Repeater1__ctl4_Repeater2__ctl0_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/5231bb48-dd46-4c00-8836-d3f82abad6ad.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Detergent</a></li>

</ul>
</li>

<li class="navli" style="background:url('images/main_0122.jpg') no-repeat bottom; "><a href="javascript:void(0);" class="bai">Others</a>
<ul>

<li><a href="#" id="showItems" onclick=dlgopen2('Others00_02') ><img id="_ctl0_productslinkdefault_Repeater1__ctl5_Repeater2__ctl0_Image1" src="http://www.jgclean.com/en/../uploads/Products/ThumbImage/d50d6493-a025-4a11-a0c5-c87c46d45838.jpg" style="border-width:0px;height:50px;width:50px;" /><br />Others</a></li>
</ul>
</li>
</ul>
</div>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/UUinx229v.html

其他回答

第1个回答 2009-09-21

你可以直接把它的代码复制下来啊

帮你弄下来,不如教你怎么弄下来

你下载一个火狐浏览器,下载firebug插件

然后,就可以利用firebug插件,鼠标放网页的哪个地方,他就把那个地方的代码显示给你看了,十分方便

如果在安装上面有什么问题,可以发消息给我,我教你

相似回答

怎么用js 中的定时器实现这种效果?答：定时器循环，逐个处理。事先弄个div，在需要的时候显示出来，设置它显示的位置。你要动手写，不要光问，写写就自然会明朗起来。

详解如何使用原生JS实现移动端web轮播图效果答：我们需要采用 3 1 2 3 1的方式来实现, 即 N+2张图来实现N张图的无限循环轮播我们通过分析现象,可以提出一个基本实现方案: 1. 手指触摸事件可以通过 touchstart touchmove touchend 3个事件来实现 2.在手指 touchstart的时候我们需要

如何用js实现图片逐渐拉远的效果答：1.我用的是jQuery，需要引入外部jQuery库！ 2.图片的原始大小，以及屏幕的大小都会影响这个效果！3.这些top属性和left属性，都是根据我的图片和屏幕调的，具体的值，你要根据自己的情况更改，反正原理就这样！原理是，将图片的长度和宽度调的比屏幕窗口或者DIV大，也就是让图片“溢”出来，多的部分使用...

如何用js实现天猫那种图片滑动效果,ie不支持transition,求详细代...答：这个使用js包比如jquery等淘宝用的是kissy 下面是operamasks实现这个效果的完整代码 .slider-demo{ width: 500px; height: 375px; padding: 0; } body p{ font-weight: bold; font-size: 13px; } $(document).ready(function(){ $('#slider-sli...

这个js效果哪个高手帮我看看怎么实现啊?答：这个js效果哪个高手帮我看看怎么实现啊? 见网址http://www.jgclean.com/en/default.aspx里鼠标放入下图区域显示的js效果怎么实现啊?能给个完整的差不多的例子吗?谢谢了!你说的我试过但没有成功,我搞不来。... 见网址http://www.jgclean.com/en/default.aspx里鼠标放入下图区域显示的js效果怎么实现啊?能给...

请JavaScript高手来帮我看看这个网页的JS脚本是怎么实现的?答：javascript:display(2);" id="pic2" style="CURSOR: hand;" >复合材料焊料这3个a调用display(i)方法，根据i值和调用方的id值去显示或者隐藏父类。open1会变，是因为这里open1=i;重新赋值。

大家正在搜

js实现轮播 js是什么 html+css+js 什么是js js和java js js刷新页面 vue.js d3.js