不错的右侧浮动,免费电话调用离线宝接口

模板网 2014-09-17

不错的右侧浮动,免费电话调用离线宝接口。注意使用离线宝功能请修改调用离线宝接口的ID。

复制代码 代码如下:
//引入百度离线宝API 注:data-lxb-uid为百度推广账户ID ,data-lxb-gid为离线宝分组ID可为空,将这两个ID替换为自己医院的
document.writeln('<script type="text/javascript"  data-lxb-uid="123456" data-lxb-gid="" src="http://lxbjs.baidu.com/api/asset/api.js?t=' + new Date().getTime() + '" charset="utf-8"><\/script>');

离线宝的详细使用方法参考:百度离线宝调用接口

下载地址:不错的右侧浮动,免费电话调用离线宝接口

效果截图:

不错的右侧浮动,免费电话调用离线宝接口

<title>不错的右侧浮动,免费电话调用离线宝接口</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
document.writeln('<script type="text/javascript"  data-lxb-uid="123456" data-lxb-gid="" src="http://lxbjs.baidu.com/api/asset/api.js?t=' + new Date().getTime() + '" charset="utf-8"><\/script>');

document.writeln('<style type="text/css">');
document.writeln('body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,input, textarea, th, td, img {border:medium none;margin: 0;padding: 0;}');
document.writeln('#csRight{width:60px;height:300px;position:fixed;z-index:100;top:50%;margin-top:-150px;right:0;background:#02948a;font-family:Microsoft Yahei,Georgia,Arial, sans-serif;_position: absolute;_top:expression(offsetParent.scrollTop+150);}');
document.writeln('#csRight a{display:block;width:60px;height:60px;margin-bottom:1px;background:#008077 url(http://www.120muban.com/data2/20140912/kf_all_right.png) no-repeat;transition: all 0.2s linear 0s;}');
document.writeln('#csRight a:hover{background-color:#01a499;}');
document.writeln('#csRight a.cSzixun{background-position:0px 0px;}');
document.writeln('#csRight a.cSyuyue{background-position:0px -61px;}');
document.writeln('#csRight a.tell{background-position:0px -121px;float:left;}');
document.writeln('#csRight a.tell:hover{background-color:#008077;}');
document.writeln('#csRight a.active{background-position:0px -121px;}');
document.writeln('#csRight a.cSaddress{background-position:0px -181px;}');
document.writeln('#csRight .telBox{width:60px;height:60px;position:relative;margin-bottom:1px;background:#056;}');
document.writeln('#csRight .callBox{width:285px;height:60px;position:absolute;left:0px;top:0;z-index:10;}');
document.writeln('#csRight .telform{width:225px;height:60px; background:#008077;float:left;}');
document.writeln('#csRight .telform .inner{width:211px;height:35px;float:right;margin-top:12px;margin-right:5px;display:inline;}');
document.writeln('#csRight .telform .inner input{width:153px;height:35px;line-height:35px;border-radius:2px 0px 0px 2px;display:block;float:left;font-size:13px;color:#303030;text-indent:5px;font-family:Microsoft Yahei,Georgia,Arial, sans-serif;}');
document.writeln('#csRight .telform .inner a{width:58px;height:35px;line-height:35px;border-radius:0px 2px 2px 0px;text-align:center;display:block;float:left;margin:0px;background:#b4b4b4;font-size:13px;color:#555;text-decoration:none;}');
document.writeln('#csRight .telform .inner a:hover{background:#ccc;}');
document.writeln('#csRight a.returnTop{background-position:0px -241px;height:59px;margin:0px;background-color:#4b4b4b;}');
document.writeln('#csRight a.returnTop:hover{background-color:#888;}');
document.writeln('</style>');
document.writeln('<div id="csRight">');
document.writeln('   <a href="javascript:;" title="在线咨询" target="_self" href="javascript:void(0);return false;" onclick="openZoosUrl();return false;" class="cSzixun" ></a>');
document.writeln('   <a href="javascript:;" title="预约专家" target="_self" href="javascript:void(0);return false;" onclick="openZoosUrl();return false;" class="cSyuyue" ></a>');
document.writeln('   <div class="telBox">');
document.writeln('       <div class="callBox">');
document.writeln('			<a href="javascript:;" title="免费电话" class="tell"></a>');
document.writeln('			<div class="telform">');
document.writeln('				<div class="inner">');
document.writeln('					<input type="text" id="tell_num" placeholder="请输入您的电话号码"/>');
document.writeln('				    <a href="javascript:void(0)" id="sub_btn">免费回电</a>');
document.writeln('			   </div>');
document.writeln('			</div>');
document.writeln('	   </div>');
document.writeln('   </div>');
document.writeln('   <a href="/lylx/" title="来院路线" target="_blank" class="cSaddress" ></a>');
document.writeln('   <a href="javascript:;" class="returnTop" title="返回顶部" target="_self" onclick="pageScroll()"></a>');
document.writeln('</div>');

$(function(){
	$('.telBox').mouseenter(function(e) {
		$(this).find('a.tell').addClass('active');
		$(this).find('.callBox').stop().animate({left:'-225px'},600);
	});
	$('.telBox').mouseleave(function(e) {
		$(this).find('a.tell').removeClass('active');
		$(this).find('.callBox').stop().animate({left:'-0px'},400);
	});
    document.getElementById("sub_btn").onclick = function () { 
	      lxb.call(document.getElementById("tell_num"));
	};			
})
function pageScroll(){
    window.scrollBy(0,-100);
    scrolldelay = setTimeout('pageScroll()',10);
   var sTop=document.documentElement.scrollTop+document.body.scrollTop;
   if(sTop==0) clearTimeout(scrolldelay);
}
</script>
<p>医疗模板库(www.120muban.com)整理收集 仅供学习参考,请勿用于商业用途</p>

相关文章

  1. 网站底部百度搜索框实现百度搜索结果为指定网站

    网站底部百度搜索框实现百度搜索结果为指定网站,在网站底部提供一个百度搜索框,当访客在改搜索框中输入关键词进行搜索时,搜索结果页面中显示的都是我们指定的网站的收录页面(前提是我们指定的网站在百度中有一定的收录量)。 主要的原理是利用了百度搜索

  2. 医疗网站常用的网页左侧浮动咨询菜单

    医疗网站常用的网页左侧浮动咨询菜单,包含在线咨询,免费电话,QQ在线,自助挂号,回到顶部菜单,其中免费电话采用离线宝免费电话接口,想要使用该功能请修改代码中的相关参数,具体修改方法参考之前的文章 百度离线宝调用接口 。 代码打包下载: 医疗网站

  3. 漂亮的左下角QQ邀请窗口

    漂亮的左下角QQ邀请窗口,GIF动图,邀请效果明显。

  4. js文章页选中文本出现弹窗效果

    js文章页选中文本出现弹窗效果,文章内容文本被鼠标选中是弹出一个邀请框效果实现,非常棒的一个效果,可以提高转化。

  5. 手机站底部黑色导航条效果

    手机站底部黑色导航条效果。 代码打包下载: 手机站底部黑色导航条效果 效果截图:

随机推荐

  1. 网站底部百度搜索框实现百度搜索结果为指定网站

    网站底部百度搜索框实现百度搜索结果为指定网站,在网站底部提供一个百度搜索框,当访客在改搜索框中输入关键词进行搜索时,搜索结果页面中显示的都是我们指定的网站的收录页面(前提是我们指定的网站在百度中有一定的收录量)。 主要的原理是利用了百度搜索

  2. 医疗网站常用的网页左侧浮动咨询菜单

    医疗网站常用的网页左侧浮动咨询菜单,包含在线咨询,免费电话,QQ在线,自助挂号,回到顶部菜单,其中免费电话采用离线宝免费电话接口,想要使用该功能请修改代码中的相关参数,具体修改方法参考之前的文章 百度离线宝调用接口 。 代码打包下载: 医疗网站

  3. 漂亮的左下角QQ邀请窗口

    漂亮的左下角QQ邀请窗口,GIF动图,邀请效果明显。

  4. js文章页选中文本出现弹窗效果

    js文章页选中文本出现弹窗效果,文章内容文本被鼠标选中是弹出一个邀请框效果实现,非常棒的一个效果,可以提高转化。

  5. 手机站底部黑色导航条效果

    手机站底部黑色导航条效果。 代码打包下载: 手机站底部黑色导航条效果 效果截图: