jQuery scroll图片滚动菜单鼠标移动图片滚动-20130629 -

xjwolaile

浏览: 333008 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery scroll图片滚动菜单鼠标移动图片滚动-20130629

博客分类：

jQuery
学习
前端技术

mousemove scrollLeft

1、效果及功能说明
scroll图片滚动菜单通过鼠标移动在图片上左右移动来控制左右图片滚动或左后图片滚动

2、实现原理
定义好显示div的高度和宽度将全部图片放进div里计算整体图片的宽度定义mousemove方法获得鼠标指针在页面中的位置，通过计算鼠标移动的位置和方法来让图片进行左右的移动当图片移动时多出div的图片将会被隐藏

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[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="http://code.jquery.com/jquery-1.9.1.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 class="sc_menu">
		<ul class="sc_menu">
			<li><a href="http://www.17sucai.com/"><img src="images/1.jpg" alt="Menu"/><span>Menu</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/3.jpg" alt="Javascript"/><span>jQuery</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/4.jpg" alt="CSS"/><span>Scroll</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/6.jpg" alt="jQuery"/><span>jQuery</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/1.jpg" alt="Menu"/><span>Menu</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/3.jpg" alt="Graceful"/><span>Graceful</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/4.jpg" alt="Degradation"/><span>Degradation</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/5.jpg" alt="Progressive"/><span>Progressive</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li>	
		</ul>
	</div>
	
</body>
</html>