jQuery简单图片提示

最新推荐文章于 2018-10-23 11:03:10 发布

yzxzsp11

最新推荐文章于 2018-10-23 11:03:10 发布

阅读量485

点赞数

分类专栏： javascript 文章标签： jquery

本文链接：https://blog.csdn.net/yzxzsp11/article/details/50644949

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>

yzxzsp11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery简单图片提示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>FirstJquery</title> <style> ul{ list-style: none; } ul li{ float: left;
复制链接

扫一扫

专栏目录