将页面内搜索结果高亮显示（使用mark.js），且页面顶部定位到第一个搜索结果
<!DOCTYPE>
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
mark {
background: orange;
color: black;
}
</style>
</head> <body>
<input type="text" value="test">
<div id="context">
Lorem test ipsum dolor sit ��met, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, n�� sea takimata 1 sanctus est Lorem ipsum dolor sit amet. L?rem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lor-em ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.
Lorem ipsum dolor sit ��met, test consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, n�� sea takimata 1 sanctus est Lorem ipsum dolor sit amet. L?rem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lor-em ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.Lorem ipsum dolor sit ��met, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, n�� sea takimata 1 sanctus est Lorem ipsum dolor sit amet. L?rem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lor-em ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum. Lorem test ipsum dolor sit ��met, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, n�� sea takimata 1 sanctus est Lorem ipsum dolor sit amet. L?rem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lor-em ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.
Lorem ipsum dolor sit ��met, test consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, n�� sea takimata 1 sanctus est Lorem ipsum dolor sit amet. L?rem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lor-em ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.Lorem ipsum dolor sit ��met, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, one, n�� sea takimata 1 sanctus est Lorem ipsum dolor sit amet. L?rem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam lor-em ipsum nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lore'm ipsu%m dolor sit amet. Lo!rem ipsum.
<span>简介.历史沿革.古代史</span>
</div>
<script src="http://10.10.1.45/static/libs/jquery/jquery-1.11.2.min.js"></script>
<script src="jquery.mark.min.js"></script>
<script type="text/javascript"> $(function() {
$("input").on("input.highlight", function() {
try{
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm); if(searchTerm == ""){
//查询结果内容在页面定位
$('body,html').animate({scrollTop: $("mark:contains('" + searchTerm + "')").offset().top+"px"}, 500);
}else{
//查询结果内容在页面定位
$('body,html').animate({scrollTop: $("mark:contains('" + searchTerm + "')").offset().top-200+"px"}, 500);
}
}catch(e){ }
}).trigger("input.highlight").focus();
}); </script>
</body>
</html>
将页面内搜索结果高亮显示（使用mark.js），且页面顶部定位到第一个搜索结果的更多相关文章
- 用JS或jQuery访问页面内的iframe,兼容IE/FF
用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...
- 禁止页面内按F5键进行刷新（扩展知识：禁止复制信息内容）
禁止页面内按F5键进行刷新: //禁止页面内按F5键进行刷新 function f_DisableF5Refresh(event) { var e = event || window.event; v ...
- 使用iframe框架时，实现子页面内跳转到整个页面，而不是在子页面内跳转
首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图 在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...
- 转:JS线程和JS阻塞页面加载的问题
前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...
- 前端js保存页面为图片下载到本地
前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...
- JS获取中文拼音首字母，并通过拼音首字母高速查找页面内的中文内容
实现效果: 图一: 图二: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGVzdGNzX2Ru/font/5a6L5L2T/fontsize/400/f ...
- Win10 UWP 开发系列：使用SplitView实现汉堡菜单及页面内导航
在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类Ap ...
- js对页面中的内容进行拼音搜索，只对后台已经传过来的页面数据进行索引
实现输入拼音(可以使用拼音首字母来查),来查询出已经存在于页面的数据 注意:这种写法只能适用于页面中已经存在的数据进行检索,大体意思是将本页内的数据拼接成一个字符串,然后通过该字符串去检索匹配的字符串 ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
随机推荐
- kettle 创建作业发送邮件
1.创建作业 . 2. 发送邮件配置,测试邮件 发件地址可以使用的QQ.126.163等邮箱 smtp server的填写smtp.qq.com或者smtp.126.com等等都可以这里我用Q163邮 ...
- python模块-paramiko-修改源码(demo实例)
在github上下载一个paramiko,找到demos目录,复制到pycharm项目里面 这是因为python3传来得数据是bates数据类型,需要decode()一下就可以,在demos下得int ...
- 一致性算法—Paxos、Raft、ZAB
一致性算法—Paxos.Raft.ZAB 2019年04月21日 20:35:09 bulingma 阅读数 64更多 分类专栏: 分布式概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY ...
- vs2017 不能加载.vdproj
需要添加Microsoft Visual Studio Installer Projects扩展 下载地址:https://marketplace.visualstudio.com/items?it ...
- ACM算法练习-——ZJU1164-Software CRC
具体的题目描述点此链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1164 这道题,说实话 ...
- axios配置
import axios, { isCancel } from 'axios' import { md5 } from 'vux' import util from '@/libs/util' imp ...
- 管家婆crm9.2 sp2升级问题求助及解决方案
升级过程中发生如下问题: 弹出对话框1:升级完成,但是有错误产生. 弹出对话框2:升级数据库发生错误:An attempt was made to load an assembly from a ne ...
- sda.Update批量更新数据
老方法了,重新做个记录. string connStr = ConfigurationManager.ConnectionStrings["constring"].ToString ...
- 12 Mysql之工作中常用操作
Mysql 专题讲解 一.用户创建与权限管理 a) 创建和删除用户 创建用户: CREATE USER jack@localhost; UPDATE USER SET password=passwo ...
- 文件下载不可以使用ajax
参看网站:https://blog.csdn.net/fan510988896/article/details/71520390 总结一下为什么下载请求不能放在ajax里发送: 原因:因为respon ...