jQuery绑定图片做到鼠标跟随

需求：在CSS封装的img图片范围内，让鼠标后方有图像跟着显示。
显示效果：

head里的Javascript代码：

<script type="text/javascript">$(function(){$("#small").bind("mouseover mouseout mousemove",function (event){if(event.type == "mouseover"){$("#showBig").show();}else if (event.type == "mouseout"){$("#showBig").hide();}else if (event.type == "mousemove"){console.log(event);$("#showBig").offset({left:event.pageX +10, //不加10会和上面的mouseout发生冲突，显示闪烁top:event.pageY + 10});}})});
</script>

body代码：

<body><img id="small" src="img/small.jpg" /><div id="showBig"><img src="img/big.jpg"></div></body>

使用了jQuery里的$(“#id”)索引元素标签ID，同时采用bind方法对多个事件进行事件绑定。event属性里含有多个字段能够进行操作，使用event.type进行事件状态判断，再通过offset方法对属性pageX和pageY对图片显示的位置进行操作。

jQuery绑定图片做到鼠标跟随相关推荐

html怎么给图片加鼠标滑过效果,jquery给图片添加鼠标经过时的边框效果
一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可错误代码如下:注意红色部分设置 (出发点 ...
jQuery实现图片跟着鼠标移动的效果
例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
jQuery 绑定3种鼠标事件 click(鼠标点击)，mouseover(鼠标移入)，mouseout(鼠标移开)
1 click() 说明:鼠标点击时触发click事件. 语法: $(selector).click(function1); 实例: 文本框绑定click事件. $(function(){$(&quo ...
unity鼠标跟随（ITween）
今天记录一下ITween的抛物线移动用法. 案例有两个: 1.一个白色图片的鼠标跟随 2.点击地面会有小球生成并移动到点击的地方. 案例1鼠标跟随: 首先在场景中建立一个cube用来当做地面 (因为这 ...
jQuery鼠标跟随事件
今天来看一下鼠标跟随时间,图片随着鼠标的移动而移动大概思路: 导入一张图片,默认是不跟随的,点击图片后跟随,给图片添加点击事件编写鼠标移动事件实现图片跟随鼠标移动得到鼠标的坐标值注意:所有页面 ...
鼠标跟随事件jQuery
穿透石头的水滴,它的力量来源于日积月累. 上一篇博客介绍了jQuery事件,今天用jQuery事件编写一个小案例希望对有需要的小伙伴有所帮助. 鼠标跟随时间图片随着鼠标的移动而移动 <!DO ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
jquery版相片墙（鼠标控制图片聚合和散开）
jquery版相片墙(鼠标控制图片聚合和散开) 原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一 ...
jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...

jQuery绑定图片做到鼠标跟随

jQuery绑定图片做到鼠标跟随相关推荐

最新文章

热门文章