标签： jQuery

jquery很好很强大，几行代码搞定早先在flash上实现的滑动背景的菜单效果(已在crome,firefox,IE6上测试过兼容,IE8未知)：代码如下：

<!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" />
<title>滑动背景的ＪＳ导航菜单－基于jquery</title>
<style type="text/css">
ul, li { list-style:none; margin:0; padding:0 }
#main { margin:0 auto; width:900px; height:500px; }
#menu { margin:0 auto; width:500px; height:36px; position:relative; }
#menu_bg { width:500px; height:36px; position:absolute; left:0; top:0; background:#920202; }
#menu_text { width:500px; height:36px; position:absolute; z-index:10 }
#menu_text ul { margin-left:40px; }
#menu_text li { width:60px; float:left; padding:0 10px; border-right:1px solid #7c0000; border-left:1px solid #9e0606; line-height:36px; text-align:center; color:white; cursor:pointer; }
#menu_text #li_first { border-left:0 }
#menu_text #li_last { border-right:0 }
#slide_block { width:80px; height:36px; left:40px; z-index:5; background:#ec5e5e; position:absolute; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
var action=0;
$(document).ready(function(){                
$("#menu_text li").each(function(i){
$(this).mouseover(function(){                
if(action == 1)
action = 0;
else{
$("#slide_block").stop();                                
}
$("#slide_block").animate({left:40+i*82+'px'},'fast',function(){
action = 1;
});
});
});
});
</script>
</head>
<body>
<div id="menu">
  <div id="menu_bg"></div>
  <div id="slide_block"></div>
  <div id="menu_text">
    <ul>
      <li id="li_first">导航一</li>
      <li>导航二</li>
      <li>导航三</li>
      <li>导航四</li>
      <li id="li_last">导航五</li>
    </ul>
  </div>
</div>
</body>

防止图片尺寸太大撑破网页
方法一：jQuery控制：

第一行不用解释了吧？
第二行是查找所有img标签，每一个做后边的function处理
第三行设定最大的宽度，我这里取得是屏幕分辨率减去左右2列的宽度和一个常量。
第四，五行判断图片的宽度，如果超过这个宽度则设其宽度为允许的最大宽度。

现在看来，第三行应该和第二行换一下，效率应该会高些，这么写还有一个问题就是必须浏览器最大化才正常，还有什么好的解决方案呢？

方法二：JS控制：
<script>
function resizeImg(obj) {
var obj = document.getElementById(obj);
var objContent = obj.innerHTML;
var imgs = obj.getElementsByTagName(‘img’);
if(imgs==null) return;
for(var i=0; i<imgs.length; i++) {
if(imgs[i].width>parseInt(obj.style.width)) {
imgs[i].width = parseInt(obj.style.width);
}
}
}
window.onload = function() {resizeImg(‘testDiv‘);}
</script>

调用的时候只要修改表格或DIV的ID名字（红色代码的部分）就可以了。
转载自:
http://www.juyimeng.com/control-images-max-width-with-jquery.html
http://www.lao8.org/html/8/2010-10-2/js.html