JS鼠标悬停图片翻动展示效果特效代码

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

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

以下是 JS鼠标悬停图片翻动展示效果特效代码的示例演示效果:

当前平台(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" />
<title>JS鼠标悬停图片翻动展示效果</title>
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
<link type="text/css" href="css/animation.css" rel="stylesheet" />
</head>

<body>
<!-- 代码 开始 -->
<div class="center major-list-outer">
	<ul class="major-list">
		<li class="major-item" id="dx"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="rj"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="jx"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="gdz"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="jsj"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="kz"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="jg"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="sx"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="gl"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="ch"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="wl"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
		<li class="major-item" id="xw"><a href="#" target="_blank"><span class="txt-hide front-face"></span><span class="back-face"></span></a></li>
	</ul>
</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:$(".major-list")[0],box:$(".major-item"),target:$(".back-face"),bindEvent:function(){
	var mouse_pos,x,y,stop_bubble;
	for(var i = 0;
	i < hover_dir.box.length;
	i++){
	(function(n){
	$.addEvent(hover_dir.box[n],"mouseover",function(event){
	event = $.getEvent(event);
	var relatedT = $.getRelatedTarget(event);
	if(!$.contains(hover_dir.box[n],relatedT)){
	var child = hover_dir.box[n].childNodes[0];
	$.stopPropagation(event);
	$.removeClass(hover_dir.target[n],"to-left") ||$.removeClass(hover_dir.target[n],"to-right") ||$.removeClass(hover_dir.target[n],"to-top") ||$.removeClass(hover_dir.target[n],"to-bottom");
	x = event.pageX;
	y = event.pageY;
	mouse_pos ={
	"x":x,"y":y}
;
	var dir = $.get_dir(hover_dir.box[n],mouse_pos);
	switch(dir){
	case "left":$.addClass(hover_dir.target[n],"from-left");
	break;
	case "right":$.addClass(hover_dir.target[n],"from-right");
	break;
	case "top":$.addClass(hover_dir.target[n],"from-top");
	break;
	case "bottom":$.addClass(hover_dir.target[n],"from-bottom");
	break;
	default:break;
}
}
}
);
	$.addEvent(hover_dir.box[n],"mouseout",function(event){
	event = $.getEvent(event);
	var relatedT = $.getRelatedTarget(event);
	if(!$.contains(hover_dir.box[n],relatedT)){
	$.removeClass(hover_dir.target[n],"from-left") ||$.removeClass(hover_dir.target[n],"from-right") ||$.removeClass(hover_dir.target[n],"from-top") ||$.removeClass(hover_dir.target[n],"from-bottom");
	x = event.pageX;
	y = event.pageY;
	mouse_pos ={
	"x":x,"y":y}
;
	var dir = $.get_dir(hover_dir.box[n],mouse_pos);
	switch(dir){
	case "left":$.addClass(hover_dir.target[n],"to-left");
	break;
	case "right":$.addClass(hover_dir.target[n],"to-right");
	break;
	case "top":$.addClass(hover_dir.target[n],"to-top");
	break;
	case "bottom":$.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 $(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);
}
}
}
$.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;
}
}
;
	$.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;
}
;
	$.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;
}
}
}
;
	$.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;
}
}
}
;
	$.getEvent = function(event){
	return event ? event:window.event;
}
;
	$.getTarget = function(event){
	return event.target || event.srcElement;
}
;
	$.getRelatedTarget = function(event){
	return event.relatedTarget || event.toElement || event.fromElement || null;
}
;
	$.contains = function(parent,cur){
	while(cur.parentNode){
	if(cur.parentNode === parent){
	return true;
}
cur = cur.parentNode;
}
return false;
}
;
	$.preventDefault = function(event){
	if(event.preventDefault){
	event.preventDefault();
}
else{
	event.returnValue = false;
}
}
;
	$.stopPropagation = function(event){
	if(event.stopPropagation){
	event.stopPropagation();
}
else{
	event.cancleBubble = true;
}
}
;
	$.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}
;
}
;
	$.get_dir = function(elem,mouse_pos){
	if(!elem) return false;
	var pos = $.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";
}
}
;
	function params(o){
	//将要传给后台的参数转化为字符串，以加入到url中var arr = [];
	for(var i in o){
	arr.push(i + "=" + encodeURIComponent(o[i]));
}
return arr.join("&");
}
$.ajaxp = function(args){
	//创建script节点，向后台请求js，src节点携带我的参数信息var script = document.createElement("script");
	script.type="text/javascript";
	script.src = args.url + "?" + params(args.params);
	document.body.appendChild(script);
	var time = setTimeout(args.params.callback + "()",6000);
	//设置超时时间，觉得不妥可以更改script.onload = function(){
	clearTimeout(time);
}
;
}
;
	$.show_tips = function(words,timeout){
	var tips = $('.tips')[0] || (function(){
	var tips = document.createElement('div');
	tips.className = 'tips animated';
	return document.body.insertBefore(tips,document.body.firstChild);
}
)();
	tips.innerHTML = words;
	$.removeClass(tips,'hide');
	$.addClass(tips,'show');
	setTimeout($.hide_tips,timeout + 1000);
}
;
	$.hide_tips = function(){
	var tips = $('.tips')[0];
	$.removeClass(tips,'show');
	$.addClass(tips,'hide');
	setTimeout('$.removeClass($(".tips")[0],"hide")',1000);
}
;

CSS代码(zzsc.css):

/* CSS Document */
html{color:#444333;background-color:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;min-width:960px}
html,body,section,div,p,h1,form,input,textarea,label,ol,ul,li,h1,h2,h3{margin:0;padding:0}
ol li{list-style-position:inside}
ul li{list-style:none}
::selection{color:#fff;background-color:rgb(10,77,0)}
.center{display:block;width:960px;margin:30px auto;position:relative}
/*for-majors*/
.major-list-outer{height:573px;overflow:hidden}
.major-list{margin-right:-32px;margin-bottom:-30px;*margin-bottom:0px}
.major-list li{width:216px;height:169px;margin-right:32px;margin-bottom:32px;float:left;position:relative}
.major-list li a,.major-list li a span{width:100%;height:100%;display:block;position:absolute;left:0;top:0}
.front-face{z-index:2;background:url(../images/majors.png) no-repeat 0 0}
.back-face{z-index:1;background:url(../images/majors_back.jpg) no-repeat 0 0}
.major-list li a{overflow:hidden}
.major-list li:hover a .back-face{z-index:3;}
#dx .front-face,#dx .back-face{background-position:0 0}
#rj .front-face,#rj .back-face{background-position:-217px 0}
#jx .front-face,#jx .back-face{background-position:-434px 0}
#gdz .front-face,#gdz .back-face{background-position:-651px 0}
#jsj .front-face,#jsj .back-face{background-position:0 -170px}
#kz .front-face,#kz .back-face{background-position:-217px -170px}
#jg .front-face,#jg .back-face{background-position:-434px -170px}
#sx .front-face,#sx .back-face{background-position:-651px -170px}
#gl .front-face,#gl .back-face{background-position:-0 -340px}
#ch .front-face,#ch .back-face{background-position:-217px -340px}
#wl .front-face,#wl .back-face{background-position:-434px -340px}
#xw .front-face,#xw .back-face{background-position:-651px -340px}
/*for-majors ending here*/
.btm{margin:30px auto}
.btm p{font:normal 12px/24px 'Microsoft YaHei';text-align:center}

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