这样的图片展示怎么做? 本帖最后由 tomhahaha 于 2010-03-25 02:47:58 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html 挺好的 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>123123</title><style type="text/css">body,div,ul,li { margin:0; padding:0;}#slide {position:relative; width:740px; height:240px; margin:20px auto;}#pic_list { position:absolute; left:0; bottom:0; width:100%; list-style: none; overflow:hidden; z-index:2;}#pic_list li { float:left; width:100px; height:52px; padding-top:10px;}#pic_list li img { position:absolute; top:18px; width:65px; height:35px; margin:0 20px; border:1px solid #fff;}#this_pic { position:absolute; width:100%; height:100%; border:none;}#transparence { position:absolute; left:0; bottom:0; width:100%; height:50px; background:#000; z-index:1; border-top:1px solid #fff;}</style><script src="jquery-1.3.2.js" type="text/javascript"></script><script type="text/javascript">$(function (){$('#pic_list img').mouseover(function(){if($('#this_pic').attr('src') == $(this).attr('src')) return;$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$(this).attr('src'));$('#this_a').attr('href',$(this).parents('a').attr('href'));$('#this_a').attr('title',$(this).parents('a').attr('title'));$(this).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);$(this).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);$(this).animate({top:0},500).css('opacity','1');});});$(function(){$('#transparence').css('opacity','0.4');$('#pic_list img').css({'opacity':'0.6'});$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});$('#pic_list a').click(function(){return false});});</script></head><body><div id="slide"><a href="#" id="this_a"><img src="http://www.jzxue.com/System/uploads/allimg/090622/1.jpg" id="this_pic" /></a><ul id="pic_list"><li><a href="http://www.jzxue.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/1.jpg" alt="" /></a></li><li><a href="http://www.5719.cn"><img src="http://www.jzxue.com/System/uploads/allimg/090622/2.jpg" alt="" /></a></li><li><a href="http://www.163.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/3.jpg" alt="" /></a></li><li><a href="http://www.baidu.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/4.jpg" alt="" /></a></li><li><a href="http://www.jzxue.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/5.jpg" alt="" /></a></li></ul><span id="transparence"></span></div><a href="http://www.jzxue.com">231</a></body></html> 应用JQuery可以简单的实现你要的效果! 如何打开服务器上的文件 电脑是跟8月31日有仇吗?为什么不能输入8月31日? js混淆 正则表达式 你说这代码哪里不同了,为什么他的能运行,我的就不能 有难度的问题,求解 一个简单的通讯录搜索功能问题 js中这样调用java变量为什么IE报语法错误 超难问题,关于表格,100分求解? 关于检测 组件 是否已安装? Jquery - FlexiGrid 的相关问题 action向jsp传值问题
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>123123</title>
<style type="text/css">
body,div,ul,li { margin:0; padding:0;}
#slide {position:relative; width:740px; height:240px; margin:20px auto;}
#pic_list { position:absolute; left:0; bottom:0; width:100%; list-style: none; overflow:hidden; z-index:2;}
#pic_list li { float:left; width:100px; height:52px; padding-top:10px;}
#pic_list li img { position:absolute; top:18px; width:65px; height:35px; margin:0 20px; border:1px solid #fff;}
#this_pic { position:absolute; width:100%; height:100%; border:none;}
#transparence { position:absolute; left:0; bottom:0; width:100%; height:50px; background:#000; z-index:1; border-top:1px solid #fff;}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$(this).attr('src'));
$('#this_a').attr('href',$(this).parents('a').attr('href'));
$('#this_a').attr('title',$(this).parents('a').attr('title'));
$(this).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$(this).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$(this).animate({top:0},500).css('opacity','1');
});
});
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
});
</script>
</head>
<body>
<div id="slide">
<a href="#" id="this_a"><img src="http://www.jzxue.com/System/uploads/allimg/090622/1.jpg" id="this_pic" /></a>
<ul id="pic_list">
<li><a href="http://www.jzxue.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/1.jpg" alt="" /></a></li>
<li><a href="http://www.5719.cn"><img src="http://www.jzxue.com/System/uploads/allimg/090622/2.jpg" alt="" /></a></li>
<li><a href="http://www.163.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/3.jpg" alt="" /></a></li>
<li><a href="http://www.baidu.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/4.jpg" alt="" /></a></li>
<li><a href="http://www.jzxue.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/5.jpg" alt="" /></a></li>
</ul>
<span id="transparence"></span>
</div>
<a href="http://www.jzxue.com">231</a>
</body>
</html>