jQuery遮罩图片hover翻转效果特效代码

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

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

以下是 jQuery遮罩图片hover翻转效果特效代码的示例演示效果:

当前平台(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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/animation.css" rel="stylesheet" media="screen" type="text/css">
</head>
<body>
<div class="index_hd">
	<div class="fr hd_r major-list-outer">
		<ul class="major-list">
			<li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1413775760-7544.jpg" width="294" height="267">
					</span>
					<span class="back-face to-left"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1400684346-4329.jpg" width="294" height="267">
					</span>
					<span class="back-face to-right"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1413775714-2418.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1411890878-8918.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
            <li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1413775714-2418.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1400684434-4609.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
            <li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1428032296-8158.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
			<li class="major-item">
				<a href="#">
					<span class="txt-hide front-face">
						<img src="images/1405250374-3685.jpg" width="294" height="267">
					</span>
					<span class="back-face to-top"></span>
				</a>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

var hover_dir ={
	wrapper:$p(".major-list")[0],box:$p(".major-item"),target:$p(".back-face"),bindEvent:function(){
	var mouse_pos,x,y,stop_bubble;
	for(var i = 0;
	i < hover_dir.box.length;
	i++){
	(function(n){
	$p.addEvent(hover_dir.box[n],"mouseover",function(event){
	event = $p.getEvent(event);
	var relatedT = $p.getRelatedTarget(event);
	if(!$p.contains(hover_dir.box[n],relatedT)){
	var child = hover_dir.box[n].childNodes[0];
	$p.stopPropagation(event);
	$p.removeClass(hover_dir.target[n],"to-left") ||$p.removeClass(hover_dir.target[n],"to-right") ||$p.removeClass(hover_dir.target[n],"to-top") ||$p.removeClass(hover_dir.target[n],"to-bottom");
	x = event.pageX;
	y = event.pageY;
	mouse_pos ={
	"x":x,"y":y}
;
	var dir = $p.get_dir(hover_dir.box[n],mouse_pos);
	switch(dir){
	case "left":$p.addClass(hover_dir.target[n],"from-left");
	break;
	case "right":$p.addClass(hover_dir.target[n],"from-right");
	break;
	case "top":$p.addClass(hover_dir.target[n],"from-top");
	break;
	case "bottom":$p.addClass(hover_dir.target[n],"from-bottom");
	break;
	default:break;
}
}
}
);
	$p.addEvent(hover_dir.box[n],"mouseout",function(event){
	event = $p.getEvent(event);
	var relatedT = $p.getRelatedTarget(event);
	if(!$p.contains(hover_dir.box[n],relatedT)){
	$p.removeClass(hover_dir.target[n],"from-left") ||$p.removeClass(hover_dir.target[n],"from-right") ||$p.removeClass(hover_dir.target[n],"from-top") ||$p.removeClass(hover_dir.target[n],"from-bottom");
	x = event.pageX;
	y = event.pageY;
	mouse_pos ={
	"x":x,"y":y}
;
	var dir = $p.get_dir(hover_dir.box[n],mouse_pos);
	switch(dir){
	case "left":$p.addClass(hover_dir.target[n],"to-left");
	break;
	case "right":$p.addClass(hover_dir.target[n],"to-right");
	break;
	case "top":$p.addClass(hover_dir.target[n],"to-top");
	break;
	case "bottom":$p.addClass(hover_dir.target[n],"to-bottom");
	break;
	default:break;
}
}
}
);
}
)(i);
}
}
,init:function(){
	hover_dir.bindEvent();
}
}
;
	hover_dir.init();

JS代码(public.js):

Function.prototype.method = function(name,func){
	if(!this.prototype[name]){
	this.prototype[name] = func;
}
return this;
}
function $p(targ){
	if(typeof targ === "string"){
	var first_letter = targ.substr(0,1),other_letter = targ.substr(1);
	switch (first_letter){
	case "#":return document.getElementById(other_letter);
	break;
	case ".":if (document.querySelectorAll){
	return document.querySelectorAll(targ);
}
else{
	var targArr = [];
	function getNode(elem){
	if(elem.className){
	var classArr = elem.className.split(" ");
	for(var i = 0;
	i < classArr.length;
	i++){
	if(classArr[i] == other_letter){
	targArr.push(elem);
	break;
}
}
}
if(elem.childNodes.length){
	for(var i = 0;
	i < elem.childNodes.length;
	i++){
	if(elem.childNodes[i].nodeType == 1){
	getNode(elem.childNodes[i]);
}
}
}
}
getNode(document.body);
	return targArr;
}
break;
	default:return document.getElementsByTagName(targ);
}
}
}
$p.addClass = function(elem,newClass){
	if(!elem)return false;
	else if(!elem.className){
	elem.className = newClass;
	return false;
}
else{
	var ownClass = elem.className.split(" "),had = false;
	for(var i = 0;
	i < ownClass.length;
	i++){
	if(ownClass[i] === newClass){
	had = true;
	break;
}
}
if(!had){
	elem.className += " " + newClass;
}
return had;
}
}
;
	$p.removeClass = function(elem,oneClass){
	if(!elem || !elem.className) return false;
	var ownClass = elem.className.split(" "),had = false;
	for(var i = 0;
	i < ownClass.length;
	i++){
	if(ownClass[i] === oneClass){
	ownClass.splice(i,1);
	had = true;
	break;
}
}
if(had){
	elem.className = "";
	if(ownClass.length < 1){
	return had;
}
else if(ownClass.length == 1){
	elem.className = ownClass[0];
}
else if(ownClass.length >1){
	for(var i = 0;
	i < ownClass.length;
	i++){
	if(i == ownClass.length - 1){
	elem.className += ownClass[i];
}
else{
	elem.className += ownClass[i] + " ";
}
}
}
}
return had;
}
;
	$p.addEvent = function(elem,eventName,handler){
	if(elem){
	if(elem.addEventListener){
	return elem.addEventListener(eventName,handler,false);
}
else if(elem.attachEvent){
	return elem.attachEvent("on" + eventName,handler);
}
else{
	elem["on" + eventName] = handler;
}
}
}
;
	$p.removeEvent = function(elem,eventName,handler){
	if(elem){
	if(elem.removeEventListener){
	return elem.removeEventListener(eventName,handler,false);
}
else if(elem.detachEvent){
	return elem.detachEvent("on" + eventName,handler);
}
else{
	elem["on" + eventName] = null;
}
}
}
;
	$p.getEvent = function(event){
	return event ? event:window.event;
}
;
	$p.getTarget = function(event){
	return event.target || event.srcElement;
}
;
	$p.getRelatedTarget = function(event){
	return event.relatedTarget || event.toElement || event.fromElement || null;
}
;
	$p.contains = function(parent,cur){
	while(cur.parentNode){
	if(cur.parentNode === parent){
	return true;
}
cur = cur.parentNode;
}
return false;
}
;
	$p.preventDefault = function(event){
	if(event.preventDefault){
	event.preventDefault();
}
else{
	event.returnValue = false;
}
}
;
	$p.stopPropagation = function(event){
	if(event.stopPropagation){
	event.stopPropagation();
}
else{
	event.cancleBubble = true;
}
}
;
	$p.get_pos = function(elem){
	if(!elem) return false;
	var left = elem.offsetLeft,top = elem.offsetTop,current = elem.offsetParent;
	while(current !== null){
	left += current.offsetLeft;
	top += current.offsetTop;
	current = current.offsetParent;
}
return{
	"left":left,"top":top}
;
}
;
	$p.get_dir = function(elem,mouse_pos){
	if(!elem) return false;
	var pos = $p.get_pos(elem),size ={
	"width":elem.offsetWidth,"height":elem.offsetHeight}
,dx = mouse_pos.x - pos.left - size.width/2,dy = (mouse_pos.y - pos.top - size.height/2)*-1,eve_tan = dy/dx,tan = size.height/size.width;
	if(dx != 0){
	if(eve_tan > tan*-1 && eve_tan < tan && dx < 0){
	return "left";
}
else if(eve_tan > tan*-1 && eve_tan < tan && dx > 0){
	return "right";
}
else if((eve_tan > tan || eve_tan < tan*-1) && dy > 0){
	return "top";
}
else if((eve_tan > tan || eve_tan < tan*-1) && dy <= 0){
	return "bottom";
}
}
else if(dy > 0){
	return "top";
}
else{
	return "bottom";
}
}
;

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
html,body,ul,li,ol,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,form{margin:0px;padding:0px;}
body{margin:0 auto;font-size:12px;font-family:"Arial";height:auto;}
html{overflow-x:hidden;}
div{margin:0px auto;}
a{text-decoration:none;font-size:12px;cursor:pointer;color:#333;font-family:"Arial";}
a:hover{color:#62a7a5;zoom:1;}
img{border:none;vertical-align:top;}
ul,li{list-style:none;background:none;}
*html{background-image:url(about:blank);background-attachment:fixed;}
/**解决ie6中的颤动效果**/
h1,h2,h3,h4,h5,h6,i,em{font:12px/17px Arial,Helvetica,sans-serif;font-style:normal;}
div{margin:0 auto;}
em{font-style:normal;}
/* index_hd */
.index_hd{width:1180px;margin:40px auto 0 auto;height:555px;overflow:hidden;border-bottom:1px solid #ddd;}
.index_hd .hd_l{width:590px;height:535px;overflow:hidden;}
.index_hd .hd_l ul li{position:relative}
.index_hd .hd_r ul li{float:left;width:294px;height:268px;overflow:hidden;border-left:1px #fff solid;position:relative}

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