编程 Javascript

基于jquery实现人物头像跟随鼠标转动

Posted in Javascript onAugust 23, 2015

一款非常乖巧的人物头像跟随鼠标转动效果，在浏览器屏幕内，人物脸庞始终面向鼠标转动。其实现原理即同一张图片上作出人物上下左右不同面向的效果，利用JS调用背景图片的位置，以此实现人物“转脸”的jquery特效效果。
先给大家展示效果图，需要的朋友可以下载源码

效果演示源码下载

具体实现过程不多说了，直接给大家贴代码了。

代码如下：

<!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=utf-8" />
<title>基于jquery实现人物头像跟随鼠标转动效果</title>
<link rel="stylesheet" type="text/css" href="css/jiaobenzhijia.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/team.css" media="screen">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/lateral-eye.js"></script>
<script type="text/javascript" src="js/jquerytools.js"></script>
<script type="text/javascript" src="js/jquery.jkey-1.1.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
</head>
<body>
<div id="wrapper" class="wrapslide1 lateralSlide ">
 <div class="container">
  <h1 class="page-title">A passionate team</h1>
  <ul class="the-team clearfix">
   <li>
    <figure id="eye_andor_baranyi" class="eye">Andor</figure>
    <strong class="tooltip">Andor Baranyi<small>Development</small></strong> <strong class="name">Andor</strong> </li>
   <li>
    <figure id="eye_angela_borsan" class="eye">Angela</figure>
    <strong class="tooltip">Angela Borșan<small>Finance</small></strong> <strong class="name">Angela</strong> </li>
   <li>
    <figure id="eye_attila_szasz" class="eye">Attila</figure>
    <strong class="tooltip">Attila Szász<small>Development</small></strong> <strong class="name">Attila</strong> </li>
   <li>
    <figure id="eye_bogdan_haifa" class="eye">Bogdan</figure>
    <strong class="tooltip">Bogdan Haifa<small>Development</small></strong> <strong class="name">Bogdan</strong> </li>
   <li>
    <figure id="eye_bogdan_sala" class="eye">Bogdan</figure>
    <strong class="tooltip">Bogdan Sala<small>Development</small></strong> <strong class="name">Bogdan</strong> </li>
   <li>
    <figure id="eye_bogdan_stanescu" class="eye">Bogdan</figure>
    <strong class="tooltip">Bogdan Stănescu<small>Development</small></strong> <strong class="name">Bogdan</strong> </li>
   <li>
    <figure id="eye_bogus" class="eye">Bogus</figure>
    <strong class="tooltip">Bogus<small>Special Projects</small></strong> <strong class="name">Bogus</strong> </li>
   <li>
    <figure id="eye_botond_raduly" class="eye">Botond</figure>
    <strong class="tooltip">Botond Raduly<small>Development</small></strong> <strong class="name">Botond</strong> </li>
   <li>
    <figure id="eye_calin_tritean" class="eye">Călin</figure>
    <strong class="tooltip">Călin Tritean<small>Development</small></strong> <strong class="name">Călin</strong> </li>
   <li>
    <figure id="eye_ciprian_herman" class="eye">Ciprian</figure>
    <strong class="tooltip">Ciprian Herman<small>Development</small></strong> <strong class="name">Ciprian</strong> </li>
   <li>
    <figure id="eye_ciprian_morar" class="eye">Ciprian</figure>
    <strong class="tooltip">Ciprian Morar<small>Leadership</small></strong> <strong class="name">Ciprian</strong> </li>
   <!-- <li>
<figure id="eye_cristian_ban" class="eye">Cristian</figure>
<strong class="tooltip">Cristian Ban<small>Development</small></strong>
<strong class="name">Cristian</strong>
</li> -->
   <!--
<li>
<figure id="eye_cristian_buda" class="eye">Cristian</figure>
<strong class="tooltip">Cristian Buda<small>Development</small></strong>
<strong class="name">Cristian</strong>
</li>
-->
   <li>
    <figure id="eye_cristian_cojita" class="eye">Cristian</figure>
    <strong class="tooltip">Cristian Cojiță<small>Development</small></strong> <strong class="name">Cristian</strong> </li>
   <li>
    <figure id="eye_mesaros" class="eye">Cristian</figure>
    <strong class="tooltip">Cristian Mesaros<small>Development</small></strong> <strong class="name">Cristian</strong> </li>
   <li>
    <figure id="eye_cristian_zdrobe" class="eye">Cristian</figure>
    <strong class="tooltip">Cristian Zdrobe<small>Development</small></strong> <strong class="name">Cristian</strong> </li>
   <li>
    <figure id="eye_cristina_moldovan" class="eye">Cristina</figure>
    <strong class="tooltip">Cristina Moldovan<small>QA</small></strong> <strong class="name">Cristina</strong> </li>
   <li>
    <figure id="eye_csaba_tekse" class="eye">Csaba</figure>
    <strong class="tooltip">Csaba Tekse<small>Development</small></strong> <strong class="name">Csaba</strong> </li>
   <!--
<li>
<figure id="eye_daniel_cosman" class="eye">Daniel</figure>
<strong class="tooltip">Daniel Cosman<small>QA</small></strong>
<strong class="name">Daniel</strong>
</li>
-->
   <!-- <li>
<figure id="eye_daniel_zaremba" class="eye">Daniel</figure>
<strong class="tooltip">Daniel Zaremba<small>Development</small></strong>
<strong class="name">Daniel</strong>
</li> -->
   <!-- 			<li>
<figure id="eye_daria_petru" class="eye">Daria</figure>
<strong class="tooltip">Daria Nadina Petru<small>Management</small></strong>
<strong class="name">Daria</strong>
</li> -->
   <li>
    <figure id="eye_dory_ciceu" class="eye">Doru</figure>
    <strong class="tooltip">Doru Ciceu<small>Development</small></strong> <strong class="name">Doru</strong> </li>
   <li>
    <figure id="eye_dragos_bucevschi" class="eye">Dragoș</figure>
    <strong class="tooltip">Dragoș Bucevschi<small>Development</small></strong> <strong class="name">Dragoș</strong> </li>
   <li>
    <figure id="eye_erika_lacatus" class="eye">Erika</figure>
    <strong class="tooltip">Erika Lăcătuş<small>QA</small></strong> <strong class="name">Erika</strong> </li>
   <li>
    <figure id="eye_filip_chereches" class="eye">Filip</figure>
    <strong class="tooltip">Filip Cherecheș-Toșa<small>Leadership</small></strong> <strong class="name">Filip</strong> </li>
   <li>
    <figure id="eye_gabriel_lacatus" class="eye">Gabriel</figure>
    <strong class="tooltip">Gabriel Lăcătuş<small>Development</small></strong> <strong class="name">Gabriel</strong> </li>
   <li>
    <figure id="eye_ildiko_soos" class="eye">Ildikó</figure>
    <strong class="tooltip">Ildikó Soós<small>Development</small></strong> <strong class="name">Ildikó</strong> </li>
   <li>
    <figure id="eye_istvan_takacss" class="eye">István</figure>
    <strong class="tooltip">István Takács<small>Development</small></strong> <strong class="name">István</strong> </li>
   <li>
    <figure id="eye_jozsi" class="eye">Jozsi</figure>
    <strong class="tooltip">József Gergely<small>Development</small></strong> <strong class="name">Jozsi</strong> </li>
   <li>
    <figure id="eye_lavinia_mendrea" class="eye">Lavinia</figure>
    <strong class="tooltip">Lavinia Mendrea<small>Development</small></strong> <strong class="name">Lavinia</strong> </li>
   <li>
    <figure id="eye_levente_horvath" class="eye">Levente</figure>
    <strong class="tooltip">Levente Horváth<small>Development</small></strong> <strong class="name">Levente</strong> </li>
   <li>
    <figure id="eye_liviu_pogar" class="eye">Liviu</figure>
    <strong class="tooltip">Liviu Pogar<small>QA</small></strong> <strong class="name">Liviu</strong> </li>
   <li>
    <figure id="eye_marc" class="eye">Marc</figure>
    <strong class="tooltip">Marc Abrudan<small>Development</small></strong> <strong class="name">Marc</strong> </li>
   <li>
    <figure id="eye_maximilian_marele" class="eye">Maximilian</figure>
    <strong class="tooltip">Maximilian Marele<small>Design</small></strong> <strong class="name">Maximilian</strong> </li>
   <li>
    <figure id="eye_mihai_potcoava" class="eye">Mihai</figure>
    <strong class="tooltip">Mihai Potcoavă<small>Development</small></strong> <strong class="name">Mihai</strong> </li>
   <li>
    <figure id="eye_mihai_savu" class="eye">Mihai</figure>
    <strong class="tooltip">Mihai Savu<small>Development</small></strong> <strong class="name">Mihai</strong> </li>
   <li>
    <figure id="eye_mircea_baicu" class="eye">Mircea</figure>
    <strong class="tooltip">Mircea Baicu<small>Development</small></strong> <strong class="name">Mircea</strong> </li>
   <li>
    <figure id="eye_mircea_dragoi" class="eye">Mircea</figure>
    <strong class="tooltip">Mircea Drăgoi<small>Design</small></strong> <strong class="name">Mircea</strong> </li>
   <li>
    <figure id="eye_paul_abrudan" class="eye">Paul</figure>
    <strong class="tooltip">Paul Abrudan<small>Development</small></strong> <strong class="name">Paul</strong> </li>
   <li>
    <figure id="eye_radu_lucaciu" class="eye">Radu</figure>
    <strong class="tooltip">Radu Lucaciu<small>Development</small></strong> <strong class="name">Radu</strong> </li>
   <li>
    <figure id="eye_radu_pantea" class="eye">Radu</figure>
    <strong class="tooltip">Radu Pantea<small>QA</small></strong> <strong class="name">Radu</strong> </li>
   <li>
    <figure id="eye_sebastian_morar" class="eye">Sebastian</figure>
    <strong class="tooltip">Sebastian Morar<small>Development</small></strong> <strong class="name">Sebastian</strong> </li>
   <li>
    <figure id="eye_stefan_balan" class="eye">Ștefan</figure>
    <strong class="tooltip">Ștefan Bălan<small>Design</small></strong> <strong class="name">Ștefan</strong> </li>
   <li>
    <figure id="eye_tibor_fazakas" class="eye">Tibor</figure>
    <strong class="tooltip">Tibor Fazakas<small>QA</small></strong> <strong class="name">Tibor</strong> </li>
   <li>
    <figure id="eye_timi" class="eye">Timi</figure>
    <strong class="tooltip">Timi Fagadar<small>Development</small></strong> <strong class="name">Timi</strong> </li>
   <li>
    <figure id="eye_tudor_galanopulos" class="eye">Tudor</figure>
    <strong class="tooltip">Tudor Galanopulos<small>Development</small></strong> <strong class="name">Tudor</strong> </li>
   <li>
    <figure id="eye_victor_stegaru" class="eye">Victor</figure>
    <strong class="tooltip">Victor Stegaru<small>Development</small></strong> <strong class="name">Victor</strong> </li>
   <li>
    <figure id="eye_viorel_dram" class="eye">Viorel</figure>
    <strong class="tooltip">Viorel Dram<small>Development</small></strong> <strong class="name">Viorel</strong> </li>
   <li>
    <figure id="eye_zsolt_borbely" class="eye">Zsolt</figure>
    <strong class="tooltip">Zsolt Borbely<small>Development</small></strong> <strong class="name">Zsolt</strong> </li>
   <li>
    <figure id="eye_you" class="eye">You?</figure>
    <strong class="tooltip"><a href="https://3water.com/">Join us!</a><small>We have great coffee!</small></strong> <strong class="name">You?</strong> </li>
  </ul>
 </div>
</div>
</body>
</html>

以上代码就是基于jquery实现人物头像跟随鼠标转动，希望大家喜欢。

基于jquery实现人物头像跟随鼠标转动

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery学习笔记二实现可编辑的表格

Apr 09 Javascript

javascript中常用编程知识

Apr 08 Javascript

JavaScript实现继承的4种方法总结

Oct 16 Javascript

Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)

Jan 23 Javascript

jQuery中hover与mouseover和mouseout的区别分析

Dec 24 Javascript

基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标

Jan 22 Javascript

arcgis for js栅格图层叠加(Raster Layer)问题

Nov 22 Javascript

解决Jquery下拉框数据动态获取的问题

Jan 25 jQuery

解决vue打包项目后刷新404的问题

Mar 06 Javascript

Vue中使用方法、计算属性或观察者的方法实例详解

Oct 31 Javascript

vue使用原生swiper代码实例

Feb 05 Javascript

详解vue中使用transition和animation的实例代码

Dec 12 Vue.js

jquery+css实现绚丽的横向二级下拉菜单-附源码下载

Aug 23 #Javascript

jquery ajax 如何向jsp提交表单数据

Aug 23 #Javascript

纯HTML5制作围住神经猫游戏-附源码下载

Aug 23 #Javascript

javascript中Array()数组函数详解

Aug 23 #Javascript

jquery+css实现的红色线条横向二级菜单效果

Aug 22 #Javascript

js实现的二级横向菜单条实例

Aug 22 #Javascript

JS实现网页顶部向下滑出的全国城市切换导航效果

Aug 22 #Javascript