<!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. 【转载】TSN简介及相关资源

    原文:https://blog.csdn.net/u012692537/article/details/86188392 一.简介 1.1 什么是TSN TSN(Time Sensitive Netw ...

  2. 【python之路35】网络编程之socket相关

    Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...

  3. 前端（jQuery）（6）-- jQuery的扩展与noConflict

    1.jQuery的扩展 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. 关于 matplotlib

    注意,需要 zlib, 需要 Tkinter pip install matplotlib import numpy as np import matplotlib.pyplot as plt plt ...

  5. springmvc 传参Required String parameter 'xxxx' is not present

    报错 请求因该是已经被分配了,但是参数补全,无法被执行 加上这个参数就好了,表示请求参数,可以为空 这样的好处是,可以进入controller之后再去判断,比较好定位错误

  6. MyBatis 动态sql标签trim

    https://blog.csdn.net/zhangxing52077/article/details/75041053 序列序号在Mybatis中的使用的使用 将获得序列值获取返回到对象code字 ...

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

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

  8. Eclipse Git插件切换分支的时候不要Reset

    今天做了一件蠢事,我在当前分支上改了很多代码,后来切换分支的时候,有一个文件有冲突,eclipse提示这个文件冲突,我可以选择commit/stash/reset,我一看这个文件没什么关系,不需要提交 ...

  9. 微信小程序制作下来菜单

    wxml: <view class="phone_one" bindtap="clickPerson"> <view class=" ...

  10. jquery判断页面网址是否有效

    方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...