jQuery中的DOM操做-图片提示效果

最新推荐文章于 2022-02-28 17:40:57 发布

scorpion喵喵

最新推荐文章于 2022-02-28 17:40:57 发布

阅读量358

点赞数

分类专栏： jQuery 文章标签：图片提示 jQuery

本文链接：https://blog.csdn.net/weixin_40133326/article/details/81290162

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图片提示效果就是当鼠标滑过图片时，提示大图片及说明文字。

参考超链接提示的代码，我们对改动的地方详细介绍

1创建<div>元素，图片提示

var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'></div>"

2 根据超链接的titles属性来获得图片相应的介绍文字

var imgTitle = this.myTitle ? "</br>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "</div>";
$("body").append(tooltip);

注意：在判断this.myTitle是否为" "时，使用了三元运算。

三元运算的结构为：Boolen？值1：值2。他的第一个参数必须为布尔值。

当然三元运算也可以用"if(){ }else{ }"代替。

3 完整的代码

<body>
    <ul>
        <li>
            <a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 ipod"><img src="images/apple_1_bigger.jpg" alt="苹果 ipod">
                </img>
            </a>
        </li>
        <li>
            <a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 ipod nano"><img src="images/apple_2_bigger.jpg" alt="苹果 ipod nano">
                </img>
            </a>
        </li>
        <li>
            <a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iphone"><img src="images/apple_3_bigger.jpg" alt="苹果 iphone">
                </img>
            </a>
        </li>
        <li>
            <a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 mac"><img src="images/apple_4_bigger.jpg" alt="苹果 mac">
                </img>
            </a>
        </li>
    </ul>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
    $(function() {
        var x = 10;
        var y = 20;
        $("a.tooltip").mousemove(function(e) {
            this.myTitle = this.title;
            this.title = "";
            var imgTitle = this.myTitle ? "</br>" + this.myTitle : "";
            var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "</div>";
            $("body").append(tooltip);
            $("#tooltip")
                .css({
                    "top": (e.pageY + y) + 'px',
                    "left": (e.pageX + x) + 'px'
                }).show("fast");
        }).mouseout(function() {
            this.title = this.myTitle;
            $("#tooltip").remove();
        }).mousemove(function(e) {
            $("#tooltip")
                .css({
                    "top": (e.pageY + y) + 'px',
                    "left": (e.pageX + x) + 'px'
                });
        });
    })
    </script>
</body>

scorpion喵喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery中的DOM操做-图片提示效果

图片提示效果就是当鼠标滑过图片时，提示大图片及说明文字。参考超链接提示的代码，我们对改动的地方详细介绍1创建&lt;div&gt;元素，图片提示var tooltip="&lt;div id='tooltip'&gt;&lt;img src='"+this.href+"' alt='产品预览图'&gt;&lt;/div&gt;"2 根据超链接的titles属性来获得图片相应的介绍...
复制链接

扫一扫

专栏目录