<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

            width: 390px;

            height: 220px;

        }

        ul li {

            width: 390px;

            height: 220px;

            border: 1px solid orange;

        }

        ul li img {

            width: 384px;

            height: 214px;

        }

        .opacity_li {

            opacity: 0.5;

        }

        div img {

            width: 608px;

            height: 424px;

        }

    </style>

    <script src="js/jquery-1.11.3.min.js"></script>

    <script>

        $(function() {

            $("ul li").hover(function() {

                // over

                //鼠标移入当前列透明度为1 其他列为0.5

                //$(this).css("opaacity", "1").siblings("li").addClass("opacity_li");

                var $imgsrc = $(this).find("img").attr("src");

                var $div = "<div><img src='" + $imgsrc + "'/></div>";

                $("body").append($div);

                $("div img").attr("src", $imgsrc);

            }, function() {

                // out

                //鼠标移出的时候把其他列透明度去掉

                //$(this).siblings().removeClass("opacity_li");

                $("div").remove();

            }).mousemove(function(e) {

                $("div").css({

                    position: "absolute",

                    left: e.pageX + 10,

                    top: e.pageY + 10

                }); //设置div绝对定位 坐标就是距离鼠标当前的位置

            });;

        })

    </script>

</head>

<body>

    <ul>

        <li>

            <img src="data:images/问奈何.png" alt="" />

        </li>

        <li>

            <img src="data:images/夏承凛.png" alt="" />

        </li>

        <li>

            <img src="data:images/怀璧明罪问奈何.png" alt="" />

        </li>

    </ul>

</body>

</html>

jQuery 鼠标移入图片 显示大图并跟随鼠标移动的更多相关文章

  1. JQuery - 点击图片显示大图

    效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  2. jQuery-鼠标经过显示大图并跟随鼠标效果方法封装

    //copyright c by zhangxinxu 2019-1-15 /*由于大图绑定在href属性中,故一般而言,需使用a标签的href指向大图.仅支持png,gif,jpg,bmp四种格式的 ...

  3. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  4. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  5. checkbox下面的提示框 鼠标移入时显示，移出时隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

  7. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. selenium 怎么查找定位鼠标移上去显示，移开鼠标就消失的内容

    场景:鼠标移动到一级菜单上二级菜单才显示,移开鼠标二级菜单就消失,如何查找定位二级菜单 操作: 1.打开F12,点击sources 2.鼠标移动到一级菜单“工单管理” 3.按下键盘“Ctrl+\”,暂 ...

  9. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

随机推荐

  1. Leetcode504.Base 7七进制数

    给定一个整数,将其转化为7进制,并以字符串形式输出. 示例 1: 输入: 100 输出: "202" 示例 2: 输入: -7 输出: "-10" 注意: 输入 ...

  2. Redis源码解析：28集群(四)手动故障转移、从节点迁移

    一:手动故障转移 Redis集群支持手动故障转移.也就是向从节点发送"CLUSTER  FAILOVER"命令,使其在主节点未下线的情况下,发起故障转移流程,升级为新的主节点,而原 ...

  3. Ionic JPush极光推送 插件实例

    1.需要去这里注册https://www.jiguang.cn 注册成功获取AppKey 备注填写应用包名规范点,在项目还要用那 2.创建ionic 项目 指定你注册时候的包名(假如:com.ioni ...

  4. WPF 从属性赋值到MVVM模式详解

    示例源码 这两天学习了一下MVVM模式,和大家分享一下,也作为自己的学习笔记.这里不定义MVVM的概念,不用苍白的文字说它的好处,而是从简单的赋值讲起,一步步建立一个MVVM模式的Simple.通过前 ...

  5. jQ-点击查看更多

    <style type="text/css"> .hi { width: 200px; height: 18vw; background-color: pink; fo ...

  6. 使用junit单元测试，报Cannot instantiate test(s): java.lang.SecurityException: Prohibited package name: java.com.com.test

    在测试类中不能一级包名不能以java开头, 将包改为com.com.test就好了.

  7. Centos无法连接无线网络解决办法

    系统->管理->服务器设置->服务,将NetworkManager选项勾选,点击重启服务.然后就可以看到右上角已经有了网络连接.

  8. node的源码安装

    Node.js 安装配置 本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法. 本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例. No ...

  9. Scrollerview与listview或者gridview发生冲突

    滑动冲突说实在的就是子view的滑动事件与父view的滑动事件的监听都在同时触发,而导致的activity的点击事件或者布局出问题 常见的就有Scrollerview与Scrollerview与lis ...

  10. git pull 提示错误,Your local changes to the following files would be overwritten by merge

    error: Your local changes to the following files would be overwritten by merge: Please commit your c ...