腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二

技术文章搜索

关键字

Javascript 中的腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 297 ::

收藏到网摘: n/a

实例学习Javascript之构建方法、属性腾讯QQ网页在线客服，随网页滚动条上下移动的效果一

该特效需要用到相关的图片，比如那个效果的皮服，请各位自行将相关的图片下载到本地使用。

点击运行可以看到效果:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二</title>
</head>
<body>
<script language="JavaScript1.2">
function move(x, y) {
if (document.all) {
object1.style.pixelLeft += x;
object1.style.pixelTop += y;}
else
if (document.layers) {
document.object1.left += x;
document.object1.top += y;
}};
function position() {
document.object1.left += -200;
document.object1.top += 0;
document.object1.visibility = "show"
};
function makeStatic() {
if (document.all) {object1.style.pixelTop=document.body.scrollTop+100}
else {eval('document.object1.top=eval(window.pageYOffset+20)');}
setTimeout("makeStatic()",0);}
</script>
<layer class="NS" onmouseover="move(580,0)" onmouseout="move(-580, 0)" top="20" visibility="hide" name="object1" left="0"> <script language="JavaScript1.2">
if (document.all)
document.write('<DIV ID="object1" style="Position : Absolute ;Left : -125px ;Top : 20px ;Width : 0px ;Z-Index : 20">')
</script> <table onmouseover="move(120,0)" onmouseout="move(-120, 0)" cellspacing="1" cellpadding="2" border="0"> <tr> <td> <style type="text/css">BODY { MARGIN: 0px
}
</style> <table cellspacing="0" cellpadding="0" width="118" align="center" border="0"> <tr> <td> <img height="160" alt="" src="/upload/tech/20091012/20091012083140_ec5decca5ed3d6b8079e2e7e7bacc9f2.jpg" width="118" border="0" name="servicepic_01"></td> </tr> <tr> <td> <table cellspacing="0" cellpadding="0" width="118" align="left" border="0"> <tr> <td background="/upload/tech/20091012/20091012083146_3dd48ab31d016ffcbf3314df2b3cb9ce.jpg"> <img height="25" alt="" src="/upload/tech/20091012/20091012083146_3dd48ab31d016ffcbf3314df2b3cb9ce.jpg" width="14" border="0" name="servicepic_02"></td> <td align="middle" width="89" bgcolor="#f8f6f7" height="25"> <a target="blank" href="tencent://message/?uin=615050000&Site=网页特效观止&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:10" alt="点击这里给我发消息"></a></td> <td background="/upload/tech/20091012/20091012083150_8b16ebc056e613024c057be590b542eb.jpg"> <img height="25" alt="" src="/upload/tech/20091012/20091012083150_8b16ebc056e613024c057be590b542eb.jpg" width="15" border="0" name="servicepic_04"></td> </tr> </table> </td> </tr> <tr> <td> <img height="17" alt="" src="/upload/tech/20091012/20091012083151_6364d3f0f495b6ab9dcf8d3b5c6e0b01.jpg" width="118" border="0" name="servicepic_05"></td> </tr> <tr> <td> <table cellspacing="0" cellpadding="0" width="118" align="left" border="0"> <tr> <td background="/upload/tech/20091012/20091012083354_846c260d715e5b854ffad5f70a516c88.jpg"> <img height="24" alt="" src="/upload/tech/20091012/20091012083354_846c260d715e5b854ffad5f70a516c88.jpg" width="14" border="0" name="servicepic_06"></td> <td align="middle" width="89" bgcolor="#f8f6f7" height="24"> <a href="http://amos1.taobao.com/msg.ww?v=2&uid=123456789&s=1" target="_blank"> <img alt="点击这里给我发消息" src="/upload/tech/20091012/20091012083355_99c5e07b4d5de9d18c350cdf64c5aa3d.gif" border="0"></a></td> <td background="/upload/tech/20091012/20091012083355_69adc1e107f7f7d035d7baf04342e1ca.jpg"> <img height="24" alt="" src="/upload/tech/20091012/20091012083355_69adc1e107f7f7d035d7baf04342e1ca.jpg" width="15" border="0" name="servicepic_08"></td> </tr> <tr> <td background="/upload/tech/20091012/20091012083354_846c260d715e5b854ffad5f70a516c88.jpg">　</td> <td align="middle" bgcolor="#f8f6f7" height="35"> <table cellspacing="1" cellpadding="2" width="88%" align="center" bgcolor="#ffa800" border="0"> <tr> <td align="middle" bgcolor="#ffffff"> <a href="#" target="_blank"> <span style="font-size: 9pt">站点留言簿</span></a></td> </tr> </table> </td> <td background="/upload/tech/20091012/20091012083355_69adc1e107f7f7d035d7baf04342e1ca.jpg">　</td> </tr> </table> </td> </tr> <tr> <td> <img height="22" alt="" src="/upload/tech/20091012/20091012083400_70c639df5e30bdee440e4cdf599fec2b.jpg" width="118" border="0" name="servicepic_09"></td> </tr> </table> </td> <td valign="top" align="middle" width="12" rowspan="100"> <img height="109" src="/upload/tech/20091012/20091012083400_df263d996281d984952c07998dc54358.gif" width="20"> </td> </tr> <script language="JavaScript1.2">
</script> </table> <script language="JavaScript1.2">
if (document.all)
document.write('<\/DIV>')
</script>
</layer>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

实例学习Javascript之构建方法、属性腾讯QQ网页在线客服，随网页滚动条上下移动的效果一

Javascript 中的 腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二

评论 (0) All

Javascript 中的腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二