制作类似分享插件功能
$(".side ul li:not('.backTop')").hover(function() { $(this).find(".sideBox").stop().animate({ "width" : "90px", }, 300); }, function() { $(this).find(".sideBox").stop().animate({ "width" : "35px" }, 300); }); $("#backTop").on('click',goTop); //回到顶部函数 function goTop(){ $('html,body').animate({'scrollTop':0},300); }
<div class="side"> <ul> <li><a href="#"> <div class="sideBox"> <span class="icon-fullscreen"></span>返回首页 </div> </a></li> <li><a href="#"> <div class="sideBox"> <span class="icon-helpFeedback"></span>帮助反馈 </div> </a></li> <li class="backTop"><a id="backTop" href="#"> <div class="sideBox"> <span class="icon-backTop"></span> </div> </a></li> </ul> </div>
.side { position: fixed; right: 0; bottom: 50px; width: 35px; z-index: 1000; } .side>ul { margin: 0; padding: 0; } .side>ul>li { width: 35px; height: 42px; position: relative; padding: 8px; margin-top:10px; } .side>ul>li>a { font-size: 12px; } .side>ul>li>a>div { border: 1px solid #e8e8e8; border-right: none; border-radius: 5px 0 0 5px; } .side>ul>li .sideBox { position: absolute; width: 35px; height: 42px; top: 0; right: 0; overflow: hidden; line-height:43px; } .sidetip-txt { display: none; } .sideBox-show { width: 35px; height: 42px; } .icon-fullscreen { line-height: 0; height: 40px; width:30px; display: inline-block; vertical-align: middle; border: 0 none; outline: none; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; background-image: url("/resources/img/users/md_hyzx_wdsc.png"); line-height: 0; background-position: -339px 13px; } .icon-helpFeedback{ line-height: 0; height: 40px; width:30px; display: inline-block; vertical-align: middle; border: 0 none; outline: none; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; background-image: url("/resources/img/users/md_hyzx_wdsc.png"); line-height: 0; background-position: -339px -38px; } .icon-backTop{ line-height: 0; height: 40px; width:30px; display: inline-block; vertical-align: middle; border: 0 none; outline: none; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; background-image: url("/resources/img/users/md_hyzx_wdsc.png"); line-height: 0; background-position: -339px -83px; }
效果:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
2015-04-29 深入理解JavaScript系列(转载)
2011-04-29 MyEclipse配置JDK的详细方法