如何利用js实现仿world中批注功能的效果(附代码)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何利用js实现仿world中批注功能的效果(附代码),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含6314字,纯文字阅读大概需要10分钟。
内容图文
![如何利用js实现仿world中批注功能的效果(附代码)](/upload/InfoBanner/zyjiaocheng/286/767bafe5bcb546e1b14559b65851c86a.jpg)
初入前端,最近在使用word时发现有个批注功能,就想的如何用代码去实现一下
一、大概需求如下:
1.页面整体分为左中右两部分,中间为正文内容区域,右右两侧为注释浏览区域
2.右侧展示的注释内容必须与所需注释词汇在一条线上
3.初始时只显示两行内容,点击时展开全部
4.如果两个被注释的词距离太近,注释部分要求依次排序
二、预设解决方案
1.在注释内容外侧添加一个p,利用p的min-height属性控制注释的位置
2.利用position: absolute绝对定位,动态的生成和改变注释的位置
三、实现过程
在实现上述两种方法的过程中发现,第一种方案在数据量庞大的情况下,会出现bug,页面会奔溃,果断放弃了,选择了第二种方式实现
1.常量部分:
1> args--------->当前文章内容中有注释的词集合
2> notes-------->从库中获取到的注释文本集合
3> rightWrap---->右侧部分注释区域对象
4> leftWrap----->左侧部分注释区域对象
2.方法部分
1> setSite()------------------------------>初始界面加载时确定注释的位置
2> resetTop(elem, type)------------------->在点击时重新设置所有注释的位置
elem:当前被点击的对象
type:(open/close)全部展开或部分展示
3> bindClick(elem, type, selector, fn)---->绑定事件函数
elem:绑定事件的元素
type:绑定的事件类型,例如(click)
selector:动态添加到elem中的元素
fn:绑定事件执行后回调方法
3.整体代码
1> index.html部分代码
<p class="wrap"> <aside class="left"></aside> <article class="center"> <h3>人世</h3> <br /> <p>使其停下来</p> <p>使光影、蜉蝣</p> <p><b class="special-0 nleft">众生</b>的所向是什么</p> <p>尤以静止方可得出</p> <p>我不做空明的阐述</p> <p>我是凡人,且一直落在凡尘里</p> <p>使云霞似锦吧</p> <p>若产出时间的黄金</p> <p>时间的<b class="special-1">黄金</b>只能在一颗心里</p> <p>播种,<b class="special-2">萌发</b>,成为照耀</p> <p>内敛的照耀比及月亮</p> <p>我们需做辉光的同谋人</p> <p>我们依旧不能成为闪电或是惊雷</p> <p>我们只是平凡的形形色色</p> <p>为所有悸动欢呼的应该是另一群人</p> <p>那些卑微的怯懦的都给我</p> <p>我隐在暗处说——</p> <p>“这很好!”,是的,你注视我说——</p> <p>“你很好!”</p> <p>还有可以使其堕落下去使其沦陷下去的吗</p> <p>光影、<b class="special-3">蜉蝣</b>、我和你</p> <p>和岸边无风也要摇荡的芦苇</p> <p>和似乎永不休止的蝉鸣</p> <p>和流水</p> </article> <aside class="right"></aside> </p>
2> index.css部分代码
.wrap { display: flex; position: relative; width: 100%; } article.center { flex: 1; text-align: justify; padding: 20px; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } article.center p { line-height: 24px; } article.center p b { color: red; } aside.left, aside.right { width: 300px; padding: 20px 0; } .wrap aside mark { background-color: #fff; color: #afafaf; padding: 0 20px; position: absolute; top: 0; height: 44px; overflow: hidden; line-height: 20px; font-size: 12px; text-align: justify; cursor: pointer; width: 260px; }
3> index.js部分代码
; (function() { // 构造函数 function View(elem, notes, rightWrap, leftWrap) { this.rightWrap = rightWrap; this.leftWrap = leftWrap; this.args = typeof elem === 'object' ? elem : document.getElementById(elem); this.notes = notes === undefined ? [] : notes; this.init(); } // 原型 View.prototype = { constructor: View, init: function() { var self = this; self.setSite(); self.bindClick(document.body, 'click', 'mark', function (e) { var target = e.target; if(this.style.height) { this.style.height = ''; self.resetTop(this, 'close'); return; } else { this.style.height = this.scrollHeight +'px'; self.resetTop(this, 'open'); } }); }, // 设定初始高度 setSite: function() { for(let i = 0; i < this.args.length; i++) { // 默认新建的批注距离顶部的高度 var swdTop = 0; var addMark = ''; // 计算当前批注的高度是否被覆盖,如果被覆盖,进行处理 if(i > 0) { if(this.args[i].offsetTop - this.args[i-1].offsetTop > $('.note-' + (i-1)).height()) { swdTop = this.args[i].offsetTop - 2 + 'px'; } else { swdTop = this.args[i-1].offsetTop + $('.note-' + (i-1)).height() - 2 + 'px'; } } else { swdTop = this.args[i].offsetTop - 2 + 'px'; } if(this.notes.length > 0) { addMark = '<mark class="note-' + i + '" style="top:' + swdTop + '">'+ this.args[i].innerHTML +':' + this.notes[i] + '</mark>'; } else { addMark = ''; } // 将得到的新标签动态添加到容器中 if(this.args[i].classList.length > 1 && this.args[i].classList[1] === 'nleft' && this.leftWrap !== undefined) { this.leftWrap.append(addMark); } else { this.rightWrap.append(addMark); } } }, // 重新设置元素高度 resetTop: function(elem, type) { let index = parseInt(elem.className.substr(elem.className.indexOf('-')+1)); for(; index < this.args.length-1; index++) { var swdNewTop = 0; var addTop = []; if(this.args[index+1].offsetTop - this.args[index].offsetTop > $('.' + elem.className).height()) { console.log('我们不需要执行任何东西了') return } else { if(type === 'open') { swdNewTop = this.args[index].offsetTop + $('.' + elem.className).height() + 8 + 'px'; addTop[index+1] = swdNewTop; } else { swdNewTop = this.args[index].offsetTop + $('.' + elem.className).height() + 'px'; } $('.note-' + (index+1)).attr('style', 'top:' + swdNewTop); return } } }, // 绑定元素点击事件 bindClick: function(elem, type, selector, fn) { if(fn === null) { fn = selector; selector = null; } elem.addEventListener(type, function(e) { var target = e.target; if(selector) { target = e.target; if(target.matches(selector)) { fn.call(target, e); } } else { fn(e); } }) } } // 对外公开方法 window.View = View; })();
4.通过扩展方法将拖拽方法扩展到jquery的一个实例方法
(function($) { $.fn.extend({ viewDocument: function(notes, rightWrap, leftWrap) { new View(this, notes, rightWrap, leftWrap); // 为了保证jQuery所有的方法能够实现链式访问,每个方法的最后必须返回this,即返回jquery的实例 return this; } }) })(jQuery);
5.在主界面上的调用方法
// 此内容从数据库中获取,这里只是举个例子 let notes = [ '山不在高,有仙则名;水不在深,有龙则灵;斯是陋室,惟吾德馨', '东边日出西边雨,道是无晴却有晴。一蓑烟雨任平生。桃李不言下自成蹊。会当凌绝顶,一览众山小。莫道不消魂,帘卷黄花瘦。', '得不到的永远在骚动,被宠爱的都有恃无恐,玫瑰的红,容易受伤的梦。', '青青园中葵,朝露待日晞。阳春布德泽,万物生光辉。常恐秋节至,焜黄华叶衰。百川东到海,何时复西归?少壮不努力,老大徒伤悲!' ]; // 获取注释所在的容器 let rightWrap = $('aside.right'); let leftWrap = $('aside.left'); $('.center b').viewDocument(notes, rightWrap, leftWrap);
相关推荐:
用js模仿word格式刷功能实现代码 [推荐]_javascript技巧
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash),_PHP教程
js word表格动态添加代码_javascript技巧
以上就是如何利用js实现仿world中批注功能的效果(附代码)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的如何利用js实现仿world中批注功能的效果(附代码)全部内容,希望文章能够帮你解决如何利用js实现仿world中批注功能的效果(附代码)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。