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


Posted in Javascript onAugust 23, 2015

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

基于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实现人物头像跟随鼠标转动,希望大家喜欢。

Javascript 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
js分页代码分享
Apr 28 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
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
You might like
php 清除网页病毒的方法
2008/12/05 PHP
php中define用法实例
2015/07/30 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
理解Javascript闭包
2013/11/01 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
2014年纪委工作总结
2014/12/05 职场文书
介绍信怎么写
2015/05/05 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android