基于jquery的仿百度的鼠标移入图片抖动效果

所属分类: 网络编程 / JavaScript 阅读数: 1031
收藏 0 赞 0 分享
1。查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息。这样就断定代码在另一个页面中。于是想当然的以为是用的框架连接的地址。结果没查到,却看到了一个这样的信息:
复制代码 代码如下:

<div id ="task-intro-box"><!--活动说明--></div>
<div id ="task-awards"><!--活动奖励--></div>
<div id ="task-rule"><!--活动规则--></div>

可以看到此页面是用task-awards为ID的div当容器的,所以,单击页面上的JS文件,查找task-awards

  2。终于皇天不负有心人,在base.js中查到了这段代码,可以看到被映射到了awards.html地址,加之下面的widget/ 路径.所以此页面的完整路径就被找出来了
复制代码 代码如下:

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 页面的源文件.可以看到这段图片效果的调用
复制代码 代码如下:

$("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;});//阻止被点击
})
$("ul.awards li").hover(function(){this.className="hover"}).mouseout(function(){this.className=""});

4.然后我们只要查找JumpObj这个js方法的代码就可以啦.同样在base.js中查到了此方法:   
复制代码 代码如下:

function JumpObj(elem, range, startFunc, endFunc) {
//图片鼠标移上去的动画效果,感谢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。这样就大工告成啦. 以后再使用的时候,按下列步骤就可以了
  <1>导入jquery 包,和base.js文件(存放JumpObj方法)
  <2>在页面加载的时候注册鼠标移入事件,调用JumpObj方法

源码打包下载
更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多