宝哥软件园

jQuery实现图片信息的浮动显示实例代码

编辑:宝哥软件园 来源:互联网 时间:2021-11-16

如图

复制代码代码如下: html head meta charset=' utf-8 '/style Li { list-style : none;float:left右边距:10 pxborder:1px实心# AAAAA } #工具提示{位置:绝对;}/样式脚本类型=' text/JAVAScript ' src=' http :/script/jquery-1。4 .2 .量滴js '/script script $(function(){ var x=10;var y=20$('a.tooltip ').hover(function(){ var title=this。标题;$('a.tooltip ').attr('newTitle ',这个。TItle);this . title=var $ div=$(' div id=' NewTip ' img src=' this。href ' '/br/'此。new TItle '/div ');$(“正文”).追加($ div);$ div。CSS({ '位置' : '绝对','背景' : '银色' }).show(' fast ');},function(){ this。标题=这个。新标题;$('#newTip ').移除();}).鼠标移动(函数(e){ var $div=$('#newTip ').css({'left':(e.pageX x) 'px ',' top ' :(e . Pagey)' px ' }).show(' fast ');});})/脚本/头体ul lia href=' images/apple _ 1 _ bigger。jpg ' class='工具提示' title='苹果iPod ' img src=' http : images/apple _ 1。jpg ' alt='苹果iPod/a/a/Li lia href=' images/apple _ 2 _ big。jpg ' class='工具提示' title='苹果iPod nano ' img src=' http : images/apple _ 2。jpg ' alt='苹果iPod nano/a/a/Li lia href=' images/apple _ 3 _ big。jpg ' class='工具提示' title='苹果iPhone ' img src=' http : images/apple _ 3。jpg ' alt='苹果iPhone/a/a/Li lia href=' images/apple _ 4 _ big。jpg ' class='工具提示' title ' title='苹果MAC ' img src=' http : images/apple _ 4。jpg ' alt='苹果MAC '/a/Li/ul/body/html

更多资讯
游戏推荐
更多+