练习制作tab菜单 -

hj149

浏览: 86187 次
性别:
来自: 河北

最近访客更多访客>>

123456lllppp

qingsuan

18624079290

xxZZyyZZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

练习制作tab菜单

博客分类：

web前端学习

jQuery CSS JavaScript XHTML HTML

用到jQuery

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=utf-8" />
<link href="style/basic.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="style/jquery-1.3.2.js"></script>
<script type="text/javascript">
 (function(){
  var imgnum=1;
  var changstart;
 function changimg(){
	 imgnum=(imgnum>5)? '1':imgnum;
	 $('#tagview img').attr('src',function(){return 'img/tagview/img'+imgnum+'.gif';});
	 //alert($("#tagview img").attr('alt'));
	 $("#tagview a").removeClass('here');
	 $("a:contains("+imgnum+")").addClass('here');
	 imgnum++; 
	 }
 changstart=setInterval(function(){changimg(imgnum);},2500); 
 function aa(){
  $('#tagview ul a').mouseover(function(){ //alert($('#tagview img'));
									 $("#tagview a").removeClass('here');
									 $(this).addClass('here');
									 clearInterval(changstart);
									 imgnum=$(this).text();
									 $('#tagview img').attr('src',function(){return 'img/tagview/img'+imgnum+'.gif';});
									 });
  $('#tagview ul a').mouseout(function(){changstart=setInterval(function(){changimg(imgnum);},2500);});
  }
  window.onload= aa;
 })()
</script>
<link href="style/home.css" rel="stylesheet" type="text/css" />

</head>

<body>
          <div id="tagview">
          <a href="#"><img alt='图片展示'/></a>
          <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          </ul>
          </div>
</body>
</html>

css代码为：

@charset "utf-8";
/* CSS Document */
#tagview{
	position:relative;
	margin-top:10px;
	width:376px;
	height:186px;}
#tagview img{
	z-index:10;
	width:370px;
	height:180px;
	padding:0;
	margin:0;}
#tagview ul{
	position:absolute;
	right:0;
	bottom:0;
	list-style:none;
	padding:10px 10px;
	margin:0;
	z-index:20;
	}
#tagview li{
	float:left;}
#tagview ul a{
	color:#FFF;
	display:block;
	text-decoration:none;
	margin:3px;
	width:17px;
	height:17px;
	text-align:center;
	background-color:#5c5f63;}
#tagview ul a.here{
	background-color:#d39635;
	border:#FFF 1px solid;
	width:15px;
	height:15px;}
#tagview ul a:hover{
	background-color:#d39635;
	border:#FFF 1px solid;
	width:15px;
	height:15px;}

运行效果：

http://www.everbeing.cn/

问题总结：

1.在<script>标签中写js代码时要把过程包装成function函数，然后把函数传递给window.onload(传的是函数名，不带

括号的)，不然，jQuery的$（）取值为空;

2.setInterval()函数里面的执行函数传递的是函数名，如果要带参数，要包装到function(){}匿名函数里

查看图片附件

分享到：

HTTP的请求和响应详解-----fsockopen | php5.3.1和Apache2.2安装配置问题

2009-12-20 11:59
浏览 1086
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

练习制作tab菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

练习制作tab菜单

评论

发表评论

相关推荐

Javascript中的this详解

joomla模板的执行过程

Ajax+php带进度条上传文件

HTTP的请求和响应详解-----fsockopen

php5.3.1和Apache2.2安装配置问题

javascript的prototype详解

JavaScript习题练习

javascript使用方括号（[]）和“.”引用对象的属性和方法

正则表达式与replace

理解hasOwnProperty（）的作用

Web2.0的概念

web发展史以及历史意义

深入理解web2.0与web1.0的区别

Web开发技术的历史发展简介

JS添加事件处理函数

JavaScript的9大陷阱

利用ajax动态显示xml于table中（js代码）

JavaScript实现鼠标悬停显示缩略图

Web前端工程师技能列表

最近访客更多访客>>