JQuery实现超链接和图片提示预览效果

其实现在的浏览器已经具有提示功能,只需要加入title功能就行了,但是这个提示效果很缓慢,用户体验并不是很好,所以有必要自己做一个。这次利用Jquery的DOM操作来实现一个简单的效果!

超链接提示

效果

当我们鼠标移动到提示1的时候,这时候会自动显示一哥提示,当鼠标移开的时候提示消失
在这里插入图片描述

首先写一个简单的HTML代码

html

		<p><a href="#" class="tooltip" title="111111链接提示1.">提示1</a></p>
		<p><a href="#" class="tooltip" title="222222链接提示2.">提示2</a></p>
		<p><a href="#" title="这是自带提示1">自带提示1</a></p>
		<p><a href="#" title="这是自带提示2">自带提示1</a></p>

css

#tooltip{
				position: absolute;
				width: auto;
			    height:auto;
				border: 1px #333333 solid;
				background-color: #666666;
				word-break: keep-all;
				white-space: nowrap;
				
			}

jQuery部分

为class的tooltip的超链接添加mouseover和mouseout事件,jQuery代码如下:

$("a.tooltip").mouseover(function(){
    //显示title
}).mouseout(function(){
    //隐藏title
})

具体思路:

(1)鼠标划入超链接时

  • 创建一个div元素,添加其中内容为title属性的值
  • 将要创建的元素追加到文档中
  • 为它设置x和y坐标,使它显示在鼠标位置的旁边

(2)鼠标移出超链接时

  • 移除div元素
				$("a.tooltip").mouseover(function(e){
					
					//创建div元素
					var tooltip = "<div id='tooltip'>"+this.title+"</div>";
					$("body").append(tooltip);//将它追加到文档中
					$("#tooltip").css({
						"top": (e.pageY) + "px",
						"left": (e.pageX) + "px"
					}).show("3000");
				}).mouseout(function(){
					this.title = this.myTitle;
					$("#tooltip").remove();
				})

这个时候会出现两个问题

  1. 鼠标滑过后,a标签中自带的title属性的提示也会显示出来
  2. 设置坐标过近,提示和鼠标离的过近,有时候可能会引起无法提示,影响用户体验
  3. 鼠标在超链接上移动时,提示效果不会移动

解决问题1

鼠标划入时,给对象添加一个新属性,并把title的值传给这个属性,然后清空属性title的值
将下述代码添加到设置div前面

                    this.myTitle = this.title;
					this.title = "";

鼠标划出时,将对象的myTitle属性的值再次复制给title

this.title = this.myTitle;

注意:为什么鼠标划出时要把属性值赋值给
属性title呢?
因为当鼠标滑出时,需要考虑再次滑入时的属性title的值,如果不将myTitle重新赋值给title的话,再次划入时,title属性值可就为空啦!!!

解决问题2

距离太近的话,那么我们稍微远离一点不就可以了吗,修改下坐标值呗

var x=10;
var y=20;
$("#tooltip").css({
    "top": (e.pageY+y) + "px",
    "left": (e.pageX+x) + "px"
})

解决问题3

解决提示效果跟随鼠标移动的话,只需要加上一个mousemove事件即可

$("a.tooltip").mousemove(function(e){
					$("#tooltip").css({
						"top": (e.pageY+y) + "px",
						"left": (e.pageX+x) + "px"
					}).show("fast");;
				});

这也基本问题就解决了

完整jQuery代码

        <script src="../../jquery-3.5.0.min.js"></script>
		<script>
			$(function(){
				var x=10;
				var y=20;
				
				$("a.tooltip").mouseover(function(e){
					this.myTitle = this.title;
					this.title = "";
					//创建div元素
					var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
					$("body").append(tooltip);//将它追加到文档中
					$("#tooltip").css({
						"top": (e.pageY+y) + "px",
						"left": (e.pageX+x) + "px"
					}).show("fast");
				}).mouseout(function(){
					this.title = this.myTitle;
					$("#tooltip").remove();
				}).mousemove(function(e){
					$("#tooltip").css({
						"top": (e.pageY+y) + "px",
						"left": (e.pageX+x) + "px"
					}).show("fast");;
				});				
			})
		</script>

至此超链接提示就告一段落了,我们稍作修改的话,就可以做成图片的预览效果啦

图片预览

html

		<ul>
		<li><a href="1.jpg"  class="tooltip" title="秦始皇陵博物馆"><img src="1.jpg" style="width: 100px; height: 100px;" alt="1111" /></a></li>
		<li><a href="1.jpg"  class="tooltip" title="秦始皇陵博物馆"><img src="1.jpg" style="width: 100px; height: 100px;" alt="2222" /></a></li>
		<li><a href="1.jpg"  class="tooltip" title="秦始皇陵博物馆"><img src="1.jpg" style="width: 100px; height: 100px;" alt="3333" /></a></li>
		<li><a href="1.jpg"  class="tooltip" title="秦始皇陵博物馆"><img src="1.jpg" style="width: 100px; height: 100px;" alt="4444" /></a></li>
		</ul>

css

	    <style type="text/css">
			li{
				float: left;
				list-style: none;
				padding: 10px;
			}
			
			#tooltip{
				position: absolute;
				width: 10px;
			    height:10px;
				border: 1px #00FFFF solid;
				background-color: #1890FF;
				word-break: keep-all;
				white-space: nowrap;
				
			}
		</style>

jQuery代码

		<script src="../../jquery-3.5.0.min.js"></script>
		<script>
			$(function(){
				var x=10;
				var y=20;
				
				$("a.tooltip").mouseover(function(e){
					this.myTitle = this.title;
					this.title = "";
					var imgTitle = this.myTitle? "<br/>"+this.myTitle:"";
					//创建div元素
					var tooltip = "<div id='tooltip'><img src='"+this.href+"' alt='预览图' />"+imgTitle+"</div>";
					$("body").append(tooltip);//将它追加到文档中
					$("#tooltip").css({
						"top": (e.pageY+y) + "px",
						"left": (e.pageX+x) + "px"
					}).show("1000");
				}).mouseout(function(){
					this.title = this.myTitle;
					$("#tooltip").remove();
				}).mousemove(function(e){
					$("#tooltip").css({
						"top": (e.pageY+y) + "px",
						"left": (e.pageX+x) + "px"
					});
				});
				
				
				
			})
		</script>

实现效果

在这里插入图片描述

当我的鼠标放在图片上时,就会将图片放大,具体思路和超链接提示方法一样,不再多做赘述
由于本人能力有限,欢迎大佬指正不足之处,感谢!!!如果觉得尚可请动动小手点个赞再走哟!

相关推荐
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。    《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的jQuery代码段进行了全方位的介绍演示。全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形图像、AJAX、算法、jQuery Mobile应用、浏览器、Cookies等jQuery技术内容,对提高网站开发人员设计人员的jQuery技术水平有指导作用。 超实用的jQuery代码段 目录: 序1 jQuery必知必会 VIII 序2 你绝对不可能全部做对的jQuery题 XVI 序3 最流行的前端面试题 XXIII 第1章 jQuery操作网页 1.1 显示或隐藏网页内容 1.2 切换页面的显示或隐藏 1.3 实现幻灯片式的淡入淡出效果 1.4 切换页面的淡入淡出 1.5 页面的滑动隐藏 1.6 切换页面的滑动 1.7 图片的动画效果 1.8 停止动画效果 1.9 不可不知的Callback回调 1.10 提高效率的链式(Chaining)操作 1.11 在新窗口中打开链接 1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位 1.27 实现可折叠效果 1.28 文本框内容自动缩进 1.29 禁止页面滚动的方法 1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 插入节点元素 2.6 复制节点元素 2.7 替换节点元素 2.8 删除节点元素 2.9 为元素绑定事件 2.10 如何从元素中除去HTML标签 2.11 如何限制文本域中字符的个数 2.12 如何选中页面上的所有复选框 2.13 禁用表单的回车键提交 2.14 禁用右键单击上下文菜单 2.15 IE下禁用文本选择功能 2.16 输入框获取焦点时文本高亮提示 2.17 实现多个输入框同步操作 2.18 在新窗口中打开外部链接 2.19 jQuery实现outerHTML属性 2.20 实现带固定表头的表格 2.21 为表单内控件设定缺省数值文本 2.22 防止单个页面重复提交按钮 2.23 取得列表控件选中的option对象 2.24 限制输入框仅接受特殊字符的输入 2.25 禁止页面内全部超链接 2.26 实现动态组合列表框 2.27 如何使用属性过滤器 2.28 如何测试某个元素是否可见 第3章 jQuery操作HTML事件 3.1 禁止或启用输入框 3.2 实时监听输入框字符的变化 3.3 实时监听输入框值的变化 3.4 绑定鼠标右键单击事件 3.5 双击不选中文本 3.6 通过单击事件添加或解除绑定 3.7 激活整个div层的单击事件 3.8 鼠标单击实现div的选取 3.9 模拟鼠标单击事件 3.10 设定时间间隔的方法 3.11 设定时间延迟的方法 3.12 延时显示子菜单的方法 3.13 通过事件获取页面加载时间 3.14 如何为动态添加的元素绑定事件处理函数 3.15 为表格行增加单击事件 3.16 用回车键模拟Tab键 第4章 jQuery操作CSS样式 4.1 使用addClass()函数动态添加样式类 4.2 使用removeClass()函数动态移除样式类 4.3 使用toggleClass()函数切换页面元素的样式类 4.4 为body增加class类支持 4.5 操作div的显示与隐藏 4.6 如何设定div始终居中显示 4.7 测试浏览器是否支持某些CSS 3属性 4.8 如何添加hover类到指定元素 4.9 基于URL地址为导航链接添加class样式 4.10 如何延迟添加class类 4.
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页