jquery は、Web の右側にある qq オンライン カスタマー サービス プラグインのサンプルを実装します。 page_jquery

非常に実用的な QQ オンライン カスタマー サービス コード。QQ アイコンをクリックすると、カスタマー サービスに直接問い合わせることができます。具体的な実装コードは次のとおりです。
html ページ:

コードをコピー コードは次のとおりです。

css スタイル
:

コードをコピー

コードは次のとおりです: /*デフォルトブルー*/ .SonlineBox{ width:162px; font-size:12px;overflow:hidden; z-index:9999;}

.openTrigger{ width:30px; :110px; 位置:絶対; z-インデックス:1; 背景:#0176ba url(../images/openTrigger.jpg) 繰り返しなし;}

.SonlineBox .titleBox :158px; 高さ:35px; 背景:#038bdc url(../images/SonlineTitleBg.gif) 繰り返し-x; 境界線:2px ソリッド #0176ba;}
.SonlineBox .titleBox { margin-left:10px; color:#fff; font-family:'Microsoft YaHei','HeiTi';}
.SonlineBox 高さ:auto; 2px ソリッド #0176ba; 位置: 絶対; ; top:5px;right:5px;-webkit-transition:all 0.8s easy-out;}
.SonlineBox .contentBox .closeTrigger:hover{-webkit-transform:scale(1)rotate(360deg);}
.SonlineBox .contentBox .listBox{overflow:hidden ; margin-bottom:10px;}
.SonlineBox .contentBox .listBox .QQList{display:block; height:22px; auto;}
.SonlineBox .contentBox .listBox .QQList スパン{float:left; line-height:22px;}
.SonlineBox .contentBox .listBox .QQList a{float:left;}



jquery スクリプト コード
:

コードをコピー

コードは次のとおりです:

/*
此插件基于Jquery
开发者 yaohucaizi
Blog：http://blog.csdn.net/yaohucaizi/
*/
(function($){
$.fn.Sonline = function(options){
var opts = $.extend({}, $.fn.Sonline.defualts, options);
$.fn.setList(opts); //调用列表设置
if(opts.DefaultsOpen == false){
$.fn.Sonline.close(opts.Position,0);
}
//展开
$("#SonlineBox > .openTrigger").live("click",function(){$.fn.Sonline.open(opts.Position);});
//关闭
$("#SonlineBox > .contentBox > .closeTrigger").live("click",function(){$.fn.Sonline.close(opts.Position,"fast");});

//Ie6兼容或滚动方式显示
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style||opts.Effect==true) {$.fn.Sonline.scrollType();}
else if(opts.Effect==false){$("#SonlineBox").css({position:"fixed"});}
}
//plugin defaults
$.fn.Sonline.defualts ={
Position:"left",//left或right
Top:200,//顶部距离，默认200px
Effect:true, //滚动或者固定两种方式，布尔值：true或
DefaultsOpen:true, //默认展开：true,默认收缩：false
Qqlist:"" //多个QQ用','隔开，QQ和客服名用'|'隔开
}

//展开
$.fn.Sonline.open = function(positionType){
var widthValue = $("#SonlineBox > .contentBox").width();
if(positionType=="left"){$("#SonlineBox > .contentBox").animate({left: 0},"fast");}
else if(positionType=="right"){$("#SonlineBox > .contentBox").animate({right: 0},"fast");}
$("#SonlineBox").css({width:widthValue+4});
$("#SonlineBox > .openTrigger").hide();
}
//关闭
$.fn.Sonline.close = function(positionType,speed){
$("#SonlineBox > .openTrigger").show();
var widthValue =$("#SonlineBox > .openTrigger").width();
var allWidth =(-($("#SonlineBox > .contentBox").width())-6);
if(positionType=="left"){$("#SonlineBox > .contentBox").animate({left: allWidth},speed);}
else if(positionType=="right"){$("#SonlineBox > .contentBox").animate({right: allWidth},speed);}
$("#SonlineBox").animate({width:widthValue},speed);

}
//子插件：设置列表参数
$.fn.setList = function(opts){
$("body").append("

客服中心

");
if(opts.Qqlist==""){$("#SonlineBox > .contentBox > .listBox").append("

暂无在线客服。

")}
else{var qqListHtml = $.fn.Sonline.splitStr(opts);$("#SonlineBox > .contentBox > .listBox").append(qqListHtml); }
if(opts.Position=="left"){$("#SonlineBox").css({left:0});}
else if(opts.Position=="right"){$("#SonlineBox").css({right:0})}
$("#SonlineBox").css({top:opts.Top});
var allHeights=0;
if($("#SonlineBox > .contentBox").height() < $("#SonlineBox > .openTrigger").height()){
allHeights = $("#SonlineBox > .openTrigger").height()+4;
} else{allHeights = $("#SonlineBox > .contentBox").height()+4;}
$("#SonlineBox").height(allHeights);
if(opts.Position=="left"){$("#SonlineBox > .openTrigger").css({left:0});}
else if(opts.Position=="right"){$("#SonlineBox > .openTrigger").css({right:0});}
}

//滑动式效果
$.fn.Sonline.scrollType = function(){
$("#SonlineBox").css({position:"absolute"});
var topNum = parseInt($("#SonlineBox").css("top")+"");
$(window).scroll(function(){
var scrollTopNum = $(window).scrollTop();//获取网页被卷去的高
$("#SonlineBox").stop(true,true).delay(0).animate({top:scrollTopNum+topNum},"slow");
});
}

//分割QQ
$.fn.Sonline.splitStr = function(opts){
var strs= new Array(); //定义一数组
var QqlistText = opts.Qqlist;
strs=QqlistText.split(","); //字符分割
var QqHtml=""
for (var i=0;ivar subStrs= new Array(); //定义一数组
var subQqlist = strs[i];
subStrs = subQqlist.split("|"); //字符分割
QqHtml = QqHtml+"

"+subStrs[1]+"：

"
}
return QqHtml;
}
})(jQuery);

The rendering is as follows:

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript で GriwView の単一列選択を実装 (自作コード)_JavaScript スキル次の記事：JavaScript で GriwView の単一列選択を実装 (自作コード)_JavaScript スキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル