jQuery高仿2012淘宝商城多格子焦点图滚动切换-20130629
[html5]
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}.demo{width:240px;text-align:center;margin:40px auto 0 auto;}.demo a{font-weight:800;font-size:18px;}/* sc_menu */div.sc_menu{position:relative;height:145px;width:500px;overflow:auto;margin:40px auto 0 auto;}ul.sc_menu{display:block;height:110px;width:1500px;padding:15px 0 0 15px;background:url('images/navigati.png') repeat-x;}.sc_menu li{display:block;float:left;padding:0 4px;}.sc_menu a{display:block;text-decoration:none;}.sc_menu span{display:none;margin-top:3px;text-align:center;font-size:12px;color:#fff;}.sc_menu a:hover span{display:block;}.sc_menu img{border:3px #fff solid; -webkit-border-radius:3px; -moz-border-radius:3px;}.sc_menu a:hover img{filter:alpha(opacity=50);opacity:0.5;}</style><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){var div = $('div.sc_menu'), ul = $('ul.sc_menu'), ulPadding = 15;// 设置覆盖宽度，还可以提升载入速度var divWidth = div.width();// 获得大div的宽度div.css({overflow: 'hidden'});// 将多出div的图片给删除掉var lastLi = ul.find('li:last-child');// 最后显示的图像容器div.mousemove(function(e){// 当鼠标移动到菜单就是小图片上改变背景颜色var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;// 当加载图像UL宽度增加var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;// 重新计算每个时间div.scrollLeft(left);//根据鼠标的移动而移动图片});});</script></head><body><div alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Menu</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/2.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Navigation</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/3.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>jQuery</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/4.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Scroll</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/5.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Horizontal</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/6.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>jQuery</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/1.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Menu</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/2.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Navigation</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/3.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Graceful</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/4.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Degradation</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/5.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Progressive</span></a></li><li><a href="http://www.17sucai.com/"><img src="images/6.jpg" alt="jQuery高仿2012淘宝商城多网格焦点图滚动切换-20130629"/><span>Enhancement</span></a></li></ul></div></body></html>