JS实现鼠标滑过图片的抖动效果
在上网时候发现了这个效果（效果演示地址：http://www.baidu.com/search/baike/usertask/mingmantianxia/）.
在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。
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/ 路径.所以此页面的完整路径就被找出来了，为:http://www.baidu.com/search/baike/usertask/mingmantianxia/widget/awards.html
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;
}
JS实现鼠标滑过图片的抖动效果相关推荐
- html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
- html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果
本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果. 在我们的demo中,图片在鼠标滑过的时候被折叠,空出来的部分将显示图片的一些信息.我们将创建一个放置图 ...
- html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片.同时你也可以在此基础上扩展它,比如给图片加投影和边 ...
- 鼠标移至图片后抖动的JS代码
代码简介: 仿QQ的窗口抖动特效,鼠标移到到图片上面,图片就开始疯狂的抖动,好像对你的鼠标过敏一样,比较有意思,有会你的网页增加了修改功能. 代码内容: View Code <html>& ...
- 鼠标滑过图片，图片抖动
鼠标滑过图片,图片抖动 2021.9.22 1.html代码 <!DOCTYPE html> <html><head><meta charset=" ...
- JS鼠标滑过图片时切换图片
http://www.aichengxu.com/article/Javascript/277_7.html 在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里豆芽说说这 ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
最新文章
- 不小心执行了 rm -f，先别急着跑路
- mysql 并行 更新_MySQL 并行复制(MTS) 从库更新的记录不存在实际却存在
- [LeetCode] Invert Binary Tree - 二叉树翻转系列问题
- JQuery之基本操作
- Module build failed: Error: Couldn't find preset react relative to directory
- linux内核之同步
- Milvus 在 AVX-512 与 AVX2 的性能对比
- 基于SSH的新闻发布系统
- c语言程序经过链接以后生成的文件名的后缀为,请多多指教,感激不尽11.C语言程序经过编译以后生成的文件名的后缀为（ ）.A．.c B．.obj C．.exe D．....
- AppStore上架过程记录(四)--完结
- 高通平台开发系列讲解（AI篇）如何让yolov5运行在SNPE
- easyui中datagrid表格如何正确显示和隐藏
- 【图解】PCB快速制板，热转印机+腐蚀槽
- 【HTML源码--一】：登录+蛋糕+照片+烟花；生日快乐、新年快乐、表白等
- 专业实践记录IIII: 端到端跨语言音色迁移语音合成论文 - 三步走
- java怎么算数_JAVA初学者——算数运算符
- OrCAD Capture CIS 原理图绘制时Place Power（放置电源符号）中各个符号的区别
- python爬取企业名录
- unity 完全弹性碰撞
- C++书籍推荐（小白变大牛最全书单）