「?? 作者：極客小俊」
「?? 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

?

咱們廢話(huà)不多說(shuō)直接上代碼!

準(zhǔn)備工作

首先引入jquery庫(kù)

jquery-1.11.3.min.js"

沒(méi)有這個(gè)jquery庫(kù)的朋友自行到官網(wǎng)下載就可以了!??????

然后再準(zhǔn)備 五張色環(huán)圖片放入到你的demo案例下的img文件夾, ?圖片你也可以用其他類(lèi)似的圖來(lái)代替也是可以的!?????如圖

代碼部分??

css代碼 ??

*{
? ?padding:0px;
? ?margin:0px;
}
body{
? ?background:#000;
}
img{
? ?width:50px;
? ?height:50px;
? ?position:?absolute;
? ?top:0px;
? ?left:0px;
}

jQuery代碼??

$(function(){
? ?var?index=0;
??$(document).mousedown(function(){
? ? ??$(this).bind('mousemove',function(e){
? ? ? ? ??index++;
? ? ? ? ? ?var?X=e.clientX;
? ? ? ? ? ?var?Y=e.clientY;
? ? ? ? ? ?var?num=Math.floor(index/5)%5;
? ? ? ? ? ?console.log(num)
? ? ? ? ??var?$img=$("<img src='img/"+num+".png' ondragstart='return false' style='top:"+(Y-25)+"px;left:"+(X-25)+"px;'/>")
? ? ? ? ??$("body").append($img);
? ? ? ? ??$img.animate({
? ? ? ? ? ? ??'width':0,
? ? ? ? ? ? ??'height':0
? ? ? ? ? },1000,function(){
? ? ? ? ? ? ??$(this).remove();
? ? ? ? ? })
? ? ? ? ?
? ? ? })
? }).mouseup(function(){
? ? ??$(this).unbind("mousemove");
? })
})

最后效果??

如圖

大家的支持就是我堅(jiān)持的動(dòng)力!

如果文章對(duì)你有幫助的話(huà)就請(qǐng)

???點(diǎn)贊???評(píng)論???收藏

一鍵三連哦！

如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個(gè)言指出!

或者你有更好的想法，歡迎一起交流學(xué)習(xí)??????????