jQuery鼠标滑过图片3D透视代码

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

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

以下是 jQuery鼠标滑过图片3D透视代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标滑过图片3D透视代码</title>
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/style.css">

</head>
<body>
<main class="container text-center">		      
	  <div class="row">
		 
		 <div class="col-md-6">
		   <h2>Default</h2>
			<div class="image-container animate-1">
			   <img src="./img/world-map.png" alt="world map">
			   <img src="./img/layer.svg" alt="places I have been">
			   <img src="./img/layer.svg" alt="places I have been">
			</div>
		 </div>
		 
		 <div class="col-md-6">
			<ul class="nav nav-pills">
			   <li class="active"><a data-option='{"distance": 15}'>Distace = 15</a></li>
			   <li><a data-option='{"rotation": 0.1}'>Rotation = 0.1</a></li>
			   <li><a data-option='{"perspective": 250}'>Perspective = 250</a></li>
			   <li><a data-option='{"startX": 0.2, "startY": 0.2}'>Start X/Y = 0.2/0.2</a></li>
			</ul>
			<div class="image-container animate-2">
			   <img src="./img/world-map.png" alt="world map">
			   <img src="./img/layer.svg" alt="places I have been">
			   <img src="./img/layer.svg" alt="places I have been">
			</div>
		 </div>
		 
	  </div>   
</main>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="scripts/3d.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	$('.animate-1').animate3d({
}
);
	var data = $('.active').children('a').data('option');
	$('.animate-2').animate3d(data);
	$('.nav-pills li').click(function(){
	$('.active').removeClass('active');
	$(this).addClass('active');
	var data = $('.active').children('a').data('option');
	$('.animate-2').animate3d(data);
}
)}
);

CSS代码(style.css):

body{font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","����","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
body{background-color:#2f477b;color:#e6e6e6;}
.container{}
.image-container{width:100%;padding-bottom:65%;background-color:rgba(255,255,255,0.5);position:relative;margin-bottom:50px;}
h2{margin-top:28px;margin-bottom:15px;}
.image-container img{width:90%;left:5%;top:8%;position:absolute;}
.nav-pills{margin:20px 0 15px 0;}
.nav-pills li{cursor:pointer;}

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