jQuery實(shí)現(xiàn)磁力圖片跟隨效果完整示例

更新時(shí)間：2016年09月16日 00:49:48 作者：永遠(yuǎn)愛好寫程序

這篇文章主要介紹了jQuery實(shí)現(xiàn)磁力圖片跟隨效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及animate方法實(shí)現(xiàn)帶緩沖效果的圖片跟隨效果,需要的朋友可以參考下

本文實(shí)例演示了jQuery實(shí)現(xiàn)磁力圖片跟隨效果。分享給大家供大家參考，具體如下：

<!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>
  <title>磁力圖片</title>
  <style type="text/css">
    #imgSel{position:absolute;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $(document).mousemove(function (e) {
        $("#imgSel").animate({"left":e.pageX,"top":e.pageY},0.1);
      });
    });
  </script>
</head>
<body>
  <img id="imgSel" src="../images/select.JPG" />
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery插件ajaxFileUpload實(shí)現(xiàn)異步上傳文件效果
jQuery插件AjaxFileUpload用來(lái)實(shí)現(xiàn)ajax文件上傳，該插件使用非常簡(jiǎn)單，接下來(lái)我們來(lái)看下用AjaxFileUpload插件實(shí)現(xiàn)文件上傳的方法，有需要的小伙伴可以參考下
2015-04-04
jQuery實(shí)現(xiàn)數(shù)字華容道小游戲(實(shí)例代碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)字華容道小游戲功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
jquery實(shí)現(xiàn)兼容IE8的異步上傳文件
這里給大家分享的是使用jQuery插件實(shí)現(xiàn)兼容IE8的異步上傳文件的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。
2015-06-06
jQuery+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家看，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-06-06
jquery操作對(duì)象數(shù)組元素方法詳解
本文介紹了jQuery操作對(duì)象數(shù)組元素的3種方法以及一種錯(cuò)誤方法，這里記錄一下，防止下次再犯，有需要的小伙伴也可以參考下。
2014-11-11
jQuery元素選擇器用法實(shí)例
這篇文章主要介紹了jQuery元素選擇器用法,通過一個(gè)簡(jiǎn)單的隱藏div元素實(shí)例講述了元素選擇器的用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery實(shí)現(xiàn)瀑布流布局
上篇文章我們介紹了使用原生的javascript實(shí)現(xiàn)了圖片瀑布流效果，本文我們來(lái)用jQuery來(lái)實(shí)現(xiàn)同樣的效果。
2014-12-12
Jquery attr()方法屬性賦值和屬性獲取詳解
下面小編就為大家?guī)?lái)一篇Jquery attr()方法屬性賦值和屬性獲取詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04
基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
用JQuery操作DOM確實(shí)很方便，并且JQuery提供了非常人性化的API應(yīng)付我們的各種需求，其中選擇器在此示例-JQuery實(shí)現(xiàn)圖片輪播效果上體現(xiàn)的尤為出色。大大簡(jiǎn)化了js的代碼。
2010-09-09
jquery 將disabled的元素置為enabled的三種方法
在jquery中可以通過jqueryObj.attr("disabled","disabled")將頁(yè)面中某個(gè)元素置為不可編輯或觸發(fā)狀態(tài)，但是在jquery的API reference中并沒說(shuō)明怎么將頁(yè)面置為disable的元素重新置為可觸發(fā)或可編輯的。
2009-07-07