jquery鼠标经过切换动画光标特效js代码

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

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

以下是 jquery鼠标经过切换动画光标特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jquery鼠标经过切换动画光标特效</title>
<link rel="stylesheet"  href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet"  href="css/jquery-boomer.css" type="text/css" media="all" />
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery-boomer.js"></script>
<script>
	$(document).ready(function(){
		$('body').boomer();
		$('.cursor_example').boomer();
	});
</script>
</head>
<body>
<div class="boomer cursor_magic"></div>
<div class="container">
	<div class="cursor_example"><div class="boomer cursor_dog"></div></div>
	<div class="cursor_example"><div class="boomer cursor_bouncy_star"></div></div>		
	<div class="cursor_example"><div class="boomer cursor_flower"></div></div>		
	<div class="cursor_example"><div class="boomer cursor_heart"></div></div>		
	<div class="cursor_example"><div class="boomer cursor_pencil_blue"></div></div>		
	<div class="cursor_example"><div class="boomer cursor_pencil_green"></div></div>		
	<div class="cursor_example"><div class="boomer cursor_pink_tails"></div></div>		
	<div class="cursor_example"><div class="boomer cursor_star"></div></div>
	<br><br>
</div>
</body>
</html>

JS代码(jquery-boomer.js):

;
	(function($){
	var boomer={
	init:function(options){
	var o=options,$this=$(this);
	$this.each(function(i){
	// MERGE USER OPTIONS WITH DEFAULTSvar $this=$(this);
	$this// HIDE THIS LINE FOR POSITIONING.css('cursor','none')// ^^^.on('mousemove.boomer',function(e){
	// USER SETS TOP/LEFT MARGINS IN CSS FOR OFFSETTING CURSOR BASED ON CURSOR IMAGE SIZEvar $cur=$this.find('div.boomer:first'),curX=e.pageX-$cur.css('margin-left').pF(),curY=e.pageY-$cur.css('margin-top').pF();
	if($cur[0].style.display==='none') $cur[0].style.display='block';
	$cur.offset({
	left:curX-$cur.outerWidth(),top:curY-$cur.outerHeight()}
);
	e.stopImmediatePropagation();
}
).on('mouseenter.boomer',function(){
	var $cursors=$('div.boomer'),$cur=$this.find('div.boomer:first');
	$cursors.not($cur).css('display','none');
	$cur[0].style.display='block';
}
).on('mouseleave.boomer',function(){
	var $cursors=$('div.boomer'),$cur=$this.find('div.boomer:first');
	$cur[0].style.display='none';
}
);
}
);
}
}
$.fn.boomer=function(method,options){
	if(boomer[method]){
	return boomer[method].apply(this,Array.prototype.slice.call(arguments,1));
}
else if(typeof method==='object'||!method){
	return boomer.init.apply(this,arguments);
}
else{
	$.error('Method '+method+' does not exist');
}
}
}
)(jQuery);
	String.prototype.removeWS=function(){
	return this.toString().replace(/\s/g,'');
}
;
	String.prototype.pF=function(){
	return parseFloat(this);
}
;
	Number.prototype.pF=function(){
	return parseFloat(this);
}
;

CSS代码(jquery-boomer.css):

@charset "utf-8";.boomer{vertical-align:baseline;margin:0;padding:0;border:0;cursor:inherit;box-sizing:content-box;/* AVOID OPENING MOBILE CONTEXT MENU ON TAPHOLD */
-webkit-touch-callout:none;-moz-touch-callout:none;-ms-touch-callout:none;-o-touch-callout:none;touch-callout:none;/* AVOID HIGHLIGHTING ON TAP */
-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);/* AVOID CHANGING TEXT SIZE ON ORIENTATION CHANGE */
-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none;/* AVOID SELECTING TEXT AND IMAGES */
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-o-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);margin:0;padding:0;box-sizing:border-box;float:none;font-size:100%;position:absolute;z-index:10000;pointer-events:none;}
.cursor_magic{display:none;width:95px;height:95px;margin-left:-50px;margin-top:-50px;transform:scale(1.25,1.25);background:transparent url(../cursors/magic.gif) no-repeat;}
.cursor_dog{display:none;width:95px;height:95px;margin-left:-50px;margin-top:-50px;transform:scale(1.25,1.25);background:transparent url(../cursors/dog.gif) no-repeat;}
.cursor_bouncy_star{display:none;width:95px;height:95px;margin-left:-50px;margin-top:-50px;transform:scale(1.25,1.25);background:transparent url(../cursors/bouncy_star.gif) no-repeat;}
.cursor_flower{display:none;width:95px;height:95px;margin-left:-60px;margin-top:-60px;transform:scale(1.25,1.25);background:transparent url(../cursors/flower.gif) no-repeat;}
.cursor_heart{display:none;width:95px;height:95px;margin-left:-60px;margin-top:-60px;transform:scale(1.25,1.25);background:transparent url(../cursors/heart.gif) no-repeat;}
.cursor_pencil_blue{display:none;width:95px;height:95px;margin-left:-60px;margin-top:-60px;transform:scale(1.25,1.25);background:transparent url(../cursors/pencil_blue.gif) no-repeat;}
.cursor_pencil_green{display:none;width:95px;height:95px;margin-left:-60px;margin-top:-60px;transform:scale(1.25,1.25);background:transparent url(../cursors/pencil_green.gif) no-repeat;}
.cursor_pink_tails{display:none;width:95px;height:95px;margin-left:-60px;margin-top:-60px;transform:scale(1.25,1.25);background:transparent url(../cursors/pink_tails.gif) no-repeat;}
.cursor_star{display:none;width:95px;height:95px;margin-left:-60px;margin-top:-60px;transform:scale(1.25,1.25);background:transparent url(../cursors/star.gif) no-repeat;}

CSS代码(style.css):

@charset "utf-8";html,body{min-height:100%;margin:0;padding:0;}
body{font-family:"Open Sans",sans-serif;background:#019587;color:#FFF;overflow-x:hidden;}
pre,code{color:#FFF;font-family:monospace;font-size:18px;}
.container{margin:0 auto;}
h1{font-size:82px;color:#FFF;font-family:'Raleway',sans-serif;font-weight:100;}
p{font-size:25px;line-height:46px;font-weight:100;color:#FFF;}
p.example{font-size:20px;line-height:32px;font-weight:100;color:#FFF;}
h2{font-size:26px;font-weight:300;line-height:46px;color:#FFF;}
ul li{font-size:25px;line-height:46px;font-weight:100;color:#FFF;}
.setting{font-weight:400;display:inline-block;width:170px;}
.cursor_example{width:22%;height:150px;background:#fec107;display:inline-block;border:2px solid #FFF;border-radius:2px;margin:5px;transition:transform 0.25s ease;}
.cursor_example:hover{transform:scale(1.1,1.1);}
/* IPHONE */
@media (max-width:375px){.container{width:375px;padding-top:50px;}
}
/* IPAD */
@media (max-width:768px){.container{width:500px;padding-top:50px;}
.setting{display:block;}
}
/* DESKTOP */
@media (min-width:768px){.container{width:768px;padding-top:50px;}
}
/* DESKTOP + */
@media (min-width:1024px){.container{width:1000px;padding-top:50px;}
}

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