jQuery鼠标悬浮链接弹出跟随图片示例代码

本文介绍了一种常用的效果，即当鼠标滑过链接时，会出现一个随鼠标指针移动的图层。在实际应用中，通常是一些说明文字或图片的链接等。下面是代码示例：

！键入html heartheta charset=' GB 2312 ' title we/title style type=' text/CSS ' body { margin :0；padding:40px背景# ffffont:80% Arial，Helvetica，无衬线字体；color: # 555线高：180%；} a { text-decoration : none；color: # f30} p { clear:bothmargin:0padd :5 em 0；} img { border:none} #截图{ position:absoluteborder:1px固体# ccc背景技术： # 333；padding:5pxdisplay:nonecolor: # fff}/style script type=' text/JavaScript ' src=' http : mytest/jQuery/jQuery-1 . 8 . 3 . js '/script script type=' text/JavaScript ' this . screenshottpreview=function(){ xOffset=10；yOffset=30$('a .截图')。悬停(函数(e){ this . t=this . title；var c=(this.t！='') ? 'br/“this . t :”；$(“body”)。追加(' p id='截图' img src=' this . rel ' '/' c '/p ')；$(' #截图')。css('top '，(e.pageY - xOffset) 'px ')。css('left '，(e . PageX YofSet)' px ')。fadeIn(' fast ')；}，function(){ this . title=this . t；$(' #截图')。移除()；});$('a .截图')。mousemove(函数(e){ $(' #截图')。css('top '，(e.pageY-xOffset) 'px ')。css('left '，(e . pagex yOffset)' px ')；});};$(文档)。ready(function(){ screenshottpreview()；});/script/head dya href=' # ' class='截图' title='蚁族' rel='mytest/demo/thesmall.jpg '蚁族/a欢迎您/body/html渲染：

以上代码符合我们的要求。下面简单介绍一下：的实现过程。注：1。这个。截图Preview=function () {}，声明一个函数来实现如下效果。在这个效果中，这实际上可以省略，它指向窗口。2.xOffset=10，它声明了一个变量来指定鼠标指针和弹出图片之间的横向距离。3.yooffset=30，它声明了一个变量来指定鼠标指针和弹出图片之间的纵向距离。4.$ ('a .截图')。悬停(function(e){}，function (e) {})，它指定当鼠标移动到和离开链接时要执行的功能。5.this.t=this.title，将链接的title属性值赋给t属性，其中这是指向当前鼠标悬停的链接对象。6.var c=(this.t！='') ?Br/' this.t : ' '，如果this.t不为空，即有标题属性值，则插入新的行字符，连接当前标题内容，否则，将c设置为空。7.$(“body”)。追加(' p id='截图' img src=' ' this。rel''/'c'/p ')，在正文中添加图片和相关描述。8.$ ('#截图')。CSS ('top '，(例如pagey-xoffset)' px ')。CSS ('left '，(例如pagexyoffset)' px ')。fadein ('fast ')，设置p元素的顶部和左侧属性值，采用。9.this.title=this.t，把标题内容赋给this.title，其实没有这句话是没有问题的，有点多余。10.$(' #截图')。移除()，移除p元素。11.$ ('a .截图')。mousemove(函数(e) {})，用于设置鼠标指针移动时要跟随的图片。12.$ ('#截图')。CSS ('top '，(例如pagey-xoffset)' px ')。CSS ('left '，(e. pagexyoffset)' px ')，设置p元素的上下左右属性值，可以达到如下效果。

以上就是本文的全部内容，希望对大家的学习有所帮助。