基于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 相关文章推荐
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
Ajax实现三级联动效果
Oct 05 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
第三节 定义一个类 [3]
2006/10/09 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
javascript中this关键字详解
2016/12/12 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python二分查找算法的递归实现方法
2016/05/12 Python
pandas分区间,算频率的实例
2019/07/04 Python
python logging模块的使用总结
2019/07/09 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
军人违纪检讨书
2014/02/04 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
中文专业求职信
2014/06/20 职场文书
感恩教育月活动总结
2014/07/07 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
防汛工作情况汇报
2014/10/28 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python
Java 写一个简单的图书管理系统
2022/04/26 Java/Android