将页面内搜索结果高亮显示（使用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 做的滚动的特效,既可以 ...
随机推荐
- python 类(3) property
class PetCat(): """ 家猫类""" def __init__(self, name, age): self.name = ...
- 【hash+二分】Antisymmetry
[题目链接] https://loj.ac/problem/2452 [参考博客] https://blog.csdn.net/xgc_woker/article/details/82904631 [ ...
- Mysql-Sqlalchemy-ORM-many_to_many
orm_m2m.py from sqlalchemy import Table,Column,Integer,String,DATE, ForeignKey from sqlalchemy.orm i ...
- （转载）项目中表、类、包、JSP命名规范
对于Java(包括在jsp中)的代码,类名一律用pascal标记法,每个单词的头个字母大写:参数,方法一律用camel标记法,首字母是小写的,能不缩写的都不缩写! 项目名 = 数据库名 ...
- Flink概述
计算引擎 大数据计算引擎分为离线计算和实时计算,离线计算就是我们通常说的批计算,代表是Hadoop MapReduce.Hive等大数据技术.实时计算也被称作流计算,代表是Storm.Spark St ...
- JPanel实现滚动条
之前一直用JScrollPane里面放一个JTextArea,就可以在文本框内实现滚动条. 但是最近做一个小demo,需要在JPanel中实现滚动条,就找了下资料,做好了,现在记录一下,防止以后再用到 ...
- 获取指定开始行数$start，跨度$limit的文件内容
// 获取指定开始行数$page,跨度$step的文件内容 function getLine($file_name, $start, $limit) { $f = new SplFileObject( ...
- Java学习笔记【七、时间、日期、数字】
参考:http://www.runoob.com/java/java-date-time.html Date类 构造: Date() 使用当前的日期时间 Date(long millisec) 197 ...
- dhcpd.conf例解
ddns-update-style interim; //设置dhcp互动更新模式 ignore client-updates; //忽略客户端更新 #子网声明 subnet 192.168.12 ...
- Oracle【select from 语句】
Oracle[select from 语句] 1.select基本功能介绍1)投影操作:结果集是源表中的部分“列”2)选择操作:结果集是源表中的部分“行”3)选择操作+投影操作:结果集是源表中的部分 ...