利用 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 制作超链接提示功能, 增加用户体验";

 

posted @ 2015-07-16 15:27  Zell~Dincht  阅读(508)  评论(0编辑  收藏  举报