jQuery实现图片跟随效果

本文实例为大家分享了jQuery实现图片跟随效果的具体代码，供大家参考，具体内容如下

实现效果

要实现的功能：

* 鼠标进来，显示大图片；
* 鼠标出去，隐藏大图片；
* 鼠标在大图片里边动，大图片跟着动。

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
 body {
  text-align: center;
 }
 #small {
  margin-top: 150px;
 }
 #showBig {
  position: absolute;
  display: none;
 }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<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,
     top: event.pageY + 10
     /*
     * 本来，鼠标是在大的图片的左上角，但是会产生问题：当鼠标从小图片的左上角，向右下角移动的时候
     * 鼠标会先出大图片的区域，被判断为mouseout，大的图片应该被隐藏；
     * 后来又发现下边实际上是小图片的区域，被判定为nouseover，大的图片又显示出来。
     * ---->会使得页面变换过快
     * ==>解决方法：让鼠标放在大的图片外，距离大的图片的左上角有一定的小距离。
     * 在鼠标 从小的图片的左上角 向右下角移动的过程中，就会避免上边的情况发生
     * 因为，只要鼠标还在小图片的范围内，就不会出现大图片遮挡住下一刻 鼠标将要到达位置的小图片事情发生
     */
    });
   }

        });

 });
</script>
</head>
<body>

 <img id="small" src="img/small.jpg" />

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

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery实现图片跟随鼠标的实例

    jquery实现图片跟随鼠标的实例 开发后台写页面困难的一比啊,想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,各种查资料,花了一小天终于搞出来了,代码的记下来,浪费了我这么多时间,记你一辈子,这个可以直接在W3School直接运行,可以根据某行显示某个特定的图片,自己定义就行 实现代码: <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"><

  • jQuery实现磁力图片跟随效果完整示例

    本文实例演示了jQuery实现磁力图片跟随效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jQuery实现图片跟随效果

    jQuery实现图片跟随效果

    本文实例为大家分享了jQuery实现图片跟随效果的具体代码,供大家参考,具体内容如下 实现效果 要实现的功能: * 鼠标进来,显示大图片: * 鼠标出去,隐藏大图片: * 鼠标在大图片里边动,大图片跟着动. 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title he

  • jQuery实现图片走马灯效果的原理分析

    本文实例分析了jQuery实现图片走马灯效果的原理.分享给大家供大家参考,具体如下: 这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;&qu

  • jQuery实现图片切换效果

    本文实例为大家分享了jQuery实现图片切换效果的具体代码,供大家参考,具体内容如下 动画:点击左右按钮实现图片切换 jQuery方法:animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq() 动画效果: <!DOCTYPE html> <html lang="en"> <head>

  • jquery实现图片放大镜效果

    本文实例为大家分享了jquery实现图片放大镜效果的具体代码,供大家参考,具体内容如下 首先是HTML <div id="box"> <div id="big"> <div> <img src="./img/可达鸭.jpg" alt=""> </div> <div id="fd"></div> </div> &l

  • jquery实现图片滚动效果的简单实例

    复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title>jquery 图片自动无缝滚动</title>      

  • jQuery实现鼠标跟随效果

    所谓鼠标跟随,一般就是指鼠标移到哪张图片上,那该张图片的放大图片就会出现,并且放大图片会随着鼠标在该张图片上移动而移动. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } img{ border:none; }

  • 一个基于jquery的图片切换效果

    一个基于jquery的图片切换效果

    下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht

  • 基于jquery自定义图片热区效果

    基于jquery自定义图片热区效果

    现在整理下发出来,希望大家共同学习吧 先看效果图: 用了jquery.image-maps.js这个插件 下载地址 http://www.jb51.net/jiaoben/57930.html原理是: 通过拖动计算出当前热区可移动模块的left top right bottom 对应area的 coords 属性集成上面的位置,就可以实现热区了. 对应的模块代码是: 复制代码 代码如下: <!--模块展示 begin--> <div class="modeShow"&

随机推荐