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开发之超链接提示效果和图片提示效果

1,超链接提示效果 超链接自带的有提示效果的,这里就把自己定义的提示效果放在一起可以进行一下比较。示例代码如下: ...
  • HHL110120
  • HHL110120
  • 2015年06月17日 16:13
  • 1666

图片提示效果(jquery)

思路: 1.当鼠标滑入超链接:创建一个div元素,div元素的img为a的或href    内容为title的值   讲创建的元素追加到文档中,为它设置X坐标和y坐标,使他显示在鼠标位置的旁边。 ...
  • u013267266
  • u013267266
  • 2016年04月30日 21:36
  • 178

jQuery实现超链接提示和图片提示效果

利用jQuery对DOM操作的几个方法就完成了很友好的动态提示效果。 jQueryDOM操作练习 #tooltip{ posi...
  • yingzizizizizizzz
  • yingzizizizizizzz
  • 2017年05月14日 14:15
  • 362

jQuery图片自动轮转动画特效

本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果。所用到的图片截图:从网上下载一个jQuery文件jquery.js;具体HTML网页代码如下: 1688.h...
  • lmb55
  • lmb55
  • 2015年06月16日 22:45
  • 1514

jQuery演示10种不同的切换图片列表动画效果

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果   实例代码下载 Java代码      "en" class="no-js...
  • zhangyingh921
  • zhangyingh921
  • 2016年11月23日 10:58
  • 272

8款效果精美的 jQuery 加载动画和进度条插件

加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用...
  • qq_27966627
  • qq_27966627
  • 2016年04月19日 13:37
  • 1669

jQuery实例:图片展示效果

开始之前,我就喜欢先看一下效果: 张娜拉,韩国的 My Digital Story 不知道是什么图来的 我的Logo,Studio拼错了都不知道,汗一个。 四季图吧这是,但我分...
  • qq1162195421
  • qq1162195421
  • 2013年08月18日 08:25
  • 4798

别人用jquery写的图片拖拽效果

拖动  /*  作者: 谢泽龙  联系QQ: 454675335 (灬丿Spam丶)  时间: 2014-9-24  www.jq22.com */  $(functio...
  • javajingling
  • javajingling
  • 2016年07月31日 23:17
  • 498

jquery 半透明遮罩效果

首先谈谈最简单的实现方式吧。准备两个div,一个是幕布,另一个是要显示在屏幕正中央的部件,content 里面要显示什么东东,就由你自己去定义了。可以是图片,也可以是图表、视频什么的。然后就是添加效果...
  • zheng963
  • zheng963
  • 2015年04月16日 18:07
  • 1398

JQuery控制图片由中心点逐渐放大效果

有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的。如下图: 从中心...
  • hsd2012
  • hsd2012
  • 2016年06月25日 16:34
  • 10389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery学习实例:图片提示效果
举报原因:
原因补充:

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