基于jquery实现人物头像跟随鼠标转动_jquery
一款非常乖巧的人物头像跟随鼠标转动效果，在浏览器屏幕内，人物脸庞始终面向鼠标转动。其实现原理即同一张图片上作出人物上下左右不同面向的效果，利用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>
<div id="wrapper" class="wrapslide1 lateralSlide ">
<div class="container">
<h1 id="A-passionate-team">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="http://www.jb51.net/">Join us!</a><small>We have great coffee!</small></strong> <strong class="name">You?</strong> </li>
</ul>
</div>
</div>
</body>
</html>登录后复制
以上代码就是基于jquery实现人物头像跟随鼠标转动，希望大家喜欢。
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案
3 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前
By DDD
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
1 个月前
By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前
By DDD
<🎜>：死铁路 - 如何完成所有挑战
3 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
如何实现视差滚动和元素动画效果，像资生堂官网那样？
或者：
怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？
Apr 04, 2025 pm 05:36 PM
实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
JavaScript难以学习吗？
Apr 03, 2025 am 12:20 AM
学习JavaScript不难，但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程，通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误，使用调试技巧。5)优化性能，遵循最佳实践。
前端开发中如何实现类似 VSCode 的面板拖拽调整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中，如何实现类似于VSCode...
