网站技术 | 万年历 | IT术语解释 | 在线翻译 | 中国邮政 | Alexa排名查询 | PR 值查询 | 在线代理 | IP地址查询 | 火车票查询 | 颜色选择器 | 常用网页小图标 | 网址导航 |
推荐视频黑客视频 | 安装Windows Vista视频 | 安装Windows XP系统视频教程 | 设置BIOS视频 | 硬盘分区视频 | 经典FLASH动画视频教程 | Photoshop视频教程
推荐工具IP地址查询 手机号查询 身份证查询 | 城市地图 | 火车票查询 | 健康指数 | 中秋祝福 | 许愿树 | 果果爱墙 | QQ爱墙 | 网页素材 | FLASH小游戏 |
  [图文]鼠标放在文字上出现一个整块 双击自动滚屏  【字体:
友情链接模块切换代码(鼠标放在文字上出现一个整块)
电脑知识网为您报时:今天是
分享到:

现在很多网站为了不影响其美观,对于大量的友情链接,都做了隐藏,这个隐藏表面上只用特定的几个字代表:友情链接、合作媒体等。当鼠标划过这几个字时,这个链接才能真正出现。这样既可以相互合作,又不影响其美观,还节省了很多地方。

实现这个效果的代码如下:

以下是代码片段:
<style type="text/css">
<!--
#class1content { width:936px; height:220px;overflow:hidden;}
-->
</style>
<div>
      <UL>
  <li style="cursor:pointer;" onmousemove="document.getElementById('class1content').style.display='block';document.getElementById('class1content1').style.display='none';">友情链接</li>
</UL></div> 
 
    <div id="class1content" style="line-height:20px; border-bottom: 1px solid #CCCCCC; padding-top:10px; background-color:#F7F7F7; text-align:center;height:59px; padding-left:10px; padding-right:10px; padding-top:10px; color:#CB0B01; display:none;" onmousemove="document.getElementById('class1content').style.display='block';" onmouseout="if (window.event.srcElement==document.getElementById('class1content')) document.getElementById('class1content').style.display='none';">
<UL>
<li style="color:#000000;">
<a href="http://www.diannaozs.com" target="_blank">电脑知识网</a>|<a href="http://www.chinastu.org" target="_blank">中国学生网</a>|     
</li>
</UL>
</div>

使用方法:将上面代码复杂到您已经布局好的网页中,就可以实现,效果可以查看www.chinastu.org这个网站的首页最底部友情链接旁边效果即可。

记得这个网页的头部必须带下面代码,附则不能实现:

以下是代码片段:
<!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">

以上代码是本站检验过的,没有错误。

美女写真

两性知识

幽默搞笑

热门新闻

  
推荐视频:
Windows Vista安装
Windows XP安装
设置BIOS
硬盘分区
经典FLASH动画视频教程
Photoshop视频教程
Dreamweaver视频教程
C语言视频
DOS 视频教程 (黑客入门)
推荐工具:
手机号、身份证、区号查询
城市地图
计算器
火车查询
健康指数查询
许愿树
爱墙祝福
Q爱
flash小游戏
站长工具:
IP查询
PR 值查询
Alexa排名查询
网站运营
百度优化
Google优化
Alexa排名
更多……
网站联盟:
中国学生网(校园类型网站)
第三导航(协助上网)
Flash小游戏(小游戏)
人人健康
七楼科技 (科技)
  • 上一篇源代码:

  • 下一篇源代码:
  • 相关文章
    友情链接向上滚动代码

    Copyright 2007-2011 电脑知识网(http://www.diannaozs.com) All rights reserved
    公安局备案:京公网安备110107000134
    信产部备案:京ICP备08100023号