<!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. HDFS 名称节点的启动

  2. springmvc：常用注解

    一.RequestParam注解 作用: 把请求中指定名称的参数给控制器中的形参赋值. 属性: value:请求参数中的名称. required:请求参数中是否必须提供此参数.默认值:true.表示必 ...

  3. phonegap geolocation android 问题

    很纠结的 phonegap 使用定位的时候 android 获取地址异常的慢,为什么呢? 经过分析 如果android 只开启gprs 上网功能 可以立即获取到经纬度 如果只开启wifi 根本就获取不 ...

  4. 全景还原报错现场 | 应用实时监控 ARMS 上线用户行为回溯功能

    随着前端技术日新月异迅猛发展,为了实现更好的前端性能,最大程度提高用户体验,支持单页应用的框架逐渐占领市场,如众所周知的React,Vue等等.但是在单页应用的趋势下,快速定位并解决JS错误却成为一大 ...

  5. php mkdir 777失败

    参考网址:https://www.cnblogs.com/52php/p/5660079.html 在linux系统中在创建文件/文件夹时有一个默认权限,此权限受 umask 设置影响,在/etc/b ...

  6. webapp-viewport 相关知识整理

    我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中: <meta name="viewport" content="widt ...

  7. JavaScript的原型链

    首先介绍下原型~原型的作用:把方法放到原型中,就可以让同类型的对象共享 . 当我创建一个构造函数.构造函数里有原型.通过:构造函数名.prototype获取到当前构造函数的原型. function S ...

  8. jmeter的组件介绍--框架

    测试计划(test plan):用于存放测试脚本的容器. 线程(threads):通过java多线程来实现模拟多用户操作,只有在线程组下才能添加sample(各种协议的请求),因此线程是必须的. 取样 ...

  9. mit课程ocw-business

    https://ocw.mit.edu/courses/find-by-topic/#cat=business Course # Course Title Level 1.011 Project Ev ...

  10. jq写tab切换

    $('.index-news-sub-box ul li').click(function(){ var i=$(this).index(); var img=$('.index-news-img-b ...