制作类似分享插件功能

简介: $(".side ul li:not('.backTop')").hover(function() { $(this).find(".sideBox").stop().animate({ "width" : "90px", }, 300); }, function() { $(this).
$(".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;
}

效果:

目录
相关文章
|
6月前
|
小程序 索引 容器
微信小游戏制作工具中的滚动列表插件如何使用?
微信小游戏制作工具中的滚动列表插件如何使用?
152 1
|
API
【工具推荐】 Obsidian 插件 Obsidian to Flomo 一键同步内容到 Flomo 插件
Obsidian to Flomo 是一款可以一键发送内容到 Flomo 的Obsidian 插件。
811 0
|
5月前
|
存储 数据库 数据安全/隐私保护
Duplicator插件的主要功能是什么?
【6月更文挑战第4天】Duplicator插件的主要功能是什么?
53 1
|
6月前
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺序 原版–>美化包–>后台启用子主题(已启用请忽略)。
150 0
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
|
开发工具 UED 开发者
在微信小游戏制作工具中实现各种效果和功能的按钮
在游戏设计中有一个名词叫“反馈”,大体就是指当玩家在进行游戏时,游戏所给予玩家的一些东西,比如常见的在点击按钮时,按钮会变换颜色,或进行缩放,或播放音效等等。总之,不论玩家在游戏中进行任何的操作,游戏都应该给予玩家一个合理的反馈。让玩家能够明白他的操作所获得的结果是什么。
412 0
|
JavaScript Android开发
uniapp 项目双屏异显插件使用方式
uniapp 项目双屏异显插件使用方式
802 0
uniapp 项目双屏异显插件使用方式
|
计算机视觉
ps2023软件全新版免费调色滤镜插件exposure图片后期处理工具
许多朋友都习惯于用手机拍照,但拍出来的效果却没有别人拍出来的好看,不知道如何解决。这种情况下你只需一个适合自己的照片处理工具,就可以提升原照片的美观度。那么,有哪些好用的照片处理工具,如何用照片处理工具处理照片,下面就有我来为各位进行讲解,希望能够给大家一些帮助。
455 1
ps2023软件全新版免费调色滤镜插件exposure图片后期处理工具
使用APICloud实现文档下载和预览功能
使用 APICloud 开发 app 时,可以使用 api.download 方法实现下载;预览文档可以使用 superFile 模块。superFile 模块封装了基于腾讯浏览服务 TBS,使用 X5Webkit 内核,实现文件的展示功能,支持多种文件格式(PDF、Word、Execl、TXT、PPT)。
489 0
APICloud 实现文档下载和预览功能
文档下载是很多app,尤其是企业应用中常用的功能。使用APICloud开发app时,可以使用api.download方法实现下载;预览文档可以使用superFile 模块。superFile 模块封装了基于腾讯浏览服务TBS,使用X5Webkit内核,实现文件的展示功能,支持多种文件格式(PDF、Word、Execl、TXT、PPT)。
315 0
APICloud 实现文档下载和预览功能
Unity3D原生编辑器的界面太丑?那就试试这款插件吧
是否已经看厌了Unity一成不变的白灰色了?现在给大家带来一个可以更换Unity的主题颜色的插件,下面就让我们来看看怎么使用吧