jquery图片提示效果

最新推荐文章于 2018-11-07 14:25:47 发布

爱编程的兔子

最新推荐文章于 2018-11-07 14:25:47 发布

阅读量381

点赞数 1

分类专栏： jQuery效果文章标签： jquery

本文链接：https://blog.csdn.net/wjnf012/article/details/64132332

版权

jQuery效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接提示效果</title>
<script type="text/javascript" src="../plugins/lib/jquery/jquery-2.1.4.min.js" ></script>
<style>
.reminder-wrap{
    width: 100px;
    height: 100px;
}
.reminder-wrap a{
    position: relative;
    display: block;
}
.reminder-wrap img{
    display: block;
    width: 100%;
}
</style>
</head>
<body>
<div class="reminder-wrap">
    <a href="#" id="reminder" title="怒吼的猫咪"><img src="images/cat.png" /></a>
</div>
<script>
$("#reminder").mouseover(function(e){
    var imgReminder,imgPath,imgText,imgAlt;
    imgPath = "images/cat.png";
    this.myTitle = this.title;
    this.title = '';
    imgReminder = "<div id='imgReminder'><img src='"+ imgPath +"' /></div>";
    $(this).append(imgReminder);
    $(this).children("img").css({
        "opacity":"0.5"
    });
    $("#imgReminder").css({
        "position":"absolute",
        "width":"300px",
        "height":"300px",
        "top":e.pageY + "px",
        "left":e.pageX + "px"
    });
    imgText = "<div id='imgText'>"+this.myTitle+"</div>";
    $("#imgReminder").append(imgText);
    $("#imgText").css({
        "position":"absolute",
        "width":"100%",
        "height":"40px",
        "left":"0",
        "bottom":"0",
        "background":"rgba(0,0,0,0.7)",
        "color":"#ffffff",
        "text-align":"center",
        "line-height":"40px"
    });
}).mouseout(function(){
    $("#imgReminder").remove();
    $(this).children("img").css({
        "opacity":"1"
    });
    this.title = this.myTitle;
}).mousedown(function(e){
    $("#imgReminder").css({
        "top":e.pageY + "px",
        "left":e.pageX + "px",
    });
});
</script>
</body>
</html>

结果如图：
这里写图片描述

爱编程的兔子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery图片提示效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>超链接提示效果</title><script type="text/javascript" src="../plugins/lib/jquery/jquery-2.1.4.min.js" ></script><style>.reminder-wrap{ width:
复制链接

扫一扫

专栏目录