基于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 08 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 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
php计算当前程序执行时间示例
2014/04/24 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
python简单实现基数排序算法
2015/05/16 Python
python制作websocket服务器实例分享
2016/11/20 Python
用Python设计一个经典小游戏
2017/05/15 Python
python实现单向链表详解
2018/02/08 Python
python中metaclass原理与用法详解
2019/06/25 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
python代码中怎么换行
2020/06/17 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
python给list排序的简单方法
2020/12/10 Python
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
J2EE相关知识面试题
2013/08/26 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
网络教育自我鉴定
2014/02/04 职场文书
供货协议书范本
2014/04/22 职场文书
体育节口号
2014/06/19 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL