博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
有赞公告设置
阅读量:7034 次
发布时间:2019-06-28

本文共 1334 字,大约阅读时间需要 4 分钟。

hot3.png

有赞小报—今夜碎碎念

 

放假了吧??想好去那里玩了么?

小编我不放假!!!那么,发一篇很烧脑的技术贴,让你在五一长假前夕,酸爽一把~!

拉个仇恨,哈哈哈哈,祝大家五一劳动节快乐,么么哒~

 

DIY悬浮菜单,及单页定位设置教程!

 

本文作者:镊子

作者微信:hitler737

文章来源:镊子的有赞小报专栏

 

各位程序猿先原谅我没用术语,我担心很多人看的标题锚点,代码啥的直接不玩这个牛逼功能了!

 

好,言归正传

 

有赞微页面可以添加自定义悬浮菜单吗?当然可以!

 

有赞微页面上的按钮,点击之后,可以不进行跳转页面,直接定位到本页面的某个固定位置吗?当然可以!

 

通过本教程,就可以轻松实现以上两个功能,想看效果的亲,可以扫下面的二维码查看效果:

震惊不?酷炫酸爽不?既然回来了,这么牛逼的效果是如何实现的呢?请继续往下看!

 

待我来一步一步为你讲解【源码请点击阅读原文,提取密码3no4】:

 

1、下载源码后,打开悬浮菜单定位代码,并复制里面的代码;

 

2、编辑微页面,添加富文本,输入“你好”,然后鼠标在空白处点击右键——审查元素(或检查):

 

 

3、按Ctrl+F ,打开搜索栏,输入“你好”,一共找到2个,点击向下,找到第二个“你好”:

 

4、鼠标放到“你好”上面一行的<p>处,然后右键——Edit sd HTML

 

5、把里面的内容全部删掉,然后把源码粘贴进来

 

6、富文本里面显示的效果如下

(PS:悬浮菜单有了之后,接下来就要添加锚点了,锚点就是用来标记的,点击菜单,直接定位到锚点上,这样就实现了菜单的定位,接下来就需要添加锚点)

 

7、找到需要定位到图片的地方,在图片前面输入“你好”,鼠标在页面空白处点击右键——审查元素:(PS:需要定位的图片,必须在富文本里面添加!)

 

8、按CTRL+F ,打开搜索栏,输入“你好”,一共找到2个,点击向下,找到第二个“你好”(和第三步一模一样)

 

9、鼠标放到“你好”上面一行的<p>处,然后右键——Edit sd HTML

 

10、把“你好”删掉,替换为<a name="001"></a>(PS:<a name="001"></a>就是一个锚点,名字叫做001,当然也可以替换为其他的名字,但是菜单的代码里面也要替换为这个名字,不然是无法链接到这个锚点的!)

 

11、第7步到第10步是设置的第一个锚点,用同样的方法,添加其他三个锚点,其他的三个锚点依次为<a name="002"></a>、<a name="003"></a>、<a name="004"></a>

 

12、点击“上架”,大功告成!

最后,本功能第一来源为有赞商家:赵小姐家的店,技术无罪,把发现的最好的分享给大家!如有冒犯,请联系有赞小报一发沟通删除。

 

特别说明:悬浮菜单位置可以DIY,样式可以DIY,颜色可以DIY,甚至可以直接做成图标图片,位置可以放最下方做导航,可以放最上方类似天猫的引导和分类,也可以放左边右边做客服或者双11式的大活动引导页,欢迎各位码农对本代码魔改!建议小报先习会本教程再进阶修改!

 

本教程由有赞拍档-疾风文化编写,下载后如遇操作问题,可扫码交流。

转载于:https://my.oschina.net/u/2552765/blog/825904

你可能感兴趣的文章
初解禁:供SDK服务端调用函数--02+
查看>>
cnzz流量统计
查看>>
Android 用achartengine 画折线图怎么显示不正确
查看>>
通读AFN②--AFN的上传和下载功能分析、SessionTask及相应的session代理方法的使用细节...
查看>>
11.18日工作总结
查看>>
11.15日个人工作总结
查看>>
PEiD0.95 - 经典查壳工具
查看>>
MySQL中文乱码解决方案
查看>>
JSON对象和字符串之间的相互转换
查看>>
博客目录总纲首页
查看>>
从主机给VM Copy文件
查看>>
通过路由器的IP映射来解决,两个不同IP地址的PC机之间的从LAN口到WAN口的单向通讯问题...
查看>>
Java 学习笔记之 实例变量与线程安全
查看>>
Java 学习笔记之 Synchronized锁对象
查看>>
SpringSecurity的如何拦截提交POST请求
查看>>
Arduino 电平转换 升压 OUTPUT与9V/12V元件通信
查看>>
SWFObject2.0
查看>>
CodeTimerPerformance EasyPerformanceCounterHelper .NET 4.5
查看>>
需求规格说明书
查看>>
跟我学算法-吴恩达老师(误差分析, 正确标注, 开发集和测试集的划分, 数据不匹配,迁移学习, 多任务学习, 端到端学习)...
查看>>