用Jquery做的有用东东，稍作改造就可以有类似clickeye广告的效果。 <!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></title> <link href="css/style.css" mce_href="css/style.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src="../js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script> <mce:script language="javascript" type="text/javascript"><!-- var ShowSpeed = 300; var _obj_; $(function() { //搜索当前文档的关键字 $("a.divtip").each(function() { $(this).mouseenter(function() { var offset = $(this).offset(); var showTop = GetShowTop(offset.top, $(this).height()); var showLeft = GetShowLeft(offset.left, $(this).width()); $("#_divtip_").css({ top: showTop + "px", left: showLeft + "px" }); ShowDIV(); }); }); $(".v-tab a").each(function() { $(this).mouseenter(function() { //要先查看当前tab的class是否已经是current，以免造成多次读数据 if ($(this).attr("class") != "current") { ClearTab(); $(this).addClass("current"); ShowCurrentContent(); } }); }); }); //获取当前tab的内容，根据class为current的tab ShowCurrentContent = function() { GetCurrentContent(); } GetCurrentContent = function() { var gourl = ""; switch ($(".v-tab a.current").eq(0).attr("id")) { case "_news": gourl = "clickNews.htm"; break; case "_video": gourl = "clickVideo.htm"; break; case "_pic": gourl = "clickPic.htm"; break; case "_food": gourl = "clickFood.htm"; break; default: gourl = "clickNews.htm"; break; } $.ajax({ type: "GET", url: gourl, dataType: "html", cache: false, //不缓存，获取最新的 beforeSend: BeforeSendData, error: ErrorResponse, success: SuccessResponse }); } BeforeSendData = function() { $("#contentDIV").html("loading……"); } ErrorResponse = function(XMLHttpRequest) { $("#contentDIV").html(XMLHttpRequest.responseText); } SuccessResponse = function(html) { $("#contentDIV").fadeIn(10000); $("#contentDIV").html(html); } //清理所有Tab的current ClearTab = function() { $(".v-tab a.current").each(function() { $(this).removeClass("current"); }) } //初始化Tab InitTab = function() { ClearTab(); //$(".v-tab a").eq(0).addClass("current"); } ShowDIV = function() { $("#_divtip_").fadeIn(ShowSpeed); ShowCurrentContent(); } HideDIV = function() { $("#_divtip_").fadeOut(ShowSpeed); } //获取当前提示层的顶部 GetShowTop = function(top, picHeight) { var divHeight = $("#_divtip_").height() var viewHeight = document.body.clientHeight; //浏览器可视高度 var retValue = 0; retValue = top + picHeight; return retValue; } //获取当前提示层的左边 GetShowLeft = function(left, picWidth) { var divWidth = $("#_divtip_").width(); var viewWidth = document.body.clientWidth; //浏览器可视宽度 var retValue = 0; retValue = left; return retValue; } // --></mce:script> </head> <body> <table> <tr> <td > <a class="divtip">试一下</a> </td> <td align="right"> </td> </tr> </table> <div id="_divtip_" class="box" style="display:none;border-width:1px;border-color:Red; border-style:solid;position:absolute;z-index:10000;width:260px;height:270px"> <div class="box_1"> <ul class="v-tab"> <li><a href="#" mce_href="#" class="current" id="_news" >新闻</a></li> <li><a href="#" mce_href="#" id="_video" >视频</a></li> <li><a href="#" mce_href="#" id="_pic" >图片</a></li> <li><a href="#" mce_href="#" id="_food" >饮食</a></li> </ul> <ul> <li> <div id="contentDIV" style="vertical-align:top;margin:0px;padding:0px" mce_style="vertical-align:top;margin:0px;padding:0px"> </div> </li> </ul> </div> </div> </body> </html> 效果图如下：
扫一扫
4579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
