jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1250 次日期：2016-07-08 10:38:58

溫馨提示：易賢網(wǎng)小編為您整理了“jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)”,方便廣大網(wǎng)友查閱！

這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼,具備顯示文本,Div,Table,Html等功能.涉及jQuery針對(duì)鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼。分享給大家供大家參考，具體如下：

運(yùn)行效果截圖如下：

Web網(wǎng)站有不少需要用到tip提示層的地方，結(jié)合jquery的jquery.cluetip.js ，可以實(shí)現(xiàn)本地字符或ajax異步調(diào)用顯示提示層。如以上購(gòu)評(píng)分明細(xì)提示。(優(yōu)勢(shì)：寬度需要調(diào)用頁(yè)加載時(shí)定義，高度auto , 且三角指定圖標(biāo)能根據(jù)顯示層的大小位置來調(diào)用它的位置，達(dá)到醒目直觀的效果)

jquery.cluetip.css

/* global */

#cluetip-close img {

border: 0;

}

#cluetip-title {

overflow: hidden;

}

#cluetip-title #cluetip-close {

float: right;

position: relative;

}

#cluetip-waitimage {

width: 43px;

height: 11px;

position: absolute;

}

.cluetip-arrows {

display: none;

position: absolute;

top: 0;

left: -11px;

height: 22px;

width: 11px;

background-repeat: no-repeat;

background-position: 0 0;

}

#cluetip-extra {

display: none;

}

/***************************************

=cluetipClass: 'default'

-------------------------------------- */

.cluetip-default {

background-color: #d9d9c2;

}

.cluetip-default #cluetip-outer {

position: relative;

margin: 0;

background-color: #d9d9c2;

}

.cluetip-default h3#cluetip-title {

margin: 0 0 5px;

padding: 8px 10px 4px;

font-size: 14px;

font-weight: normal;

background-color: #87876a;

color: #fff;

}

.cluetip-default #cluetip-title a {

color: #d9d9c2;

font-size: 0.95em;

}

.cluetip-default #cluetip-inner {

padding: 10px;

}

.cluetip-default div#cluetip-close {

text-align: right;

margin: 0 5px 5px;

color: #900;

}

/* default arrows */

.clue-right-default .cluetip-arrows {

}

.clue-left-default .cluetip-arrows {

left: 100%;

margin-right: -11px;

}

.clue-top-default .cluetip-arrows {

top: 100%;

left: 50%;

margin-left: -11px;

height: 11px;

width: 22px;

}

.clue-bottom-default .cluetip-arrows {

top: -11px;

left: 50%;

margin-left: -11px;

height: 11px;

width: 22px;

}

/***************************************

=cluetipClass: 'jtip'

-------------------------------------- */

.cluetip-jtip {

background-color: transparent;

display:none;

}

.cluetip-jtip #cluetip-outer {

border: 1px solid #559EF8;

position: relative;

background-color: #fff;

}

.cluetip-jtip h3#cluetip-title {

margin: 0 0 5px;

padding: 2px 5px;

font-size: 12px;

font-weight: normal;

background-color: #559EF8;

color: #fff;

}

.cluetip-jtip #cluetip-inner {

padding: 0 5px 5px;

display: inline-block;

}

.cluetip-jtip div#cluetip-close {

text-align: right;

margin: 0 5px 5px;

color: #900;

display:none;

}

/* jtip arrows */

.clue-right-jtip .cluetip-arrows {

}

.clue-left-jtip .cluetip-arrows {

left: 100%;

margin-right: -11px;

}

.clue-top-jtip .cluetip-arrows {

top: 100%;

left: 50%;

margin-left: -11px;

height: 11px;

width: 22px;

}

.clue-bottom-jtip .cluetip-arrows {

top: -11px;

left: 50%;

margin-left: -11px;

height: 11px;

width: 22px;

}

/***************************************

=cluetipClass: 'rounded'

-------------------------------------- */

.cluetip-rounded {

background: transparent url(../img_new/cluetipbl.gif) no-repeat 0 100%;

margin-top: 10px;

margin-left: 12px;

}

.cluetip-rounded #cluetip-outer {

background: transparent url(../img_new/cluetiptl.gif) no-repeat 0 0;

margin-top: -12px;

}

.cluetip-rounded #cluetip-title {

background-color: transparent;

padding: 12px 12px 0;

margin: 0 -12px 0 0;

position: relative;

}

.cluetip-rounded #cluetip-extra {

position: absolute;

display: block;

background: transparent url(../img_new/cluetiptr.gif) no-repeat 100% 0;

top: 0;

right: 0;

width: 12px;

height: 30px;

margin: -12px -12px 0 0;

}

.cluetip-rounded #cluetip-inner {

background: url(../img_new/cluetipbr.gif) no-repeat 100% 100%;

padding: 5px 12px 12px;

margin: -18px -12px 0 0;

position: relative;

}

.cluetip-rounded div#cluetip-close {

text-align: right;

margin: 0 5px 5px;

color: #009;

background: transparent;

}

.cluetip-rounded div#cluetip-close a {

color: #777;

}

/* rounded arrows */

.clue-right-rounded .cluetip-arrows {

}

.clue-left-rounded .cluetip-arrows {

left: 100%;

margin-left: 12px;

}

.clue-top-rounded .cluetip-arrows {

top: 100%;

left: 50%;

margin-left: -11px;

height: 11px;

width: 22px;

}

.clue-bottom-rounded .cluetip-arrows {

top: -23px;

left: 50%;

margin-left: -11px;

height: 11px;

width: 22px;

}

/* stupid IE6 HasLayout hack */

.cluetip-rounded #cluetip-title,

.cluetip-rounded #cluetip-inner {

zoom: 1;

}

.float-left {

float: left;

margin-right: .5em;

display: inline;

position: relative;

}

.float-right {

float: right;

margin-left: .5em;

display: inline;

position: relative;

}

jquery-1.3.2.min.js -- 官方網(wǎng)可下載，這里不再表述。(必須)

jquerycluetipLoad.js --提示層的基本參數(shù)和屬性的定義。

/* Jquery 鼠標(biāo)跟隨提示層。

* 創(chuàng)建人：fooo

* 創(chuàng)建日期：09-09-23

* 修改人：

* 修改日期：

* 本地字符提示示例：<span title="標(biāo)題|<%=Str()%>"><a href="#" >我們的</a></span>

* Ajax異步調(diào)用文件且提示示例：<ol><li><a class="jt" href="#" title="評(píng)分項(xiàng)目明細(xì)" rel="HandlerAjax.ashx?Name=<%=Security.EncryptQueryString("我們的我我我人大")%>" >clueTip - Ajax異步提示1</a> </li></ol>

* 改變提示層寬度大小，只需在調(diào)用頁(yè)加入： $.fn.cluetip.defaults.width = '100'; -根據(jù)大小調(diào)整。

// $.fn.cluetip.defaults.tracking = true;

// $.fn.cluetip.defaults.width = 'auto';

$(document).ready(function()

{

//default theme

$('a.title').cluetip({splitTitle: '|'});

$('a.basic').cluetip();

$('a.custom-width').cluetip({width: '200px', showTitle: false});

$('h4').cluetip({attribute: 'id', hoverClass: 'highlight'});

$('#sticky').cluetip({sticky: true, closePosition: 'title', arrows: true });

$('#examples a:eq(5)').cluetip({

hoverClass: 'highlight',

sticky: true,

closePosition: 'bottom',

closeText: '<img src="../img_new/cluetipcross.png" alt="close" width="16" height="16" />',

truncate: 60

});

$('a.load-local').cluetip({local:true, hideLocal: true, sticky: true, arrows: true, cursor: 'pointer'});

$('#clickme').cluetip({activation: 'click', sticky: true, width: 250});

$('ol:first a:last').cluetip({tracking: true});

//jTip theme

$('a.jt:eq(0)').cluetip({

cluetipClass: 'jtip',

arrows: true,

dropShadow: false,

sticky: true,

mouseOutClose: true,

closePosition: 'title',

closeText: '<img src="../img_new/cluetipcross.png" alt="close" />'

});

$('a.jt:eq(1)').cluetip({cluetipClass: 'jtip', arrows: true, dropShadow: false, hoverIntent: false});

$('span[title]').css({borderBottom: '0px solid #900'}).cluetip({splitTitle: '|', arrows: true, dropShadow: false, cluetipClass: 'jtip'});

$('a.jt:eq(2)').cluetip({

cluetipClass: 'jtip',

arrows: true,

dropShadow: false,

height: '150px',

sticky: true,

positionBy: 'bottomTop'

});

$('a.jt:eq(3)').cluetip({local: true, hideLocal: false});

$('a.jt:eq(4)').cluetip({

cluetipClass: 'jtip', arrows: true,

dropShadow: false,

onActivate: function(e) {

var cb = $('#cb')[0];

return !cb || cb.checked;

}

});

// Rounded Corner theme

$('ol.rounded a:eq(0)').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showtitle: false});

$('ol.rounded a:eq(1)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'mouse'});

$('ol.rounded a:eq(2)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'bottomTop', topOffset: 70});

$('ol.rounded a:eq(3)').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true});

$('ol.rounded a:eq(4)').cluetip({cluetipClass: 'rounded', dropShadow: false});

});

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

更多信息請(qǐng)查看網(wǎng)絡(luò)編程

上一篇：JS中artdialog彈出框控件之提交表單思路詳解

下一篇：ArtEditor富文本編輯器增加表單提交功能

易賢網(wǎng)手機(jī)網(wǎng)站地址：jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長(zhǎng)的行的實(shí)現(xiàn)方法10月30日

vue.js語(yǔ)法及常用指令10月30日

python 讀寫中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合