不错的右侧浮动,免费电话调用离线宝接口
不错的右侧浮动,免费电话调用离线宝接口。注意使用离线宝功能请修改调用离线宝接口的ID。
离线宝的详细使用方法参考:百度离线宝调用接口
下载地址:不错的右侧浮动,免费电话调用离线宝接口
效果截图:
<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>
相关文章
- 网站底部百度搜索框实现百度搜索结果为指定网站
网站底部百度搜索框实现百度搜索结果为指定网站,在网站底部提供一个百度搜索框,当访客在改搜索框中输入关键词进行搜索时,搜索结果页面中显示的都是我们指定的网站的收录页面(前提是我们指定的网站在百度中有一定的收录量)。 主要的原理是利用了百度搜索
- 医疗网站常用的网页左侧浮动咨询菜单
医疗网站常用的网页左侧浮动咨询菜单,包含在线咨询,免费电话,QQ在线,自助挂号,回到顶部菜单,其中免费电话采用离线宝免费电话接口,想要使用该功能请修改代码中的相关参数,具体修改方法参考之前的文章 百度离线宝调用接口 。 代码打包下载: 医疗网站
- 漂亮的左下角QQ邀请窗口
漂亮的左下角QQ邀请窗口,GIF动图,邀请效果明显。
- js文章页选中文本出现弹窗效果
js文章页选中文本出现弹窗效果,文章内容文本被鼠标选中是弹出一个邀请框效果实现,非常棒的一个效果,可以提高转化。
- 手机站底部黑色导航条效果
手机站底部黑色导航条效果。 代码打包下载: 手机站底部黑色导航条效果 效果截图:
随机推荐
- 网站底部百度搜索框实现百度搜索结果为指定网站
网站底部百度搜索框实现百度搜索结果为指定网站,在网站底部提供一个百度搜索框,当访客在改搜索框中输入关键词进行搜索时,搜索结果页面中显示的都是我们指定的网站的收录页面(前提是我们指定的网站在百度中有一定的收录量)。 主要的原理是利用了百度搜索
- 医疗网站常用的网页左侧浮动咨询菜单
医疗网站常用的网页左侧浮动咨询菜单,包含在线咨询,免费电话,QQ在线,自助挂号,回到顶部菜单,其中免费电话采用离线宝免费电话接口,想要使用该功能请修改代码中的相关参数,具体修改方法参考之前的文章 百度离线宝调用接口 。 代码打包下载: 医疗网站
- 漂亮的左下角QQ邀请窗口
漂亮的左下角QQ邀请窗口,GIF动图,邀请效果明显。
- js文章页选中文本出现弹窗效果
js文章页选中文本出现弹窗效果,文章内容文本被鼠标选中是弹出一个邀请框效果实现,非常棒的一个效果,可以提高转化。
- 手机站底部黑色导航条效果
手机站底部黑色导航条效果。 代码打包下载: 手机站底部黑色导航条效果 效果截图: