<!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. KMP模板题 Number Sequence HDU1711

    模板...嗯 #include <iostream> #include <cstdio> #include <string.h> #pragma warning ( ...

  2. Luogu P1948 [USACO08JAN]电话线Telephone Lines(最短路+dp)

    P1948 [USACO08JAN]电话线Telephone Lines 题意 题目描述 Farmer John wants to set up a telephone line at his far ...

  3. Laravel 日志权限问题

    laravel发现日志写入不了, 因为此日志是定时任务生成的, 定时任务的执行用户时root 解决方法: 方法1.修改执行定时任务的用户, 不过www用户时无法登陆的, 可能有点麻烦 方法2.修改la ...

  4. poj1961

    poj1961主要是考察对next数组的理解,abaabaabaaba abaabaabaabaabaaba错开的部分便是循环节 7月29日更 如果n%(n-kmp[k])==0,那么n-kmp[k] ...

  5. 建筑设计类软件整理ACDSee,PS,CAD,Ecotect,SketchUp,Phoenics,Revit,Rhino,

    关于建筑设计类软件整理 1 建筑设计类专业最常用软件如下,包括SU,CAD, REVIT,PS等. 2 sketch up 简称SU,中文名草图大师,在推敲方案,拉推体块时有着不可或缺的作用,而且随着 ...

  6. 读书笔记--Apache.Tomcat.6高级编程 目录

    1.Apache Tomcat 2.web的应用:Servlet.JSP及其他 3.Tomcat安装 4.Tomcat架构 5.Tomcat基本配置 6.高级Tomcat特性 7.Web应用程序配置 ...

  7. 基础架构：一条SQL查询语句是如何执行的？

    https://time.geekbang.org/column/article/68319?code=pEYaxHnjO23LQHW4CJgL706EXlpAJnbOOiT2y42cWwU%3D 这 ...

  8. JS中的$符号

    1. 首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asdasd'; 2. 在正则表达式中,它可以匹配结尾 /sa$/.test(string) 匹配string字符串 ...

  9. MySQL数据库的全局锁和表锁

    1.概念 数据库锁设计的初衷是处理并发问题.作为多用户共享的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则.而锁就是用来实现这些访问规则的重要数据结构. 2.锁的分类 根据加锁的范围, ...

  10. 创建动态MSSQL数据库表的方法

    代码如下: ImportsSystem.Data ImportsSystem.Data.SqlClient PublicClassForm1 InheritsSystem.windows.Forms. ...