jQuery图片跟随鼠标移动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片跟随鼠标移动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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" lang="en" xml:lang="en">
	<head>
		<title>jQuery图片跟随鼠标移动</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- Javascript librarys -->
		<!-- jQuery -->
		<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
		<!-- jQuery MouseSlide plugin minified -->
		<script src="js/jquery.mouseslide-2.0.demo.js" type="text/javascript"></script>
		<!-- jQuery LightBox -->
		<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
		<!-- Cufon font replacer -->
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/qlassik.cufonfonts.js" type="text/javascript"></script>
		<!-- Gallery init commands -->
		<script src="js/galleryinit.js" type="text/javascript"></script>
		<!-- Changing fonts with cufon -->
		<script type="text/javascript">
			Cufon.replace('#topmenu > li a', { fontFamily: 'Qlassik Medium', hover: true });
			Cufon.replace('#topmenu > li a', { textShadow: '#fff 1px 1px' });
		</script>
		<!-- MouseSlide CSS Rules -->
		<link rel="stylesheet" href="css/jquery.mouseslide.css" type="text/css" media="screen">
		<!-- LightBox CSS Rules -->
		<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
		<!-- All CSS remaining rules for layout -->
		<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
	</head>
	<body>
		<div id="bodycontainer">
			<!-- Header -->
			<div id="headercontainer">
				<!-- Tweak -->
				<div class="clear"></div>
				<!-- Tweak End -->
			</div>
			<!-- Header End -->
			<!-- Content area -->
			<div id="content">
				<!-- Gallery -->
				<div id="gallerycontainer">
					<ul class="mouseslider">
						<li><a href="img/1.jpg" title="winter1 Description"><img src="img/thumbs/1.jpg" /></a></li>
						<li><a href="img/2.jpg" title="winter2 Description"><img src="img/thumbs/2.jpg" /></a></li>
						<li><a href="img/3.jpg" title="winter3 Description"><img src="img/thumbs/3.jpg" /></a></li>
						<li><a href="img/4.jpg" title="winter4 Description"><img src="img/thumbs/4.jpg" /></a></li>
						<li><a href="img/5.jpg" title="winter5 Description"><img src="img/thumbs/5.jpg" /></a></li>
						<li><a href="img/6.jpg" title="winter6 Description"><img src="img/thumbs/6.jpg" /></a></li>
						<li><a href="img/7.jpg" title="winter7 Description"><img src="img/thumbs/7.jpg" /></a></li>
						<li><a href="img/8.jpg" title="winter8 Description"><img src="img/thumbs/8.jpg" /></a></li>
						<li><a href="img/9.jpg" title="winter9 Description"><img src="img/thumbs/9.jpg" /></a></li>
						<li><a href="img/10.jpg" title="winter10 Description"><img src="img/thumbs/10.jpg" /></a></li>
					</ul>
				</div>
				<!-- Gallery End -->
			</div>
			<!-- Content area End -->
		</div>
	</body>
</html>

JS代码(galleryinit.js):

$(window).load(function(){
	//Mouse Slide$("#gallerycontainer").mouseslide({
	height:'185px',//Element heightwidthExpand:true,//Auto Expand Widthmirror:true,//Create MirrormirrorOpacity:.3 //30% Mirror Opacity}
);
	//Lightbox init (to zoom images and see description)$('#gallerycontainer a').lightBox();
}
);

JS代码(jquery.mouseslide-2.0.demo.js):

eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--){
	d[e(c)]=k[c]||e(c)}
k=[function(e){
	return d[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(b($){
	$.I.J=b(w){
	7 v={
	o:\'K\',i:a,d:a,p:.3}
;
	7 6=$.L(v,w);
	7 9=1;
	7 5=0;
	7 2=f;
	2.g(\'G\',\'M\');
	2.4().g(\'o\',6.o);
	2.4().4().z(b(t){
	5=5+$(f).h(a)}
);
	c(6.i){
	q(5<2.8()){
	2.4().4(":j-k("+9+")").l().A(2.4());
	5=5+2.4().4(":j-k("+9+")").h(a);
	9++}
}
2.4().g("8",5);
	c(6.d){
	2.l().C(2).D("E","");
	2.m().B(0,6.p)}
c(6.i||6.d){
	$(T).N("R",y)}
b y(){
	c(6.i){
	5=0;
	2.4().4().z(b(t){
	5=5+$(f).h(a)}
);
	q(5<2.8()){
	2.4().4(":j-k("+9+")").l().A(2.4());
	5=5+2.4().4(":j-k("+9+")").h(a);
	9++}
2.4().g("8",5);
	c(6.d){
	2.m().O();
	2.l().C(2).D("E","");
	2.m().B(0,6.p)}
}
}
$(f).F().H(b(e){
	7 x=e.P-f.Q;
	7 n=(2.4().8()-2.8())/2.8();
	7 r=x*n;
	7 u=(2.8()-x)*n;
	2.s(r);
	c(6.d){
	2.m().s(u)}
}
)}
}
)(S);
	',56,56,'||self||children|galleryWidth|opts|var|width|expands|true|function|if|mirror||this|css|outerWidth|widthExpand|nth|child|clone|next|calc|height|mirrorOpacity|while|left|scrollLeft|index|right|defaults|options||resizeWindow|each|appendTo|fadeTo|insertAfter|attr|id|parent|overflow|mousemove|fn|mouseslide|185px|extend|hidden|bind|remove|pageX|offsetLeft|resize|jQuery|window'.split('|'),0,{
}
))

CSS代码(jquery.mouseslide.css):

/* Thumbnails container configuration */
.mouseslider > li{list-style-type:none;float:left;margin-left:5px !important;}
/* Adding white border */
.mouseslider > li img{border:1px solid #ccc;padding:5px;background:#fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}

附件:下载该文件资源,减少时间成本(增值服务)