jQuery学习实例:图片提示效果

转载 2015年11月19日 09:10:27

顾名思义,图片提示效果就是当鼠标滑过图片时,提示大图片及说明文字。

下面先放出完整的jQuery代码:

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


下面对代码逐段分析:

1.当鼠标划入时,给对象添加一个新属性,并把title的值传递给这个属性,然后清空属性title的值。

this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "</br>" + this.myTitle : "";
2.然后将它追加到<div>元素中。

var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "</div>";
$("body").append(tooltip);
注意:在判断this.myTitle是否为" "时,使用了三元运算。

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

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

3.需要设置提示元素的top和left值,使提示与鼠标不离得太近,为top和left值增加10px。

var x = 10;
var y = 20;
$("#tooltip")
    .css({
              "top": (e.pageY + y) + 'px',
              "left": (e.pageX + x) + 'px'
     }).show("fast");
4.当鼠标划出时,再把对象的myTitle属性的值又赋给属性title。

.mouseout(function() {
            this.title = this.myTitle;
            $("#tooltip").remove();
5.需要提示效果跟随鼠标一起移动,可以为超链接添加一个mousemove事件。

.mousemove(function(e) {
            $("#tooltip")
                .css({
                    "top": (e.pageY + y) + 'px',
                    "left": (e.pageX + x) + 'px'
                });
        })

实现这个效果的具体思路如下:

一.当鼠标划入图片

1.创建一个<div>元素,div元素内容为大图片及说明文字。

2.将创建的元素append()添加到body中。

3.为它设置x,y坐标,使他显示在鼠标位置旁边,并用mousemove事件使其随鼠标移动并移动。

二.当鼠标划出图片时,移除<div>元素。









相关文章推荐

jQuery实例:图片展示效果

jQuery实例:图片展示效果 开始之前,我就喜欢先看一下效果: 张娜拉,韩国的 My Digital Story 不知道是什么图来的 我的Logo,...

jQuery插件实现模拟dialogs效果实例(图片)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 模拟dia...

jquery+css3实现图片提示效果

  • 2014年09月11日 16:38
  • 58KB
  • 下载

网站超链接和图片提示效果(jquery)

1.超链接提示效果: //

Jquery中的DOM操作 (十一.图片放大提示效果)

$(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this...
  • NDKHBWH
  • NDKHBWH
  • 2017年03月08日 11:57
  • 114
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery学习实例:图片提示效果
举报原因:
原因补充:

(最多只允许输入30个字)