基于jquery的仿百度的鼠標(biāo)移入圖片抖動(dòng)效果
更新時(shí)間:2010年09月17日 08:55:12 作者:
在鼠標(biāo)放到圖片上, 圖片會(huì)有個(gè)上下抖動(dòng)的特效。很喜歡這種感覺(jué)。在于是摸索了一下,下面是一些步驟。
1。查看源文件,在查看后很納悶的發(fā)現(xiàn),此頁(yè)并沒(méi)有包含那些獎(jiǎng)品信息。這樣就斷定代碼在另一個(gè)頁(yè)面中。于是想當(dāng)然的以為是用的框架連接的地址。結(jié)果沒(méi)查到,卻看到了一個(gè)這樣的信息:
<div id ="task-intro-box"><!--活動(dòng)說(shuō)明--></div>
<div id ="task-awards"><!--活動(dòng)獎(jiǎng)勵(lì)--></div>
<div id ="task-rule"><!--活動(dòng)規(guī)則--></div>
可以看到此頁(yè)面是用task-awards為ID的div當(dāng)容器的,所以,單擊頁(yè)面上的JS文件,查找task-awards
2。終于皇天不負(fù)有心人,在base.js中查到了這段代碼,可以看到被映射到了awards.html地址,加之下面的widget/ 路徑.所以此頁(yè)面的完整路徑就被找出來(lái)了
function getWidgets(){
var modules = {
"task-intro-box":"intro.html"
,"task-awards":"awards.html"
,"task-gongao":"gongao.html"
,"task-rule":"rule.html"
,"faq":"faq.html"
,"task-gongao":"gongao.html"
};
$.each(modules,function(key,val){
if(G(key) ){
$.get("widget/"+val ,function(data){
$(data).appendTo($("#"+key));
});
}
});
}
3。查看awards.html 頁(yè)面的源文件.可以看到這段圖片效果的調(diào)用
$("ul.awards img").each(function(k,img){
new JumpObj(img,10);
$(img).hover(function(){this.parentNode.parentNode.className="hover"});
$(img.parentNode).click(function(){return false;});//阻止被點(diǎn)擊
})
$("ul.awards li").hover(function(){this.className="hover"}).mouseout(function(){this.className=""});
4.然后我們只要查找JumpObj這個(gè)js方法的代碼就可以啦.同樣在base.js中查到了此方法:
function JumpObj(elem, range, startFunc, endFunc) {
//圖片鼠標(biāo)移上去的動(dòng)畫效果,感謝aoao的支持
var curMax = range = range || 6;
startFunc = startFunc || function(){};
endFunc = endFunc || function(){};
var drct = 0;
var step = 1;
init();
function init() { elem.style.position = 'relative';active() }
function active() { elem.onmouseover = function(e) {if(!drct)jump()} }
function deactive() { elem.onmouseover = null }
function jump() {
var t = parseInt(elem.style.top);
if (!drct) motionStart();
else {
var nextTop = t - step * drct;
if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';
else if(nextTop < -curMax) drct = -1;
else {
var nextMax = curMax / 2;
if (nextMax < 1) {motionOver();return;}
curMax = nextMax;
drct = 1;
}
}
setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);
}
function motionStart() {
startFunc.apply(this);
elem.style.top='0';
drct = 1;
}
function motionOver() {
endFunc.apply(this);
curMax = range;
drct = 0;
elem.style.top = '0';
}
this.jump = jump;
this.active = active;
this.deactive = deactive;
}
5。這樣就大工告成啦. 以后再使用的時(shí)候,按下列步驟就可以了
<1>導(dǎo)入jquery 包,和base.js文件(存放JumpObj方法)
<2>在頁(yè)面加載的時(shí)候注冊(cè)鼠標(biāo)移入事件,調(diào)用JumpObj方法
源碼打包下載
復(fù)制代碼 代碼如下:
<div id ="task-intro-box"><!--活動(dòng)說(shuō)明--></div>
<div id ="task-awards"><!--活動(dòng)獎(jiǎng)勵(lì)--></div>
<div id ="task-rule"><!--活動(dòng)規(guī)則--></div>
可以看到此頁(yè)面是用task-awards為ID的div當(dāng)容器的,所以,單擊頁(yè)面上的JS文件,查找task-awards
2。終于皇天不負(fù)有心人,在base.js中查到了這段代碼,可以看到被映射到了awards.html地址,加之下面的widget/ 路徑.所以此頁(yè)面的完整路徑就被找出來(lái)了
復(fù)制代碼 代碼如下:
function getWidgets(){
var modules = {
"task-intro-box":"intro.html"
,"task-awards":"awards.html"
,"task-gongao":"gongao.html"
,"task-rule":"rule.html"
,"faq":"faq.html"
,"task-gongao":"gongao.html"
};
$.each(modules,function(key,val){
if(G(key) ){
$.get("widget/"+val ,function(data){
$(data).appendTo($("#"+key));
});
}
});
}
3。查看awards.html 頁(yè)面的源文件.可以看到這段圖片效果的調(diào)用
復(fù)制代碼 代碼如下:
$("ul.awards img").each(function(k,img){
new JumpObj(img,10);
$(img).hover(function(){this.parentNode.parentNode.className="hover"});
$(img.parentNode).click(function(){return false;});//阻止被點(diǎn)擊
})
$("ul.awards li").hover(function(){this.className="hover"}).mouseout(function(){this.className=""});
4.然后我們只要查找JumpObj這個(gè)js方法的代碼就可以啦.同樣在base.js中查到了此方法:
復(fù)制代碼 代碼如下:
function JumpObj(elem, range, startFunc, endFunc) {
//圖片鼠標(biāo)移上去的動(dòng)畫效果,感謝aoao的支持
var curMax = range = range || 6;
startFunc = startFunc || function(){};
endFunc = endFunc || function(){};
var drct = 0;
var step = 1;
init();
function init() { elem.style.position = 'relative';active() }
function active() { elem.onmouseover = function(e) {if(!drct)jump()} }
function deactive() { elem.onmouseover = null }
function jump() {
var t = parseInt(elem.style.top);
if (!drct) motionStart();
else {
var nextTop = t - step * drct;
if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';
else if(nextTop < -curMax) drct = -1;
else {
var nextMax = curMax / 2;
if (nextMax < 1) {motionOver();return;}
curMax = nextMax;
drct = 1;
}
}
setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);
}
function motionStart() {
startFunc.apply(this);
elem.style.top='0';
drct = 1;
}
function motionOver() {
endFunc.apply(this);
curMax = range;
drct = 0;
elem.style.top = '0';
}
this.jump = jump;
this.active = active;
this.deactive = deactive;
}
5。這樣就大工告成啦. 以后再使用的時(shí)候,按下列步驟就可以了
<1>導(dǎo)入jquery 包,和base.js文件(存放JumpObj方法)
<2>在頁(yè)面加載的時(shí)候注冊(cè)鼠標(biāo)移入事件,調(diào)用JumpObj方法
源碼打包下載
相關(guān)文章
jQuery獲取某天的農(nóng)歷日期并判斷是否除夕或新年的方法
這篇文章主要介紹了jQuery獲取某天的農(nóng)歷日期并判斷是否除夕或新年的方法,涉及jQuery針對(duì)日期與時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下2016-03-03jQuery實(shí)現(xiàn)密?;コ鈫?wèn)題解決方案
密保通常都會(huì)有n個(gè)問(wèn)題,讓用戶選擇其中2、3個(gè),而且都不會(huì)讓用戶選擇重復(fù)的問(wèn)題。這就要求密?;コ猓唧w實(shí)現(xiàn)如下,有此需求的朋友可以參考下2013-08-08jQuery過(guò)濾選擇器經(jīng)典應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery過(guò)濾選擇器經(jīng)典應(yīng)用,具有一定的實(shí)用性,感興趣的小伙伴們可以參考一下2016-08-08使用jquery+CSS3實(shí)現(xiàn)仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效
本文是基于jquery和css3實(shí)現(xiàn)的仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效,代碼超簡(jiǎn)單,感興趣的朋友一起看看吧2015-09-09jquery.tableSort.js表格排序插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery.tableSort.js表格排序插件使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jquery實(shí)現(xiàn)手風(fēng)琴展開(kāi)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)手風(fēng)琴展開(kāi)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07