一款非常乖巧的人物头像跟随鼠标转动效果，在浏览器屏幕内，人物脸庞始终面向鼠标转动。其实现原理即同一张图片上作出人物上下左右不同面向的效果，利用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><p id="wrapper" class="wrapslide1 lateralSlide "><p 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> <,基于jquery实现人物头像跟随鼠标转动,"首先给大家展示下效果图：查看效果源码下载html代码部分：代码如下：<!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" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" /><script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js"></script><script language="javascript" type="text/javascript" src="js/lanrenzhijia.js"></script><title>jquery+css实现横向二级下拉菜单</title></head><body><p id="menu"><ul id="nav"><li class="mainlevel"><span class="note">Chocolate Bar</span></li> <li class="mainlevel" id="mainlevel_01"><a href="#">browsers</a><ul class="sub_nav_01"><span class="Triangle_con"></span><li><a href="#">firefox</a></li><li><a href="#">chrome</a></li><li><a href="#">opera</a></li><li><a href="#">IE</a></li><li><a href="#">Netscape</a></li></ul></li><li class="mainlevel" id="mainlevel_02"><a href="#">html</a><ul class="sub_nav_01"><span class="Triangle_con"></span><li><a href="#">html</a></li><li><a href="#">xhtml</a></li><li><a href="#">html5</a></li><li><a href="#">css</a></li><li><a href="#">TCP/IP</a></li></ul></li> <li class="mainlevel"><a href="#">xml</a><ul class="sub_nav_01"><span class="Triangle_con"></span><li><a href="#">XSL</a></li><li><a href="#">XSLT</a></li><li><a href="#">XSL-FO</a></li><li><a href="#">XPath</a></li><li><a href="#">XQuery</a></li><li><a href="#">XLink</a></li><li><a href="#">XPointer</a></li><li><a href="#">DTD</a></li><li><a href="#">Schema</a></li><li><a href="#">XForms</a></li></ul></li><li class="mainlevel"><a href="#">browsers<em></em>scripting</a><!--input an em tag as a space,IE is gread need--><ul class="sub_nav_01"><span class="Triangle_con"></span><li><a href="#">JavaScript</a></li><li><a href="#">DHTML</a></li><li><a href="#">VBScript</a></li><li><a href="#">AJAX</a></li><li><a href="#">jQuery</a></li><li><a href="#">E4X</a></li><li><a href="#">WMLScript</a></li></ul></li><li class="mainlevel"><a href="#">server<em></em>scripting</a><ul class="sub_nav_01"><span class="Triangle_con"></span><li><a href="#">SQL</a></li><li><a href="#">ASP</a></li><li><a href="#">ADO</a></li><li><a href="#">PHP</a></li></ul></li><li class="mainlevel"><a href="#">dot<em></em>net</a></li> <li class="mainlevel"><a href="#">multimedia</a><ul class="sub_nav_01"><span class="Triangle_con"></span><li><a href="#">Media</a></li><li><a href="#">SMIL</a></li><li><a href="#">SVG</a></li></ul></li></ul></p></body></html>以上代码很简单，jquery+css实现绚丽的横向二级下拉菜单-附源码下载就完成了，希望大家喜欢。
更多相关内容：
