<!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. springcloud：Eureka的使用

    1.认识Eureka 服务的管理. 问题分析 在刚才的案例中,itcast-service-provider对外提供服务,需要对外暴露自己的地址.而consumer(调用者)需要记录服务提供者的地址. ...

  2. 如何在vue项目中使用md5.js及base64.js

    一.在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二.在项目文件中引入 import md5 from 'js-md ...

  3. leetcode 352 & leetcode 239 & leetcode 295 & leetcode 53 & leetcode 209

    lc352 Data Stream as Disjoint Intervals 可以用treemap解 key保存interval的start,value保存interval的end.分别找出当前va ...

  4. Javascript-简单的欢迎cookie

    0<!DOCT0000YPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  5. 阿里云应用高可用服务 AHAS 流控降级实现 SQL 自动防护功能

    在影响系统稳定性的各种因素中,慢 SQL 是相对比较致命的,可能会导致 CPU.LOAD 异常.系统资源耗尽.线上生产环境出现慢 SQL 往往有很多原因: 硬件问题.如网络速度慢,内存不足,I/O 吞 ...

  6. 洛谷P4022 熟悉的文章

    题意:给定一个串集合s,每次给定一个串t,询问一个最大的L,使得存在一种划分能把t划分成若干个子串, 其中好的子串总长不小于0.9|t|.好的子串定义为长度不小于L且是s中某一个串的子串. 解:发现这 ...

  7. Node.js Error: Cannot find module express的解决办法（转载）

    1.全局安装express框架,cmd打开命令行,输入如下命令: npm install -g express express 4.x版本中将命令工具分出来,安装一个命令工具,执行命令: npm in ...

  8. 弹性盒布局（flex）

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  9. jsp页面el表达式<c:choose> <c:when的用法

    等于 是if else <c:choose> <c:when test="${paginationModel.py_province != ''}"> 如果 ...

  10. 使用neo4j-import导入数据及关系

    背景 上节我们了解了什么是图数据库,作为研究对象的neo4j的特点,优缺点以及基本的环境搭建. 现在我们要讲存储在csv中的通话记录数据导入到neo4j中去,并且可以通过cql去查询导入的数据及关系 ...