jQuery网页新功能步骤引导

所属分类:UI-工具提示

 25705  350  查看评论 (6)
分享到微信朋友圈
X
jQuery网页新功能步骤引导 ie兼容9

使用方法

主要调用3个必须文件paopao.css、jquery-1.10.2.js、paopao.js

<link rel="stylesheet" type="text/css" href="css/paopao.css"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="script/paopao.js" type="text/javascript" charset="utf-8"></script>

html代码

<div id="box">
    <div id="box1"></div>
    <div id="box2"></div>
</div>
<div id="box3"></div>
<div id="box4"></div>

js根据数组对应相应的提示文字即可

$(function() {
    var arrObj = [$('#box1'), $('#box2'), $('#box3'), $('#box4')];
    var arrTitle = ['提示信息可以修改哦^^', '背景萌图可以添加或者修改哦', '箭头指向也是可以修改的哈', '444'];
    $.guidance({
        obj: arrObj,
        title: arrTitle
    });
});
相关插件-工具提示

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 29234  343

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 31540  310

一款腾讯UED设计的提示插件

一款腾讯UED设计的提示插件
  工具提示
 42539  435

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 28407  375

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    LEE.OPPA 0
    2020/5/7 17:25:33
    效果发错,分享出来给大家学习学习 回复
    冷酷的复读机 0
    2020/2/22 20:08:30
    怎么样才能做到只在第一次进入该页面的时候给提示?就比如说那种“不再显示”的按钮如何实现 ?
        areyouOk1
        2020/2/22 21:48:07
        用cookie或Local Storage,数据库来记录一个永久值判断即可。
    回复
    xuanziran 0
    2019/7/2 21:07:00
    适应性不是很好,缩放浏览器后刷新会偏移特别大 回复
    jugeJquery 0
    2019/5/25 14:01:11
    把这个js和css分享出来啊,
        LEE.OPPA0
        2020/5/7 17:25:52
        把这个js和css分享出来啊,
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复