1200字范文 > JQuery实现超链接和图片提示预览效果

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

时间：2020-08-12 15:02:18

文章目录

超链接提示效果htmlcssjQuery部分解决问题1解决问题2解决问题3 完整jQuery代码图片预览htmlcssjQuery代码实现效果

其实现在的浏览器已经具有提示功能，只需要加入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();})

这个时候会出现两个问题

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

解决问题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代码

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

图片预览

html

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>