基于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代码
Aug 09 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
详解javascript replace高级用法
Feb 17 Javascript
vue实现搜索过滤效果
May 28 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
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
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
vue组件开发props验证的实现
2019/02/12 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python如何写try语句
2020/07/14 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
港湾网络笔试题
2014/04/19 面试题
银行竞聘演讲稿范文
2014/04/23 职场文书
班委竞选演讲稿
2014/04/28 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2016小学新学期寄语
2015/12/04 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Django框架中视图的用法
2022/06/10 Python
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers