jQuery mouse into the picture to show big picture and follow the mouse

<!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 
                // mouse into this column as a transparency of an additional 0.5 
                // $ (the this) .css ( "opaacity", "1") SIBLINGS ( "Li"). AddClass ( "opacity_li");.. 


                Var $ imgsrc = $ ( the this ) .find ( " IMG " ) .attr ( " the src " );
                 var $ div =  " <div> <IMG the src = ' "  + $ imgsrc +  " ' /> </ div> " ; 
                $ ( " body " ) .append ($ div); 
                $ ( "div img").attr("the src " , $ imgsrc); 
            }, function () {
                 // OUT 
                // mouse out of the other columns when the transparency is removed 
                // $ (the this) .siblings () removeClass (." opacity_li "); 


                $ ( " div " ) .remove (); 
            .}) mouseMove ( function (E) { 
                $ ( " div " ) .css ({ 
                    position: " Absolute " , 
                    left: e.pageX +  10 , 
                    Top: e.pageY +  10
                }); // set div absolute positioning coordinates of the current mouse location is the distance 
            }) ;; 
        }) 
    </ Script > 
</ head > 

< body > 
    < UL > 
        < Li > 
            < IMG the src = "Images / Q do nothing .png " Alt =" "  /> 
        </ Li > 
        < Li > 
            < IMG the src =" Images / Hsia Cheng Rin .png " Alt =" "  /> 
        </ Li > 
        < Li > 
            <img src= "images / Huai Bi Ming sin nonetheless asked .png" alt = ""  /> 
        </ li > 
    </ ul > 
</ body > 

</ HTML >
View Code
Reproduced in: https: //www.cnblogs.com/xiemin-minmin/p/11040324.html
jQuery mouse into the picture to show big picture and follow the mouse

Guess you like
