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>

实现效果

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