在图片上做标记并可以用图文展示插件jquery.ipicture.js2001
这个插件有以下特点:

1、弹出层tips可以以滑动展开;

2、弹出层tips可以以图文形式显示。

JS引用代码:



HTML代码:

一艘潜艇
链接到:百度


有一座桥,全长688米。

启动插件:

注意:$( “#iPicture” ).iPicture(); 只能放在
的后边。或者文件的结尾! 参数说明
class="ip_tooltip ip_img32"   
这里说明ip_tooltip指的tip的绝对定位,ip_img32指的那个闪动的白点点的背景图的绝对定位,
有三种大小:ip_img32,ip_img24,ip_big24

style="top: 330px; left: 418px;" 指的是白点点的位置

data-tooltipbg="bgblack" 指的是tip的背景,默认有两种颜色 ,白色 bgwhite,黑色 bgblack

data-round="roundBgW" 指的是背后闪动的白点点的位置,

roundBgW是的是白色的由内向外闪动,默认大小30px

roundBgWIn是白色的由外向内闪动,默认大小24px

roundBgWInner是的是白色的由内向外闪动,只不过比roundBgWin更向内小一些,默认大小为20px

data-animationtype="btt-slide"  ,指的是 滑动 的形式,共有四种形式。

btt-slide ,指的是 bottom to top 由下向上滑动

ttb-silde ,指的是 top to bottom 由上向下滑动

ltr-slide, 指的是 left to right 由左向右滑动

rtl-slide, 指的是 right to left 由右向左滑动。

技术讨论区(6 个讨论)

  1. 谢袁源 6

    谢袁源

    可以直接显示而不用鼠标悬停吗

    2019-7-24 9:21:24 | 回复

  2. 云35940 5

    云35940

    这么吧它变成红色的点1

    2017-5-23 10:03:34 | 回复

  3. 越染纸上 4

    越染纸上

    这个插件怎么样?

    2016-8-9 17:59:59 | 回复

  4. Don Vincent 3

    Don Vincent

    评论收藏。

    2016-5-27 7:49:51 | 回复

  5. 豆豆龙 2

    豆豆龙

    谁用过,好用吗?

    2016-3-17 10:45:40 | 回复

  6. harory 1

    harory

    ie8不兼容么

    2015-9-18 9:15:43 | 回复

  7. 请先登录

      发 布