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


Posted in Javascript onSeptember 17, 2010

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方法

源码打包下载

Javascript 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
js下用eval生成JSON对象
Sep 17 #Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 #Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 #Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 #Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 #Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 #Javascript
You might like
如何给phpadmin一个保护
2006/10/09 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
javascript 禁止复制网页
2009/06/11 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
Python3安装Scrapy的方法步骤
2017/11/23 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python 实现按对象传值
2019/12/26 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
结对共建协议书
2014/08/20 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
php修改word的实例方法
2021/11/17 PHP