通过本文主要向大家介绍了jquery鼠标跟随,jquery图片跟随鼠标等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
一款非常乖巧的人物头像跟随鼠标转动效果，在浏览器屏幕内，人物脸庞始终面向鼠标转动。其实现原理即同一张图片上作出人物上下左右不同面向的效果，利用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