一款非常乖巧的人物头像跟随鼠标转动效果，在浏览器屏幕内，人物脸庞始终面向鼠标转动。其实现原理即同一张图片上作出人物上下左右不同面向的效果，利用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 type="text/css" href="https://www.jb51.net/css/jiaobenzhijia.css" media="screen"> <link type="text/css" href="https://www.jb51.net/css/team.css" media="screen"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/lateral-eye.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquerytools.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.jkey-1.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.scrollTo-1.4.2-min.js"></script> </head> <body> <div> <div> <h1>A passionate team</h1> <ul> <li> <figure>Andor</figure> <strong>Andor Baranyi<small>Development</small></strong> <strong>Andor</strong> </li> <li> <figure>Angela</figure> <strong>Angela Borșan<small>Finance</small></strong> <strong>Angela</strong> </li> <li> <figure>Attila</figure> <strong>Attila Szász<small>Development</small></strong> <strong>Attila</strong> </li> <li> <figure>Bogdan</figure> <strong>Bogdan Haifa<small>Development</small></strong> <strong>Bogdan</strong> </li> <li> <figure>Bogdan</figure> <strong>Bogdan Sala<small>Development</small></strong> <strong>Bogdan</strong> </li> <li> <figure>Bogdan</figure> <strong>Bogdan Stănescu<small>Development</small></strong> <strong>Bogdan</strong> </li> <li> <figure>Bogus</figure> <strong>Bogus<small>Special Projects</small></strong> <strong>Bogus</strong> </li> <li> <figure>Botond</figure> <strong>Botond Raduly<small>Development</small></strong> <strong>Botond</strong> </li> <li> <figure>Călin</figure> <strong>Călin Tritean<small>Development</small></strong> <strong>Călin</strong> </li> <li> <figure>Ciprian</figure> <strong>Ciprian Herman<small>Development</small></strong> <strong>Ciprian</strong> </li> <li> <figure>Ciprian</figure> <strong>Ciprian Morar<small>Leadership</small></strong> <strong>Ciprian</strong> </li> <!-- <li> <figure>Cristian</figure> <strong>Cristian Ban<small>Development</small></strong> <strong>Cristian</strong> </li> --> <!-- <li> <figure>Cristian</figure> <strong>Cristian Buda<small>Development</small></strong> <strong>Cristian</strong> </li> --> <li> <figure>Cristian</figure> <strong>Cristian Cojiță<small>Development</small></strong> <strong>Cristian</strong> </li> <li> <figure>Cristian</figure> <strong>Cristian Mesaros<small>Development</small></strong> <strong>Cristian</strong> </li> <li> <figure>Cristian</figure> <strong>Cristian Zdrobe<small>Development</small></strong> <strong>Cristian</strong> </li> <li> <figure>Cristina</figure> <strong>Cristina Moldovan<small>QA</small></strong> <strong>Cristina</strong> </li> <li> <figure>Csaba</figure> <strong>Csaba Tekse<small>Development</small></strong> <strong>Csaba</strong> </li> <!-- <li> <figure>Daniel</figure> <strong>Daniel Cosman<small>QA</small></strong> <strong>Daniel</strong> </li> --> <!-- <li> <figure>Daniel</figure> <strong>Daniel Zaremba<small>Development</small></strong> <strong>Daniel</strong> </li> --> <!-- <li> <figure>Daria</figure> <strong>Daria Nadina Petru<small>Management</small></strong> <strong>Daria</strong> </li> --> <li> <figure>Doru</figure> <strong>Doru Ciceu<small>Development</small></strong> <strong>Doru</strong> </li> <li> <figure>Dragoș</figure> <strong>Dragoș Bucevschi<small>Development</small></strong> <strong>Dragoș</strong> </li> <li> <figure>Erika</figure> <strong>Erika Lăcătuş<small>QA</small></strong> <strong>Erika</strong> </li> <li> <figure>Filip</figure> <strong>Filip Cherecheș-Toșa<small>Leadership</small></strong> <strong>Filip</strong> </li> <li> <figure>Gabriel</figure> <strong>Gabriel Lăcătuş<small>Development</small></strong> <strong>Gabriel</strong> </li> <li> <figure>Ildikó</figure> <strong>Ildikó Soós<small>Development</small></strong> <strong>Ildikó</strong> </li> <li> <figure>István</figure> <strong>István Takács<small>Development</small></strong> <strong>István</strong> </li> <li> <figure>Jozsi</figure> <strong>József Gergely<small>Development</small></strong> <strong>Jozsi</strong> </li> <li> <figure>Lavinia</figure> <strong>Lavinia Mendrea<small>Development</small></strong> <strong>Lavinia</strong> </li> <li> <figure>Levente</figure> <strong>Levente Horváth<small>Development</small></strong> <strong>Levente</strong> </li> <li> <figure>Liviu</figure> <strong>Liviu Pogar<small>QA</small></strong> <strong>Liviu</strong> </li> <li> <figure>Marc</figure> <strong>Marc Abrudan<small>Development</small></strong> <strong>Marc</strong> </li> <li> <figure>Maximilian</figure> <strong>Maximilian Marele<small>Design</small></strong> <strong>Maximilian</strong> </li> <li> <figure>Mihai</figure> <strong>Mihai Potcoavă<small>Development</small></strong> <strong>Mihai</strong> </li> <li> <figure>Mihai</figure> <strong>Mihai Savu<small>Development</small></strong> <strong>Mihai</strong> </li> <li> <figure>Mircea</figure> <strong>Mircea Baicu<small>Development</small></strong> <strong>Mircea</strong> </li> <li> <figure>Mircea</figure> <strong>Mircea Drăgoi<small>Design</small></strong> <strong>Mircea</strong> </li> <li> <figure>Paul</figure> <strong>Paul Abrudan<small>Development</small></strong> <strong>Paul</strong> </li> <li> <figure>Radu</figure> <strong>Radu Lucaciu<small>Development</small></strong> <strong>Radu</strong> </li> <li> <figure>Radu</figure> <strong>Radu Pantea<small>QA</small></strong> <strong>Radu</strong> </li> <li> <figure>Sebastian</figure> <strong>Sebastian Morar<small>Development</small></strong> <strong>Sebastian</strong> </li> <li> <figure>Ștefan</figure> <strong>Ștefan Bălan<small>Design</small></strong> <strong>Ștefan</strong> </li> <li> <figure>Tibor</figure> <strong>Tibor Fazakas<small>QA</small></strong> <strong>Tibor</strong> </li> <li> <figure>Timi</figure> <strong>Timi Fagadar<small>Development</small></strong> <strong>Timi</strong> </li> <li> <figure>Tudor</figure> <strong>Tudor Galanopulos<small>Development</small></strong> <strong>Tudor</strong> </li> <li> <figure>Victor</figure> <strong>Victor Stegaru<small>Development</small></strong> <strong>Victor</strong> </li> <li> <figure>Viorel</figure> <strong>Viorel Dram<small>Development</small></strong> <strong>Viorel</strong> </li> <li> <figure>Zsolt</figure> <strong>Zsolt Borbely<small>Development</small></strong> <strong>Zsolt</strong> </li> <li> <figure>You?</figure> <strong><a href="https://www.jb51.net/">Join us!</a><small>We have great coffee!</small></strong> <strong>You?</strong> </li> </ul> </div> </div> </body> </html>
以上代码就是基于jquery实现人物头像跟随鼠标转动，希望大家喜欢。
您可能感兴趣的文章: