基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)
一款非常乖巧的人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)效果,在瀏覽器屏幕內(nèi),人物臉龐始終面向鼠標(biāo)轉(zhuǎn)動(dòng)。其實(shí)現(xiàn)原理即同一張圖片上作出人物上下左右不同面向的效果,利用JS調(diào)用背景圖片的位置,以此實(shí)現(xiàn)人物“轉(zhuǎn)臉”的jquery特效效果。
先給大家展示效果圖,需要的朋友可以下載源碼
具體實(shí)現(xiàn)過(guò)程不多說(shuō)了,直接給大家貼代碼了。
代碼如下:
<!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實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)效果</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="http://www.dbjr.com.cn/">Join us!</a><small>We have great coffee!</small></strong> <strong class="name">You?</strong> </li> </ul> </div> </div> </body> </html>
以上代碼就是基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng),希望大家喜歡。
- 基于JQuery的一個(gè)簡(jiǎn)單的鼠標(biāo)跟隨提示效果
- jQuery鼠標(biāo)懸浮鏈接彈出跟隨圖片實(shí)例代碼
- jquery實(shí)現(xiàn)背景跟隨鼠標(biāo)滑動(dòng)導(dǎo)航
- jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
- jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法
- jquery實(shí)現(xiàn)的提示浮層跟隨鼠標(biāo)移動(dòng)
- Jquery中國(guó)地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過(guò)彈出提示層信息的簡(jiǎn)單實(shí)例
- jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
相關(guān)文章
20款非常優(yōu)秀的 jQuery 工具提示插件 推薦
工具提示(Tooltip)在網(wǎng)站中的一個(gè)小功能,但卻有很重要的作用,常用于顯示一些溫馨的提示信息。如果網(wǎng)站中的工具提示功能做得非常有創(chuàng)意的話能夠加深用戶(hù)對(duì)網(wǎng)站印象2012-07-07JQuery表格內(nèi)容過(guò)濾的實(shí)現(xiàn)方法
使用JQuery 實(shí)現(xiàn)一個(gè)表格內(nèi)容 過(guò)濾的功能,有需要的朋友可以參考一下,代碼如下:2013-07-07jquery獲取被勾選的checked(選中)的那一行的3列和4列的值
大家可能會(huì)遇到這種需求通過(guò)jquery獲取被勾選的checked的那一行的3列和4列的值,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07深入研究jQuery圖片懶加載 lazyload.js使用方法
這篇文章主要介紹了jQuery圖片懶加載 lazyload.js使用方法,通過(guò)設(shè)置臨界點(diǎn),占位符,設(shè)置事件來(lái)觸發(fā)加載等等來(lái)講解lazyload.js的使用,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08jQuery實(shí)現(xiàn)右鍵菜單、遮罩等效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)右鍵菜單、遮罩、彈出層效果,適應(yīng)管理系統(tǒng)界面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09JQuery彈出炫麗對(duì)話框的同時(shí)讓背景變灰色
這篇文章主要介紹JQuery實(shí)現(xiàn)彈出炫麗對(duì)話框的同時(shí)讓背景變灰色效果,需要的朋友可以參考下2014-05-05jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼,涉及jQuery基于時(shí)間函數(shù)操作頁(yè)面元素樣式變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10jquery中EasyUI實(shí)現(xiàn)同步樹(shù)
本文主要是給大家分享了一則使用EasyUI實(shí)現(xiàn)同步樹(shù)的代碼,主要是使用遞歸實(shí)現(xiàn),非常實(shí)用的方法,推薦給小伙伴們。2015-03-03