jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法
更新時(shí)間：2015年06月26日 11:53:34 作者：不吃皮蛋
這篇文章主要介紹了jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法,涉及jQuery針對(duì)頁(yè)面位置屬性與鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
(function() {
var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);
$distance.text(distance);
});
})();
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 淺談jQuery頁(yè)面的滾動(dòng)位置scrollTop、scrollLeft
- jQuery中scrollLeft()方法用法實(shí)例
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例
- 用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì)
- 一個(gè)簡(jiǎn)單的jQuery計(jì)算器實(shí)現(xiàn)了連續(xù)計(jì)算功能
- jQuery實(shí)現(xiàn)購(gòu)物車多物品數(shù)量的加減+總價(jià)計(jì)算
- jQuery 計(jì)算iframe 窗口大小的方法
- jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的小程序
- 基于jQuery的計(jì)算文本框字?jǐn)?shù)的代碼
- jQuery居中元素scrollleft計(jì)算方法示例
相關(guān)文章
jquery表單驗(yàn)證插件validation使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery表單驗(yàn)證插件validation使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery表單驗(yàn)證插件formValidator使用方法
這篇文章主要為大家詳細(xì)介紹了Jquery表單驗(yàn)證插件formValidator的相關(guān)使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
jQuery.Validate 使用筆記(jQuery Validation范例 )
學(xué)習(xí)jQuery Validation，于是手寫一公共范例，并收藏以便后用,里面附有測(cè)試代碼，需要的朋友一起來(lái)測(cè)試。2010-06-06
Jquery的基本對(duì)象轉(zhuǎn)換和文檔加載用法實(shí)例
這篇文章主要介紹了Jquery的基本對(duì)象轉(zhuǎn)換和文檔加載用法,實(shí)例分析了Jquery的基本對(duì)象轉(zhuǎn)換及文檔加載使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
Jquery動(dòng)態(tài)進(jìn)行圖片縮略的原理及實(shí)現(xiàn)
圖片縮略在某些情況下還是比較實(shí)用的，比如在做一些商品的預(yù)覽圖縮略等等，下面為大家介紹下具體的實(shí)現(xiàn)思路及代碼，有需求的朋友可以參考下2013-08-08
jquery的優(yōu)點(diǎn)比較多，大家可以學(xué)習(xí)下，網(wǎng)上好多效果都是用jquery實(shí)現(xiàn)的。2009-04-04
jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制折線圖、柱狀圖、餅狀圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
基于jQuery的公告無(wú)限循環(huán)滾動(dòng)實(shí)現(xiàn)代碼
今天看到一個(gè)網(wǎng)站的公告欄一個(gè)小效果，如果有2條公告或以上就有個(gè)滾動(dòng)效果，特整理下分享給大家2012-05-05
使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
用jquery實(shí)現(xiàn)的對(duì)checkbox和radio控件的美化，非常不錯(cuò)，大家可以通過(guò)修改圖片來(lái)實(shí)現(xiàn)更漂亮的效果。2010-11-11
JQuery UI有著非常豐富的皮膚，JQuery官方提供的就有十幾套，除了官方提供的之外，JQuery還提供了定制皮膚的服務(wù)2009-07-07