首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
深入理解vue路由的使用
Mar 24 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 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
cv2(1) 面向接口(1) OpenGL(1) seata(1) Android Studio(4) OpenAI baselines(1) Flask Web(1) nacos(1) exec(1) MyBatis(5)
You might like
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Django开发的简易留言板案例详解
2018/12/04 Python
详解Python正则表达式re模块
2019/03/19 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python 导入文件过程图解
2019/10/15 Python
python opencv实现图片缺陷检测（讲解直方图以及相关系数对比法）
2020/04/07 Python
Flask处理Web表单的实现方法
2021/01/31 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
英国最专业的健身器材供应商之一：Best Gym Equipment
2017/12/22 全球购物
瑞典多品牌连锁店：Johnells
2021/01/13 全球购物
教师自我鉴定范文
2013/11/10 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
施工安全保证书
2015/05/09 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript