一款非常乖巧的人物头像跟随鼠标转动效果，在浏览器屏幕内，人物脸庞始终面向鼠标转动。其实现原理即同一张图片上作出人物上下左右不同面向的效果，利用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"> <div> <h1>A passionate team</h1> <ul> <li> <figure id="eye_andor_baranyi">Andor</figure> <strong>Andor Baranyi<small>Development</small></strong> <strong>Andor</strong> </li> <li> <figure id="eye_angela_borsan">Angela</figure> <strong>Angela Borșan<small>Finance</small></strong> <strong>Angela</strong> </li> <li> <figure id="eye_attila_szasz">Attila</figure> <strong>Attila Szász<small>Development</small></strong> <strong>Attila</strong> </li> <li> <figure id="eye_bogdan_haifa">Bogdan</figure> <strong>Bogdan Haifa<small>Development</small></strong> <strong>Bogdan</strong> </li> <li> <figure id="eye_bogdan_sala">Bogdan</figure> <strong>Bogdan Sala<small>Development</small></strong> <strong>Bogdan</strong> </li> <li> <figure id="eye_bogdan_stanescu">Bogdan</figure> <strong>Bogdan Stănescu<small>Development</small></strong> <strong>Bogdan</strong> </li> <li> <figure id="eye_bogus">Bogus</figure> <strong>Bogus<small>Special Projects</small></strong> <strong>Bogus</strong> </li> <li> <figure id="eye_botond_raduly">Botond</figure> <strong>Botond Raduly<small>Development</small></strong> <strong>Botond</strong> </li> <li> <figure id="eye_calin_tritean">Călin</figure> <strong>Călin Tritean<small>Development</small></strong> <strong>Călin</strong> </li> <li> <figure id="eye_ciprian_herman">Ciprian</figure> <strong>Ciprian Herman<small>Development</small></strong> <strong>Ciprian</strong> </li> <li> <figure id="eye_ciprian_morar">Ciprian</figure> <strong>Ciprian Morar<small>Leadership</small></strong> <strong>Ciprian</strong> </li> <!-- <li> <figure id="eye_cristian_ban">Cristian</figure> <strong>Cristian Ban<small>Development</small></strong> <strong>Cristian</strong> </li> --> <!-- <li> <figure id="eye_cristian_buda">Cristian</figure> <strong>Cristian Buda<small>Development</small></strong> <strong>Cristian</strong> </li> --> <li> <figure id="eye_cristian_cojita">Cristian</figure> <strong>Cristian Cojiță<small>Development</small></strong> <strong>Cristian</strong> </li> <li> <figure id="eye_mesaros">Cristian</figure> <strong>Cristian Mesaros<small>Development</small></strong> <strong>Cristian</strong> </li> <li> <figure id="eye_cristian_zdrobe">Cristian</figure> <strong>Cristian Zdrobe<small>Development</small></strong> <strong>Cristian</strong> </li> <li> <figure id="eye_cristina_moldovan">Cristina</figure> <strong>Cristina Moldovan<small>QA</small></strong> <strong>Cristina</strong> </li> <li> <figure id="eye_csaba_tekse">Csaba</figure> <strong>Csaba Tekse<small>Development</small></strong> <strong>Csaba</strong> </li> <!-- <li> <figure id="eye_daniel_cosman">Daniel</figure> <strong>Daniel Cosman<small>QA</small></strong> <strong>Daniel</strong> </li> --> <!-- <li> <figure id="eye_daniel_zaremba">Daniel</figure> <strong>Daniel Zaremba<small>Development</small></strong> <strong>Daniel</strong> </li> --> <!-- <li> <figure id="eye_daria_petru">Daria</figure> <strong>Daria Nadina Petru<small>Management</small></strong> <strong>Daria</strong> </li> --> <li> <figure id="eye_dory_ciceu">Doru</figure> <strong>Doru Ciceu<small>Development</small></strong> <strong>Doru</strong> </li> <li> <figure id="eye_dragos_bucevschi">Dragoș</figure> <strong>Dragoș Bucevschi<small>Development</small></strong> <strong>Dragoș</strong> </li> <li> <figure id="eye_erika_lacatus">Erika</figure> <strong>Erika Lăcătuş<small>QA</small></strong> <strong>Erika</strong> </li> <li> <figure id="eye_filip_chereches">Filip</figure> <strong>Filip Cherecheș-Toșa<small>Leadership</small></strong> <strong>Filip</strong> </li> <li> <figure id="eye_gabriel_lacatus">Gabriel</figure> <strong>Gabriel Lăcătuş<small>Development</small></strong> <strong>Gabriel</strong> </li> <li> <figure id="eye_ildiko_soos">Ildikó</figure> <strong>Ildikó Soós<small>Development</small></strong> <strong>Ildikó</strong> </li> <li> <figure id="eye_istvan_takacss">István</figure> <strong>István Takács<small>Development</small></strong> <strong>István</strong> </li> <li> <figure id="eye_jozsi">Jozsi</figure> <strong>József Gergely<small>Development</small></strong> <strong>Jozsi</strong> </li> <li> <figure id="eye_lavinia_mendrea">Lavinia</figure> <strong>Lavinia Mendrea<small>Development</small></strong> <strong>Lavinia</strong> </li> <li> <figure id="eye_levente_horvath">Levente</figure> <strong>Levente Horváth<small>Development</small></strong> <strong>Levente</strong> </li> <li> <figure id="eye_liviu_pogar">Liviu</figure> <strong>Liviu Pogar<small>QA</small></strong> <strong>Liviu</strong> </li> <li> <figure id="eye_marc">Marc</figure> <strong>Marc Abrudan<small>Development</small></strong> <strong>Marc</strong> </li> <li> <figure id="eye_maximilian_marele">Maximilian</figure> <strong>Maximilian Marele<small>Design</small></strong> <strong>Maximilian</strong> </li> <li> <figure id="eye_mihai_potcoava">Mihai</figure> <strong>Mihai Potcoavă<small>Development</small></strong> <strong>Mihai</strong> </li> <li> <figure id="eye_mihai_savu">Mihai</figure> <strong>Mihai Savu<small>Development</small></strong> <strong>Mihai</strong> </li> <li> <figure id="eye_mircea_baicu">Mircea</figure> <strong>Mircea Baicu<small>Development</small></strong> <strong>Mircea</strong> </li> <li> <figure id="eye_mircea_dragoi">Mircea</figure> <strong>Mircea Drăgoi<small>Design</small></strong> <strong>Mircea</strong> </li> <li> <figure id="eye_paul_abrudan">Paul</figure> <strong>Paul Abrudan<small>Development</small></strong> <strong>Paul</strong> </li> <li> <figure id="eye_radu_lucaciu">Radu</figure> <strong>Radu Lucaciu<small>Development</small></strong> <strong>Radu</strong> </li> <li> <figure id="eye_radu_pantea">Radu</figure> <strong>Radu Pantea<small>QA</small></strong> <strong>Radu</strong> </li> <li> <figure id="eye_sebastian_morar">Sebastian</figure> <strong>Sebastian Morar<small>Development</small></strong> <strong>Sebastian</strong> </li> <li> <figure id="eye_stefan_balan">Ștefan</figure> <strong>Ștefan Bălan<small>Design</small></strong> <strong>Ștefan</strong> </li> <li> <figure id="eye_tibor_fazakas">Tibor</figure> <strong>Tibor Fazakas<small>QA</small></strong> <strong>Tibor</strong> </li> <li> <figure id="eye_timi">Timi</figure> <strong>Timi Fagadar<small>Development</small></strong> <strong>Timi</strong> </li> <li> <figure id="eye_tudor_galanopulos">Tudor</figure> <strong>Tudor Galanopulos<small>Development</small></strong> <strong>Tudor</strong> </li> <li> <figure id="eye_victor_stegaru">Victor</figure> <strong>Victor Stegaru<small>Development</small></strong> <strong>Victor</strong> </li> <li> <figure id="eye_viorel_dram">Viorel</figure> <strong>Viorel Dram<small>Development</small></strong> <strong>Viorel</strong> </li> <li> <figure id="eye_zsolt_borbely">Zsolt</figure> <strong>Zsolt Borbely<small>Development</small></strong> <strong>Zsolt</strong> </li> <li> <figure id="eye_you">You?</figure> <strong><a href="http://www.jb51.net/">Join us!</a><small>We have great coffee!</small></strong> <strong>You?</strong> </li> </ul> </div> </div> </body> </html>
以上代码就是基于jquery实现人物头像跟随鼠标转动，希望大家喜欢。
【基于jquery实现人物头像跟随鼠标转动】相关文章：