这是一款很有意思的HTML5 Canvas时间动画，总体来说，它是一个可以和客户端同步的时钟，其特点是当时间走动时，数字将会散落成一个个粒子动画点击图片可查看演示哦~

一个网站的外观无疑是用户访问以及回访的重要因素，那么，我们就要更加注重于前端的优化。最近看到狂放小栈这篇文章《给你的博客添加一个彩色横条》，灵感由此而发，但是我在这篇文章中仅仅得到的是个灵感，其中的CSS代码并不详细，效果在寸言博客中并不太好。 狂放的思路是这样的：在网站顶部菜单添加2个背景，一个是颜色背景，一个图片背景，使得图片背景在颜色背景前。弊端：各种主题结构不同，不一定都有一个顶部菜单。如本站，只有一个主菜单和底部菜单，并没有顶部菜单，也就不能像其所说的直接添加背景。优点：简单方便。 子言的思路是这样的：在网站顶部添加一个Div层，将其定位并且始终固定在浏览器顶部，随着页面而移动，并且始终在最顶层，不会被遮挡。缺陷：需要添加Div层，比较麻烦。优点：所有主题都适用，效果更佳。 首先，我们需要图片，直接贴出来吧，需要的请直接右键另存为。 接着，在网站顶部适当位置添加一个Div，自定义一个id，当然你用class问题也不大。我命名的id为top-png. 添加以下CSS代码到样式表，当然，如果你的主题支持自定义样式就添加到自定义样式里。 #top-png { background: url(http://img.me0.pw/uploads/2017/07/FileName.txt.png); height: 4px; margin-top: 21px; position: fixed; width: 100%; Z-index: 10; }  样式解析： Background中的括号内链接请改为你的图片链接。 height不要改动，因为图片的高度为4px; margin-top为外围距离顶部高度，自行调整。如果你的Div并没有出现距离问题，就不需要。 Position这里定义的是固定。如果不需要就删除这行。 Width宽度，如果添加后宽度有异常，请调整这一项。 Z-index这是层数，越高，也就在其他模块之上。

一款非常好看的jQuery网站右侧固定在线客服代码，带在线QQ客服、联系电话、二维码扫描、购物车、返回顶部按钮，相当的实用。 js代码 <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> 演示地址 ：http://www.lanrenzhijia.com/demos/53/5340/demo/ 管理员设置 回复 可见隐藏内容