在一个网页中如何实现两个JS特效_资讯

你不是写了2个function呢，元素的事件调用你想要调用的function不就可以了么？

function A{……}

function B{……}

</script>

例如：btn1的onclick事件触发A，btn2的onclick事件触发B。。。这样就可以咯~~~

<html>

<head>

<title>title及alt提示特效</title>

body{font-size:12px;color:#000000}

td{font-size:12px;color:#000000}

a:link{font-size:12px;color:#000000}

</style>

var pltsPop=null;

var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适

var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；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="http://wwwlanrentukucom/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a>

documentbodyonmousemove=quickalt;

function quickalt() {

if (eventsrcElementhint)eventsrcElementalt=eventsrcElementhint;

if(eventsrcElementalt && eventsrcElementalt!='') {

eventsrcElementhint=eventsrcElementalt;

altlayerstylevisibility='visible';

altlayerstyleleft=eventx-1;

altlayerstyletop=eventy+16;

altlayerinnerHTML=eventsrcElementhint

eventsrcElementalt="";

}

else altlayerstylevisibility='hidden';}

</script>

</body>

</html>

看看这个

改好了`要优化`修改了HTML页面和其JS`CSS没动

<!--

var s=490;

var minheight=52;

var maxheight=200;

function shoppingcat(obj){

var key = objinnerText;

var content=documentgetElementById("content");

if(contentstylepixelHeight==0)contentstylepixelHeight=minheight;

if(key=="展开"){

contentstylepixelHeight+=s;

if(contentstylepixelHeight<maxheight){

setTimeout("shoppingcat();",1);

}else{

objinnerText="关闭";

}

}else{

contentstylepixelHeight-=s;

if(contentstylepixelHeight>minheight){

setTimeout("shoppingcat(obj);",1);

}else{

objinnerText="展开";

}

function MM_jumpMenu(targ,selObj,restore){ //v30

eval(targ+"location='"+selObjoptions[selObjselectedIndex]value+"'");

if (restore) selObjselectedIndex=0;

}

//-->

</script>

<!--

STYLE1 {color: #DAE0E0}

-->

</style>

<tr>

</select>

</select>

</select>

</select>

<label>

</label></td>

</tr>

</table>

<tr>

<td colspan="2" bgcolor="#000000"><div align="center" class="xingcheng">大于2个结果则进行分页</div></td>

</tr>

</table>

</div>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div><br>

不是很简单一两句话能说清楚地，需要HTML, CSS和javascript的配合。我大概说下做法，你需要自己写写试试看

首先把你的div设置style为overflow hidden

然后在div里面再添加一个div，假设叫做imgcontainer，在里面存放所有，以float: left方式显示，每个的宽度你是知道的，这样的个数每个的宽度（必要的话再加上之间的间隔）设置为imgcontainer的总宽度。然后把div的宽度设置为显示3个的宽度。这样就可以保证只显示3个，多余的看不到。

然后在点击左右2个按钮的时候添加事件，每点击一次，让imgcontainer的marginLeft增加或减少一个的宽度（同样必要的时候加上之间的间隔距离），这样就使得列表在左右移动了。

下面是我的一个例子，跟你的需求可能不完全一样，大概做下参考：

HTML片段

<li><figure onclick="ViewPhoto(this,'aaaaa')"><div class="samplecontainer"><img src="/img/singularityjpg" onload="javascript:DrawSampleImage(this);" border="0" ></div><figcaption class="imagename">aaaaa</figcaption></figure></li>

<li><figure onclick="ViewPhoto(this,'bbbbb')"><div class="samplecontainer"><img src="/img/pyrejpg" onload="DrawSampleImage(this);" border="0" ></div><figcaption class="imagename">bbbbb</figcaption></figure></li>

</ol>

</div>

</div>

CSS部分

photolist_container {

margin: 0;

/Firefox/

width: -moz-calc(100% - 30px);

/chrome safari/

width: -webkit-calc(100% - 30px);

/Standard /

width: calc(100% - 30px);

float: left;

height: 140px;

overflow: hidden;

}

olphotolist {

background-color: black;

margin: 0;

margin-left: 1px;

padding: 0;

list-style: none;

height: auto;

padding: 0;

display: block;

height: 125px;

}

olphotolist>li {

margin: 0;

margin-left: -1px;

padding: 4px;

text-align:center;

display:inline;

float: left;

border: 1px solid #FF6699;

width: 100px;

}

#photolist figure {

margin: 0;

padding: 0;

text-align:center;

border: 1px solid #000000;

cursor: pointer;

}

samplecontainer {

height: 100px;

width: 100px;

text-align: center;

margin: 0;

padding: 0;

border: 0;

display: table-cell;

vertical-align: middle;

}

samplecontainer>img {

margin: 0;

padding: 0;

border: 0;

vertical-align:middle;

}

Javascript部分

function MovePhotoList(size) {

var photolist = documentgetElementById("photolist");

var marginLeft = 1;

if (photoliststylemarginLeft != "")

marginLeft = parseInt(photoliststylemarginLeft);

marginLeft = marginLeft + size;

if (marginLeft < (documentgetElementById("photolist_container")offsetWidth - photolistoffsetWidth))

{

marginLeft = documentgetElementById("photolist_container")offsetWidth - photolistoffsetWidth;

documentgetElementById("nav_thumbs_next")setAttribute("class", "disabled");

}

else

{

documentgetElementById("nav_thumbs_next")setAttribute("class", "enable");

}

if (marginLeft > 1)

{

marginLeft = 1;

documentgetElementById("nav_thumbs_prev")setAttribute("class", "disabled");

}

else

{

documentgetElementById("nav_thumbs_prev")setAttribute("class", "enable");

}

photoliststylemarginLeft = marginLeft + "px";

}

function NavThumbsPrev() {

var nav_thumbs_prev = documentgetElementById("nav_thumbs_prev");

if (nav_thumbs_prevgetAttribute("class") != "disabled") {

MovePhotoList(56);

}

function NavThumbsNext() {

var nav_thumbs_next = documentgetElementById("nav_thumbs_next");

if (nav_thumbs_nextgetAttribute("class") != "disabled") {

MovePhotoList(-56);

}

欢迎分享，转载请注明来源：表白网

原文地址:https://h5.hunlipic.com/biaobai/3361541.html

在一个网页中如何实现两个JS特效

发表评论

评论列表（0条）