首页
所有分类
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 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
Oct 24 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
javaScript实现一个队列的方法
Jul 14 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
Hash(1) 入门基础(1) 虚拟机(3) 触发器(3) Geospatial(1) Vmware(3) html5+(1) RabbitMQ(3) 数据类型(8) XML(1)
You might like
建站常用13种PHP开源CMS比较
2009/08/23 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php微信开发之图片回复功能
2018/06/14 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
Jquery性能优化详解
2014/05/15 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
教大家轻松制作Bootstrap漂亮表格（table）
2016/12/13 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
[02:14]完美“圣”典2016风云人物：xiao8专访
2016/12/01 DOTA
Python 专题五 列表基础知识（二维list排序、获取下标和处理txt文本实例）
2017/03/20 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python3多线程操作简单示例
2018/05/22 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python中altair可视化库实例用法
2021/01/26 Python
团支书的期末学习总结自我评价
2013/11/01 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
国旗下演讲稿
2014/05/08 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
审美与表现自我评价
2015/03/09 职场文书
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技