关闭

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

标签: jqueryjavascript实例
169人阅读 评论(0) 收藏 举报
分类:

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

下面先放出完整的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>元素。









0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:881次
    • 积分:51
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:2篇
    • 译文:1篇
    • 评论:0条
    文章分类
    文章存档