位置: 编程技术 - 正文

使用jQuery制作浮动工具栏的实例分享(jquery悬浮显示)

编辑:rootadmin

推荐整理分享使用jQuery制作浮动工具栏的实例分享(jquery悬浮显示),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery-form,jquery悬浮,jquery浮动窗口,jquery.flot,jquery悬浮弹出提示框,jquery的鼠标悬浮事件,jquery悬浮弹出提示框,jquery悬浮,内容如对您有帮助,希望把文章链接给更多的朋友!

现在大家在浏览网站的时候,经常会发现一些浮动的条状栏,通常具有向上向下的功能,当你点击一下,就可以方便的回到顶部或者前往底部。其实打造这样一个工具边栏,并不是很难,使用jquery很容易就可以做出来。下面,你跟随我的步骤,一步一步的做一下,就可以做出来了,然后你可以根据这个代码,进行一些修改,自定义一些东西。

废话不多说,先说一下我做的这个工具边栏。这个工具边栏是符合我自己做的模板“Q”,Q模板的特点是黑白对比,所以这个工具边栏要突出黑白变化。经过构思之后,我决定这个边栏的样式是这样的:

当鼠标移动到“分享”按钮上之后,会自动滑出一个黑条,然后黑条上是各个分享按钮。具体的演示效果,你可以下载最后代码包查看。下面我们来开始动手一步一步的制作。

建立html结构

用span标签也行,不过我还是喜欢用div,所以就用div来建立html结构。结构很明确了吧,一个大div包含三个小div,分别是上中下三个按钮,其中分享按钮中,还需要再包含一个div,用来滑出分享按钮。好了,结构就建好了。

注意,向上向下按钮,我使用的是字符,而不是图片。如果是图片的话,需要加载,而且动态变化,需要替换图片更加的不方便。至于如何打出这个上下两个三角号,就靠你的搜狗输入法了,如下图:

好了,有了html结构,我们再来定义一些css。

使用jQuery制作浮动工具栏的实例分享(jquery悬浮显示)

CSS代码

首先定义全局的字体

经测试,这个边栏,在微软雅黑的字体下效果最好,所以要规定网页使用微软雅黑。上面这句代码,:root表示选择html根,对所有文档中的元素生效,其中5FAE8F6FCED1表示的就是微软雅黑,至于为什么这样写而不写成“微软雅黑”,如果用户电脑是英文的,那肯定找不到微软雅黑这个字体,这样写法,只要有微软雅黑字体,就可以使用。定位工具条位置

这几句css定义了工具边栏的高度和宽度,同时position:fixed表示让它固定在页面中,不会根据滚动条的滚动而移动。bottom:%,让它保持在页面中部位置,right:px表示让它距离右边个像素。响应操作

响应操作可以让工具更加人性化,例如上图效果,当我们把鼠标移动到箭头的时候,它会变成灰色,表示你已经把箭头移动到上面了。在这里,我使用了新型的选择器div[id^=”tool”]它的意思是,选取所有以tool开头的div标签。定义字体大小为px,调整三角形成为合适大小。设定cursor:pointer属性,当你鼠标移动到上面的时候,会显示成手指形状,让你误以为是一个可以点击的链接。下面的语句,当你鼠标移动到上面的时候,颜色变成#。这是响应操作,提高用户体验。中部CSS代码

比较简单,没有什么亮点,自己看看就行了。重点在于如何实现滑动出现分享按钮。我采用的方法是,定义两个div,浮动放置,其中分享按钮那个div默认是隐藏的,只有鼠标移动上去触发之后,它才会显示出来。

Jquery代码

在添加jquery代码之前,我们需要彻底理清滑出分享按钮的实现方式。jquery并没有提供横向滑动出现的方法,那要怎么实现呢?可以这样实现,先把底色变成黑色,让装载分享按钮的div框出现,但是这时候由于宽度不够显示分享按钮div,所以你暂时看不到。使用jquery的animate方法,让宽度逐渐变宽,直到完全显示分享按钮div。这样就会造成一个假象,黑色滑出,然后出现分享按钮。

具体的实现代码如下

注释我已经写在上面代码中了,仔细耐心看一下。这里,我想说的是向上向下滑动px。我并没有让它点击直接到顶部或者底部。因为我觉得,如果文章比较长,浏览者并不一定想直接滑动到底部,而是想看看下面的内容。如果他真想滑动到底部,也只需要点两次或者三次按钮即可。这也是一个用户体验的细节。

jQuery配合coin-slider插件制作幻灯片效果的流程解析 今天为了做一个模板,来收集幻灯片插件,最终确定了两款比较合适的。coin-slider和nivoslider,为此,研究了一下午,从各个方面来实验这两款插件,究

基于jquery插件实现拖拽删除图片功能 本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下实现以下效果完全拖出这个层,图片会消失,否则图片

实例讲解Jquery中隐藏hide、显示show、切换toggle的用法 本文实例为大家分享了jquery中show()、hide()和toggle()用法实例,供大家参考,具体内容如下htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/title初识jQ

标签: jquery悬浮显示

本文链接地址:https://www.jiuchutong.com/biancheng/386561.html 转载请保留说明!

上一篇:jQuery Easyui 验证两次密码输入是否相等(jquery easyui开发指南)

下一篇:jQuery配合coin-slider插件制作幻灯片效果的流程解析(jquery complete)

  • 进项税额转出会影响利润吗
  • 筹建期的开办费计入什么科目
  • 费用报销哪些可以不用合同的
  • 购买固定资产是费用吗
  • 汇算清缴报告和审计报告有什么区别
  • 预借差旅费,付给现金会计分录
  • 销售使用过未抵扣进项税额的货运汽车
  • 外聘人员差旅费应放什么会计科目
  • 工会劳动保护费不能列支劳保用品
  • 个人增值税业务有哪些?
  • 分公司清算和总公司清算
  • 其他应收款通俗
  • 国税申报填错了怎么办
  • 一般纳税人适用税种及税率
  • 中国公司可以给境外公司开发票吗
  • 暂估收入销项税与后期开票不一致
  • 土地的增值税进项能否抵扣
  • 可以税前扣除的收据有哪些
  • 报销老板垫款会计处理
  • 租赁的厂房改造可以费用化吗
  • 办理环评费用
  • 预收贷款是什么会计科目
  • 销售产品配件计入什么科目
  • 技术服务费进项发票怎么做分录
  • 新版edge浏览器极速模式
  • 定额发票可以抵进项税吗
  • 累进税率的特点是课税对象的数额越大,税率越
  • 企业向银行申请办理非原路的服务贸易退汇,银行应当
  • PHP:spl_autoload()的用法_spl函数
  • u盘突然被写保护是坏了吗
  • 生育津贴差额账务处理
  • 逾期未收回包装物押金增值税怎么算
  • 对外支付企业所得税计税依据
  • top命令可以看到哪些信息
  • uniapp route
  • php上传文件到指定目录
  • vue中watch监听对象的变化
  • 查看redis节点
  • 残保金是职工薪酬吗
  • react devtools
  • 小微企业免征增值税政策2023
  • 勘察测绘公司是做什么的
  • 新星计划片头好可爱啊
  • linux进程状态有哪些
  • html小游戏代码大全
  • 无形资产法
  • grpc 调试工具
  • 其他收益放在哪里
  • 总公司签协议,分公司开票,报账怎样写说明
  • 一年内到期的非流动资产
  • 公司刚成立没有员工需要申报个税吗
  • 进项税额转出分录怎么写,附加的原始凭证是什么
  • 公司借给股东钱
  • 原材料入库损耗
  • 2010年漏记的费用,11年该如何记账?
  • 合伙企业是什么组织形式
  • 收到合同预付款在账上怎么记
  • 工程保险一般谁投保
  • 产成品和半成品需要结转嘛
  • 库存商品销售后怎么做账
  • 会计往来账如何记账
  • mysql的优化有哪几种
  • 寻找sql注入漏洞存在哪几个关键点
  • freebsd10安装教程
  • win7控制台怎么打开
  • ubuntu20.04怎么用
  • ubuntu on xorg
  • 原生封装ajax
  • JavaScript实现Base64编码转换
  • js引入css文件
  • android动态添加fragment
  • shell脚本自动化
  • jquery实现div左右移动
  • unity坐标系转换
  • 自定义view的基本流程
  • python调用ch
  • 山西税务官网登录
  • 无锡医疗保险缴费比例
  • 现行的企业所得税率是多少
  • 广东地方税务局领导班子名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设