右侧悬浮可伸缩的客服代码的简单介绍
admin 发布:2022-12-19 03:45 100
本篇文章给大家谈谈右侧悬浮可伸缩的客服代码,以及对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
求网站jq右侧客服悬浮窗代码
body
div style="height:10000px;"/div
div class="suspension"
div class="suspension-box"
a href="#" class="a a-service "i class="i"/i/a
a href="javascript:;" class="a a-service-phone "i class="i"/i/a
a href="javascript:;" class="a a-qrcode"i class="i"/i/a
a href="#" class="a a-cart"i class="i"/i/a
a href="javascript:;" class="a a-top"i class="i"/i/a
div class="d d-service"
i class="arrow"/i
div class="inner-box"
div class="d-service-item clearfix"
a href="#" class="clearfix"span class="circle"i class="i-qq"/i/spanh3咨询在线客服/h3/a
/div
/div
/div
div class="d d-service-phone"
i class="arrow"/i
div class="inner-box"
div class="d-service-item clearfix"
span class="circle"i class="i-tel"/i/span
div class="text"
p服务热线/p
p class="red number"4001-123-456/p
/div
/div
div class="d-service-intro clearfix"
pi/i功能和特性/p
pi/i价格和优惠/p
pi/i获取内部资料/p
/div
/div
/div
div class="d d-qrcode"
i class="arrow"/i
div class="inner-box"
div class="qrcode-img"img src="images/side_ewm.jpg" alt=""/div
p微信服务号/p
/div
/div
/div
/div
script type="text/javascript" src="js/jquery-1.7.2.min.js"/script
script type="text/javascript"
$(document).ready(function(){
/* ----- 侧边悬浮 ---- */
$(document).on("mouseenter", ".suspension .a", function(){
var _this = $(this);
var s = $(".suspension");
var isService = _this.hasClass("a-service");
var isServicePhone = _this.hasClass("a-service-phone");
var isQrcode = _this.hasClass("a-qrcode");
if(isService){ s.find(".d-service").show().siblings(".d").hide();}
if(isServicePhone){ s.find(".d-service-phone").show().siblings(".d").hide();}
if(isQrcode){ s.find(".d-qrcode").show().siblings(".d").hide();}
});
$(document).on("mouseleave", ".suspension, .suspension .a-top", function(){
$(".suspension").find(".d").hide();
});
$(document).on("mouseenter", ".suspension .a-top", function(){
$(".suspension").find(".d").hide();
});
$(document).on("click", ".suspension .a-top", function(){
$("html,body").animate({scrollTop: 0});
});
$(window).scroll(function(){
var st = $(document).scrollTop();
var $top = $(".suspension .a-top");
if(st 400){
$top.css({display: 'block'});
}else{
if ($top.is(":visible")) {
$top.hide();
}
}
});
});
/script
/body
请问织梦右侧添加浮动QQ客服代码怎么安装
把这些文件放在同一个文件夹下就行,关于index里面的代码,复制两个body之间的代码到你需要的页面body之间,CSS和JS引用放到文件head标签里。
关于网站页面右侧的悬浮窗,我想改这个鼠标放上面就出现的“24小时客服电话”,请大神教我!
浏览器控制台审查元素,模拟元素状态的改变:
如上图(谷歌浏览器),这样就可以对浮窗里的元素进行查看,看是否是图片还是HTML代码。
关于右侧悬浮可伸缩的客服代码和的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-17做公司网页,做公司网页有什么简单的方法
- 05-12深圳seo公司的简单介绍
- 05-11设计一个简单的网页,独立站建站平台有哪些
- 05-09网页代码,网页代码快捷键
- 05-09hao123网址之家官网的简单介绍
- 05-07孝感seo的简单介绍
- 05-07简历源代码可以上传照片的简单介绍[20240507更新]
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接