jQuery简单图片提示

来源：互联网发布：域名未备案怎么办编辑：程序博客网时间：2024/06/11 20:31
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>FirstJquery</title>    <style>        ul{            list-style: none;        }        ul li{            float: left;            padding: 20px;        }        .preImg{            height: 50px;            width: 50px;        }        .later{            position: absolute;            /*top:200px;*/        }    </style></head><body><ul>    <li><a href="#"> <img src="../iconClockPicture/0.jpg" class="preImg" alt="1"></a></li>    <li><a href="#"> <img src="../iconClockPicture/1.jpg" class="preImg" alt="2"></a></li>    <li><a href="#"> <img src="../iconClockPicture/2.jpg" class="preImg" alt="3"></a></li>    <li><a href="#"> <img src="../iconClockPicture/3.jpg" class="preImg" alt="4"></a></li></ul></body><script src="jquery-2.2.0.min.js" type="text/javascript">  </script><!--<script src="//code.jquery.com/jquery-1.8.0.min.js"></script>--><script>    $(function(){        var $aImg=$('img');        $aImg.mouseover(function () {   //鼠标放在小图上            var oSrc=$(this).attr('src');            var oAlt=$(this).attr('alt');            //创建大图            var $create = $("<div id='showimg' class='later'><img src=" +oSrc+ " alt=" +oAlt+ "><p>"+this.alt+"</p></div>");//            $('#showimg>img').attr('src' ,oSrc);    //这样写会导致第一次显示不出图片,因为初始src='';            //添加到页面上            $('body').append($create);            $create.css('top', 200);            $create.css('left', 300);                $aImg.mouseout(function(){  //鼠标离开,清楚大图                    $create.remove();                });        });    });</script></html>
0 0