以下是 CSS+JS图片漂浮提示框特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为CSS+JS图片漂浮提示框效果，属于站长常用代码" />
<LINK rev=stylesheet media=screen href="css/coolcss.css" type=text/css rel=stylesheet>
<script src="js/tit.js" type="text/javascript"></script>
<title>CSS+JS图片漂浮提示框效果</title>
</head>
<BODY>
<ul class="IndexPost-Title-Bg">
<div id="zishu_test">
<li>
<a href="http://stationery.sdi.com.tw/" target="_blank"><span>No:100 企业 2009-09-11</span><img src='images/1103231Z33.jpg' border='0' width='130' height='80' alt='順德工業股份有限公司'>順德工業股份有限公司</a></li></div><div id="zishu_test">
<li>
<a href="http://www.paleotek.com/" target="_blank"><span>No:99 企业 2009-09-11</span><img src='images/1101331MD.jpg' border='0' width='130' height='80' alt='源古科技'>源古科技</a></li></div><div id="zishu_test">
<li>
<a href="http://www.galilee.com.tw/" target="_blank"><span>No:98 企业 2009-09-11</span><img src='images/1100161S28.jpg' border='0' width='130' height='80' alt='加利利旅行社2'>加利利旅行社2</a></li></div><div id="zishu_test">
<li>
<a href="http://www.galilee.com.tw/chinese/01_journey/01_overview.php?SID=32" target="_blank"><span>No:97 企业 2009-09-11</span><img src='images/10523114139.jpg' border='0' width='130' height='80' alt='加利利旅行社'>加利利旅行社</a></li></div><div id="zishu_test">
<li>
<a href="http://www.liteon-semi.com/" target="_blank"><span>No:96 企业 2009-09-11</span><img src='images/10505511C0.jpg' border='0' width='130' height='80' alt='Lite-On Semiconductor Corp.'>Lite-On Semiconducto</a></li></div><div id="zishu_test">
<li>
<a href="http://www.piingheh.com.tw/" target="_blank"><span>No:95 企业 2009-09-11</span><img src='images/10493516163.jpg' border='0' width='130' height='80' alt='PIING HEH LTD.'>PIING HEH LTD.</a></li></div><div id="zishu_test">
<li>
<a href="http://www.fengtay.com/" target="_blank"><span>No:94 企业 2009-09-11</span><img src='images/104Q315494.jpg' border='0' width='130' height='80' alt='豐泰企業股份有限公司'>豐泰企業股份有限公司</a></li></div><div id="zishu_test">
<li>
<a href="http://www.copartner.com.tw/" target="_blank"><span>No:93 企业 2009-09-11</span><img src='images/104GQR09.jpg' border='0' width='130' height='80' alt='Copartner Tech Cor'>Copartner Tech Cor</a></li></div><div id="zishu_test">
<li>
<a href="http://www.audix.com/" target="_blank"><span>No:92 企业 2009-09-11</span><img src='images/10461316447.jpg' border='0' width='130' height='80' alt='敦吉科技股份有限公司'>敦吉科技股份有限公司</a></li></div><div id="zishu_test">
<li>
<a href="http://www.qsscit.com/" target="_blank"><span>No:91 企业 2009-09-11</span><img src='images/10450613040.jpg' border='0' width='130' height='80' alt='QSSC'>QSSC</a></li></div><div id="zishu_test">
<li>
<a href="http://www.ccpg.com.tw/" target="_blank"><span>No:90 企业 2009-09-11</span><img src='images/1043541b28.jpg' border='0' width='130' height='80' alt='中化製藥關係公司'>中化製藥關係公司</a></li></div><div id="zishu_test">
<li>
<a href="http://www.ptsgi.com/" target="_blank"><span>No:89 企业 2009-09-11</span><img src='images/10424019549.jpg' border='0' width='130' height='80' alt='统一数位翻译'>统一数位翻译</a></li></div><div id="zishu_test">
<li>
<a href="http://www.suziwan.fr/fr-fr/index.html" target="_blank"><span>No:88 木褐 2009-09-10</span><img src='images/15593412406.jpg' border='0' width='130' height='80' alt='SuziWan'>SuziWan</a></li></div><div id="zishu_test">
<li>
<a href="http://www.biribenikurtarsin.com/" target="_blank"><span>No:87 蓝色 2009-09-10</span><img src='images/155Q415224.jpg' border='0' width='130' height='80' alt='Biri Beni Kurtars&#305;n!'>Biri Beni Kurtars&am</a></li></div><div id="zishu_test">
<li>
<a href="http://www.lancer-evolution.eu/" target="_blank"><span>No:86 黑色 2009-09-10</span><img src='images/15524615548.jpg' border='0' width='130' height='80' alt='Lancer Evolution'>Lancer Evolution</a></li></div><div id="zishu_test">
<li>
<a href="http://www.aceofmace.com/" target="_blank"><span>No:85 黑色 2009-09-10</span><img src='images/15502014331.jpg' border='0' width='130' height='80' alt='Ace of Mace'>Ace of Mace</a></li></div><div id="zishu_test">
<li>
<a href="http://www.comcasttown.com/" target="_blank"><span>No:84 多彩 2009-09-10</span><img src='images/15403912I7.jpg' border='0' width='130' height='80' alt='Comcast Town'>Comcast Town</a></li></div><div id="zishu_test">
<li>
<a href="http://www.nike.jp/nike_id/blazer/" target="_blank"><span>No:83 多彩 2009-09-10</span><img src='images/15395413D0.jpg' border='0' width='130' height='80' alt='NIKEiD Blazer'>NIKEiD Blazer</a></li></div><div id="zishu_test">
<li>
<a href="http://www.nissan.co.uk/" target="_blank"><span>No:82 白色 2009-09-10</span><img src='images/15362213126.jpg' border='0' width='130' height='80' alt='Nissan cars'>Nissan cars</a></li></div><div id="zishu_test">
<li>
<a href="http://www.samsungcamera.com/st50/" target="_blank"><span>No:81 多彩 2009-09-10</span><img src='images/15350611107.jpg' border='0' width='130' height='80' alt='Samsung Digital Camera'>Samsung Digital Came</a></li></div><div id="zishu_test">
<li>
<a href="http://cokelato.k2.pl/" target="_blank"><span>No:80 木褐 2009-09-10</span><img src='images/1522391b01.jpg' border='0' width='130' height='80' alt='Lato z Coca-Cola'>Lato z Coca-Cola</a></li></div><div id="zishu_test">
<li>
<a href="https://www.ford.com.br/" target="_blank"><span>No:79 黑色 2009-09-10</span><img src='images/1520561X64.jpg' border='0' width='130' height='80' alt='Ford Edge'>Ford Edge</a></li></div><div id="zishu_test">
<li>
<a href="http://www3.mercedes-benz.com/" target="_blank"><span>No:78 灰色 2009-09-10</span><img src='images/151356130Z.jpg' border='0' width='130' height='80' alt='Mercedes-Benz International'>Mercedes-Benz Intern</a></li></div><div id="zishu_test">
<li>
<a href="http://playingthecity.schirn-kunsthalle.de/" target="_blank"><span>No:77 灰色 2009-09-10</span><img src='images/1510361Q19.jpg' border='0' width='130' height='80' alt='Playing The City'>Playing The City</a></li></div><div id="zishu_test">
<li>
<a href="http://www.landofthelost.net/" target="_blank"><span>No:76 白色 2009-09-10</span><img src='images/150Z91V01.jpg' border='0' width='130' height='80' alt='Land of the Lost'>Land of the Lost</a></li></div><div id="zishu_test">
<li>
<a href="http://www.msichicago.org/fileadmin/Activities/Games/simple_machines/" target="_blank"><span>No:75 欧美 2009-09-10</span><img src='images/15035514X4.jpg' border='0' width='130' height='80' alt='Simple Machines Game'>Simple Machines Game</a></li></div><div id="zishu_test">
<li>
<a href="http://www.corny.de/" target="_blank"><span>No:74 木褐 2009-09-10</span><img src='images/15001512923.jpg' border='0' width='130' height='80' alt='Corny'>Corny</a></li></div><div id="zishu_test">
<li>
<a href="http://www.parasol-island.com/" target="_blank"><span>No:73 黑色 2009-09-10</span><img src='images/145Q5110M.jpg' border='0' width='130' height='80' alt='Parasol Island'>Parasol Island</a></li></div><div id="zishu_test">
<li>
<a href="http://www.werkstette.dk/" target="_blank"><span>No:72 欧美 2009-09-10</span><img src='images/1451301S23.jpg' border='0' width='130' height='80' alt='Werkstette'>Werkstette</a></li></div><div id="zishu_test">
<li>
<a href="http://www.feedyourego.co.za/" target="_blank"><span>No:71 欧美 2009-09-10</span><img src='images/1450111W48.jpg' border='0' width='130' height='80' alt='feed your ego'>feed your ego</a></li></div><div id="zishu_test">
<li>
<a href="http://sketch.odopod.com/" target="_blank"><span>No:70 欧美 2009-09-10</span><img src='images/144S41O28.jpg' border='0' width='130' height='80' alt='odosketch'>odosketch</a></li></div><div id="zishu_test">
<li>
<a href="http://www.matthiasdittrich.com/" target="_blank"><span>No:69 欧美 2009-09-10</span><img src='images/144I1195D.jpg' border='0' width='130' height='80' alt='Matthias Dittrich'>Matthias Dittrich</a></li></div><div id="zishu_test">
<li>
<a href="http://www.wechoosethemoon.org/" target="_blank"><span>No:68 欧美 2009-09-10</span><img src='images/14451512509.jpg' border='0' width='130' height='80' alt='We Choose the Moon'>We Choose the Moon</a></li></div><div id="zishu_test">
<li>
<a href="http://www.oasisforfun.com/" target="_blank"><span>No:67 欧美 2009-09-10</span><img src='images/144356115G.jpg' border='0' width='130' height='80' alt='oasisforfun.com'>oasisforfun.com</a></li></div><div id="zishu_test">
<li>
<a href="http://www.renault.fr/scenic-lapins-cretins/" target="_blank"><span>No:66 欧美 2009-09-10</span><img src='images/14424512430.jpg' border='0' width='130' height='80' alt='Nouveau Renault Grand'>Nouveau Renault Gran</a></li></div>
</ul>
<div style="clear:both">
</div>
</body>
</html>
JS代码(tit.js):
// JavaScript Document<!--document.write('<div id="pltsTipLayer" name="pltsTipLayer" style="display:none;
position:absolute;
z-index:10001;
text-align:left;
color:#C0FF00;
width:130px;
font-family:Arial;
font-size:10px;
border-left:3px solid #C0FF00"></div>');
var pltsPop=null;
var pltsoffsetX = 30;
// ��������λ������������Ҳ�ľ��룻3-12 ����var pltsoffsetY = -33;
// ��������λ������·��ľ��룻3-12 ����var pltsPopbg="#000000";
//����ɫvar pltsPopfg="none";
//ǰ��ɫvar pltsTitle="";
function pltsinits(){
document.onmouseover = plts;
document.onmousemove = moveToMouseLoc;
}
function plts(){
var o=event.srcElement;
if(o.alt!=null && o.alt!=""){
o.dypop=o.alt;
o.alt=""}
;
if(o.title!=null && o.title!=""){
o.dypop=o.title;
o.title=""}
;
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined"){
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
var Msg=pltsPop.replace(/\n/g,"<br>");
Msg=Msg.replace(/\0x13/g,"<br>");
var re=/\{
(.[^\{
]*)\}
/ig;
if(!re.test(Msg))pltsTitle="";
else{
re=/\{
(.[^\{
]*)\}
(.*)/ig;
pltsTitle=Msg.replace(re,"$1")+" ";
re=/\{
(.[^\{
]*)\}
/ig;
Msg=Msg.replace(re,"");
Msg=Msg.replace("<br>","");
}
var content = '<table cellspacing="1" cellpadding="0" style="FILTER:alpha(opacity=100);
background-color:'+pltsPopbg+';
" id=toolTipTalbe border=0><tr><td style="padding-left:10px;
padding-right:10px;
padding-top:6px;
padding-bottom:6px;
line-height:16px;
background-color:'+pltsPopfg+';
">'+Msg+'</td></tr></table>';
pltsTipLayer.innerHTML=content;
toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.documentElement.clientWidth/2.2);
moveToMouseLoc();
return true;
}
else{
pltsTipLayer.innerHTML='';
pltsTipLayer.style.display='none';
return true;
}
}
function moveToMouseLoc(){
if(pltsTipLayer.innerHTML=='')return true;
var MouseX=event.x;
var MouseY=event.y;
//window.status=event.y;
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
if(MouseY+pltsoffsetY+popHeight>document.documentElement.clientHeight){
popTopAdjust=-popHeight-pltsoffsetY*1.5;
}
else{
popTopAdjust=0;
}
if(MouseX+pltsoffsetX+popWidth>document.documentElement.clientWidth){
popLeftAdjust=-popWidth-pltsoffsetX*2;
}
else{
popLeftAdjust=0;
}
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.documentElement.scrollLeft+popLeftAdjust;
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.documentElement.scrollTop+popTopAdjust;
return true;
}
pltsinits();
//-->CSS代码(coolcss.css):
UL{list-style-position:outside;word-break:break-all;list-style-type:none;word-wrap:break-word;margin:0;padding:0;}
.IndexPost-Title-Bg{float:left;width:1008px;text-align:left;padding:0;}
#zishu_test{width:132px;height:100px;float:left;margin:6px}
#zishu_test:hover{width:132px;border-bottom:2px #e2e2e2 solid;border-right:2px #e2e2e2 solid;margin:5px;}
#zishu_test li{float:left;width:14%;text-align:center;margin:0 auto;list-style:none;}
#zishu_test li a{border:1px solid #E2E2E2;width:130px;display:block;color:#858585;text-decoration:none;line-height:17px;font-family:"Arial";font-size:10px;}
#zishu_test li img{width:130px;height:80px;border-bottom:1px solid #E2E2E2;}
#zishu_test li span{display:none;}
#zishu_test li a:hover{border:1px solid #000;height:98px;font-family:"Arial";font-size:10px;text-align:left;line-height:17px;text-align:center;}
#zishu_test li a:hover span{margin-top:80px;display:block;background:#333;width:130px;color:#fff;position:absolute;border-top:1px solid #000;font-family:"Arial";font-size:10px;}
* html #zishu_test li a:hover span{margin-left:0px;}
/* IE6 */
*+html #zishu_test li a:hover span{margin-left:0px;}
/* IE7*/
/*---------- cool导航 ---------*/
#navigation{margin:0;width:100%;border-top:1px #e2e2e2 solid;border-bottom:1px #e2e2e2 solid}
#menus li{display:inline;list-style:none;border:1px #e2e2e2 solid}
#menus li a{background:transparent url(menu.gif) no-repeat;display:block;color:#382E1F;height:31px;line-height:31px;padding:0 20px;margin-left:-10px;text-decoration:none;font-size:11px;float:left;z-index:1;}
#menus li a:hover{background-position:0 -31px;}
#menus li.current_page_item a,#menus li.current-cat a{background-position:0 -62px;}
#menus li a.home{background-position:0 -93px;width:45px;padding:0;margin-left:0;text-indent:-999em;}
#menus li a.home:hover{background-position:0 -124px;}
#menus li.current_page_item a.home{background-position:0 -155px;}
#menus li a.lastmenu:hover{background-position:0 0;}
分享到QQ
分享到微博
微信扫一扫
