简洁大气设计风格的网页右侧扁平化滑动在线客服代码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

jquery

html5

jquery插件

jquery特效

43 浏览量 2023-09-26 01:49:06 上传评论收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

简洁大气设计风格的网页右侧扁平化滑动在线客服代码.zip （1个子文件）

index.html 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简洁大气设计风格的网页右侧扁平化滑动在线客服代码</title> <style> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* side */ .side{position:fixed;width:54px;height:275px;right:0;top:214px;z-index:100;} .side ul li{width:54px;height:54px;float:left;position:relative;border-bottom:1px solid #444;} .side ul li .sidebox{position:absolute;width:54px;height:54px;top:0;right:0;transition:all 0.3s;background:#000;opacity:0.8;filter:Alpha(opacity=80);color:#fff;font:14px/54px "微软雅黑";overflow:hidden;} .side ul li .sidetop{width:54px;height:54px;line-height:54px;display:inline-block;background:#000;opacity:0.8;filter:Alpha(opacity=80);transition:all 0.3s;} .side ul li .sidetop:hover{background:#ae1c1c;opacity:1;filter:Alpha(opacity=100);} .side ul li img{float:left;} </style> </head> <body style="height:2000px;">  <div class="side"> <ul> <li><a href="#"><div class="sidebox"><img src="http://demo.lanrenzhijia.com/2014/service1108/side_icon01.png">客服中心</div></a></li> <li><a href="#"><div class="sidebox"><img src="http://demo.lanrenzhijia.com/2014/service1108/side_icon02.png">客户案例</div></a></li> <li><a href="javascript:void(0);" ><div class="sidebox"><img src="http://demo.lanrenzhijia.com/2014/service1108/side_icon04.png">QQ客服</div></a></li> <li><a href="javascript:void(0);" ><div class="sidebox"><img src="http://demo.lanrenzhijia.com/2014/service1108/side_icon03.png">新浪微博</div></a></li> <li style="border:none;"><a href="javascript:goTop();" class="sidetop"><img src="http://demo.lanrenzhijia.com/2014/service1108/side_icon05.png"></a></li> </ul> </div> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script> $(function(){ $(".side ul li").hover(function(){ $(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"}) },function(){ $(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"}) }); }); //回到顶部函数 function goTop(){ $('html,body').animate({'scrollTop':0},300); } </script>  </body> </html>

评论收藏

内容反馈

版权申诉