<head>
<title>title及alt提示特效</title>
<style type="text/css">
body{font-size:12px;color:#000000}
td{font-size:12px;color:#000000}
a:link{font-size:12px;color:#000000}
</style>
<script language="javascript">
var pltsPop=null;
var pltsoffsetX = 12; // d出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var pltsoffsetY = 15; // d出窗口位于鼠标下方的距离；3-12 合适
var pltstitle="";
documentwrite('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
documentonmouseover = plts;
documentonmousemove = moveToMouseLoc;
}
function plts()
{ var o=eventsrcElement;
if(oalt!=null && oalt!=""){odypop=oalt;oalt=""};
if(otitle!=null && otitle!=""){odypop=otitle;otitle=""};
pltsPop=odypop;
if(pltsPop!=null && pltsPop!="" && typeof(pltsPop)!="undefined")
{
pltsTipLayerstyleleft=-1000;
pltsTipLayerstyledisplay='';
var Msg=pltsPopreplace(/\n/g,"<br>");
Msg=Msgreplace(/\0x13/g,"<br>");
var re=/\{([^\{])\}/ig;
if(!retest(Msg))pltstitle="『水木设计联盟』";
else{
re=/\{([^\{])\}()/ig;
pltsTitle=Msgreplace(re,"$1")+" ";
re=/\{([^\{])\}/ig;
Msg=Msgreplace(re,"");
Msg=Msgreplace("<br>","");}
var content =
'<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+
'<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+
'<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+
'<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+
'</table></td></tr></table>';
pltsTipLayerinnerHTML=content;
toolTipTalbestylewidth=Mathmin(pltsTipLayerclientWidth,documentbodyclientWidth/22);
moveToMouseLoc();
return true;
}
else
{
pltsTipLayerinnerHTML='';
pltsTipLayerstyledisplay='none';
return true;
}
}
function moveToMouseLoc()
{
if(pltsTipLayerinnerHTML=='')return true;
var MouseX=eventx;
var MouseY=eventy;
var popHeight=pltsTipLayerclientHeight;
var popWidth=pltsTipLayerclientWidth;
if(MouseY+pltsoffsetY+popHeight>documentbodyclientHeight)
{
popTopAdjust=-popHeight-pltsoffsetY15;
pltsPoptopstyledisplay="none";
pltsPopbotstyledisplay="";
}
else
{
popTopAdjust=0;
pltsPoptopstyledisplay="";
pltsPopbotstyledisplay="none";
}
if(MouseX+pltsoffsetX+popWidth>documentbodyclientWidth)
{
popLeftAdjust=-popWidth-pltsoffsetX2;
topleftstyledisplay="none";
botleftstyledisplay="none";
toprightstyledisplay="";
botrightstyledisplay="";
}
else
{
popLeftAdjust=0;
topleftstyledisplay="";
botleftstyledisplay="";
toprightstyledisplay="none";
botrightstyledisplay="none";
}
pltsTipLayerstyleleft=MouseX+pltsoffsetX+documentbodyscrollLeft+popLeftAdjust;
pltsTipLayerstyletop=MouseY+pltsoffsetY+documentbodyscrollTop+popTopAdjust;
return true;
}
pltsinits();
</script>
</head>
<body>
链接提示效果：<a href=">//把一楼的梳理精简一下
function add() {
$('#file')append('<div>'+html+'</div>');
}
function remove(obj) {
$(obj)parent()remove();
}
如楼上说的，推荐最好使用插件，网络上搜索jquery tabs，免费的轻量级的很多。
如果非要手工的话也可以，只是相对麻烦。
如：
<ul><li><a href="#one">第1个tabs</a></li>
<li><a href="#two">第2个tabs</a></li>
<li><a href="#three">第3个tabs</a></li>
</ul>
<div id='one'>第1个tabs内容</div>
<div id='two' style='display:none;'>第2个tabs内容</div>
<div id='three' style='display:none;'>第3个tabs内容</div>
在点击第二个tabs的时候，将其他1和3的内容div隐藏掉，显示出id='two'的div就好了。不过css得自己写。挺麻烦的。
我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张进行编码，以此来达到循环切换的效果。在切换时，我们可以使用排他思想。当点击按钮切换下一张的时候，我们可以先遍历所有的，把所有的移动到两边，然后将要移动的移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反 *** 作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href=";
jquery ui 有这种效果
参考资料：
#bg img{margin:0 5px;border:1px solid #ddd;width:80px;height:80px;}
#bg imgon{border-color:#f00;}
</style>
<div id="bg">
<img src="缩略图地址" rel="大图地址">
<img src="缩略图地址" rel="大图地址">
<img src="缩略图地址" rel="大图地址">
</div>
//引入jQueryjs
<script>
var $mg=$("#bg")find("img");
$mgclick(function(){
var big=$(this)attr("rel");
$("body")css("background","url("+big+") 50% 50% no-repeat");
$(this)addClass("on")siblings("img")removeClass("on");
});
</script>
上面就是最简单的背景切换加缩略图，需要引入jQuery哈
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）