图片提示效果——巩固jQuery中的DOM操作

       在现代的浏览中,它们自带了超链接提示,但这个提示效果的响应速度是非常缓慢的,考虑到良好的人机交互,需要当鼠标移动到超链接的一瞬间就出现提示。

原图(未触发事件的效果图):


图片提示效果——巩固jQuery中的DOM操作_第1张图片

事件触发效果图:


图片提示效果——巩固jQuery中的DOM操作_第2张图片


图片提示效果——巩固jQuery中的DOM操作_第3张图片

实现这个效果的具体思路:

1、当鼠标滑入超链接

    (1)创建一个div元素,其内容为title属性的值

    (2)将创建的元素追加到文档中

    (3)设置x坐标和y坐标,使它显示在鼠标位置的旁边

2、当鼠标滑出超链接是,移除div元素

3、当鼠标在超链接上移动时,提示效果跟鼠标一起移动

html代码:


图片提示效果——巩固jQuery中的DOM操作_第4张图片

css代码:


图片提示效果——巩固jQuery中的DOM操作_第5张图片

js代码:


图片提示效果——巩固jQuery中的DOM操作_第6张图片


图片提示效果——巩固jQuery中的DOM操作_第7张图片

你可能感兴趣的:(图片提示效果——巩固jQuery中的DOM操作)