利用 jQuery 制作图片提示功能 - 当用户鼠标放在图片上时就显示该图片的大图和文字介绍.

这篇和之前的 "利用 jQuery 制作超链接提示功能, 增加用户体验" 异曲同工, 需要的朋友也可以看下这篇文章的介绍.

因为原理基本上和 "利用 jQuery 制作超链接提示功能, 增加用户体验" 完全一样, 所以为了不重复, 这里仅给出实现的代码.

实例:

html, 代码仅供参考

<ul class="demo-tooltip-image clear">
    <li><a class="img-tooltip" href="http://lorempixel.com/300/150/cats/1/P1"><img src="http://lorempixel.com/100/50/cats/1/" title="英国短毛猫" alt="英国短毛猫" /></a></li>
    <li><a class="img-tooltip" href="http://lorempixel.com/300/150/cats/2/P2"><img src="http://lorempixel.com/100/50/cats/2/" title="波斯猫" alt="波斯猫" /></a></li>
    <li><a class="img-tooltip" href="http://lorempixel.com/300/150/cats/3/P3"><img src="http://lorempixel.com/100/50/cats/3/" title="俄罗斯蓝猫" alt="俄罗斯蓝猫" /></a></li>
    <li><a class="img-tooltip" href="http://lorempixel.com/300/150/cats/4/P4"><img src="http://lorempixel.com/100/50/cats/4/" title="罗威森林猫" alt="罗威森林猫" /></a></li>
</ul>

css, 代码仅供参考

<style>

    .demo-tooltip-image li {
        list-style:none;
        float: left;
        margin-right: 20px;
        overflow: hidden;
    }
    .demo-tooltip-image li img {
        outline:none;border:none;
        padding:4px;
        border:1px solid #dcdcdc;
        border-radius: 4px;
    }
    #imgtip img {
        padding:5px;
    }
    #imgtip {// 图片提示的容器
        background: #fff;
        overflow: hidden;
        border-radius: 4px;
        border:1px solid #dcdcdc;
    }
    #imgtip .imgLayer,#imgtip .imgText { // 图片提示的文字层和遮罩层
        height:35px;
        width:100%;
        position: absolute;
        bottom: 0;left:0;
    }
    #imgtip .imgText { // 图片提示的文字层
        color:#fff;
        z-index: 4;
        line-height: 35px;
        font-size:16px;
        text-indent: 10px;
    }
    #imgtip .imgLayer {// 图片提示文字遮罩层
        opacity:0.5;
        filter:alpha(opacity=50);
        background: #000;
        z-index: 3;
    }
</style>

js, 代码仅供参考

<script type="text/javascript">
    $(function () {
        var $imgtip = $("<div id='imgtip'></div>"); //图片提示元素
        $(".img-tooltip").mouseover(function (e) {
            this._ = $(this);
            $("body").append($imgtip); //图片提示添加到body中
            this.m = 10;//图片提示的y轴位置修正
            this.n = 20;//图片提示的x轴位置修正
            this.imgAlt = this._.find('img').attr('alt');//获取图片的alt信息
            this.imgTitle = this._.find('img').attr('title');//获取图片的title信息
            this._.find('img').attr('title','');//避免重复提示, 设置图片title值为""
            this.BimgHref = this._.attr('href');//获取大图路径, 即链接的路径
            this.showImageHtml = "<img src='"+this.BimgHref+"' alt='"+this.imgAlt+"' />"+
            "<div class='imgText'>"+this.imgTitle+"</div>"+"<div class='imgLayer'></div>";//组合图片提示中的, 文字层, 遮罩层以及大图 
            $imgtip.css({ // 设置图片的样式, 重点是设置图片的位置--图片提示的x轴和y轴的坐标, e.pageX, e.pageY
                "position":"absolute",
                "z-index":20150717,
                "top":e.pageY+this.m+"px", // 经过修正后y轴坐标
                "left":e.pageX+this.n+"px" // 经过修正后的x轴坐标
            })
            .show('fast')//显示速度
            .html(this.showImageHtml);//给图片提示元素设置对应的要件, 即这里的this.showImageHtml
        }).mouseout(function () {
            this._.find('img').attr('title',this.imgTitle);//再次给小图img标签设置title属性为原title值
            $imgtip.remove();//离开时删除imgtip元素
        }).mousemove(function (e) {//移动时, 时图片跟随鼠标移动
            $imgtip.css({
                "position":"absolute",
                "z-index":20150717,
                "top":e.pageY+this.m+"px",
                "left":e.pageX+this.n+"px"
            })
            .show('fast')
            .html(this.showImageHtml);
        })
    })
</script>

效果图:

 

很简单, 如果希望知道具体实现的原理

请浏览文章 "利用 jQuery 制作超链接提示功能, 增加用户体验";