网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
链接文字
-> 样式很漂亮的鼠标悬停提示效果
样式很漂亮的鼠标悬停提示效果
作者:admin 发布时间:2010-10-8 5:55:48 发布人: admin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>样式很漂亮的鼠标悬停提示效果丨网页特效丨myjs.jz123.Cn</title> <style type="text/css"> *{font:normal 14px/150% '宋体'} a:link, a:visited{color:#00f; text-decoration:none} a:hover, a:active{color:#f00; text-decoration:underline} </style> <script> function wsug(e, str){ // http://myjs.jz123.cn/ var oThis = arguments.callee; if(!str) { oThis.sug.style.visibility = 'hidden'; document.onmousemove = null; return; } if(!oThis.sug){ var div = document.createElement('div'), css = 'top:0; left:0; position:absolute; z-index:100; visibility:hidden'; div.style.cssText = css; div.setAttribute('style',css); var sug = document.createElement('div'), css= 'font:normal 12px/16px "宋体"; white-space:nowrap; color:#666; padding:3px; position:absolute; left:0; top:0; z-index:10; background:#f9fdfd; border:1px solid #0aa'; sug.style.cssText = css; sug.setAttribute('style',css); var dr = document.createElement('div'), css = 'position:absolute; top:3px; left:3px; background:#333; filter:alpha(opacity=50); opacity:0.5; z-index:9'; dr.style.cssText = css; dr.setAttribute('style',css); var ifr = document.createElement('iframe'), css='position:absolute; left:0; top:0; z-index:8; filter:alpha(opacity=0); opacity:0'; ifr.style.cssText = css; ifr.setAttribute('style',css); div.appendChild(ifr); div.appendChild(dr); div.appendChild(sug); div.sug = sug; document.body.appendChild(div); oThis.sug = div; oThis.dr = dr; oThis.ifr = ifr; div = dr = ifr = sug = null; } var e = e || window.event, obj = oThis.sug, dr = oThis.dr, ifr = oThis.ifr; obj.sug.innerHTML = str; var w = obj.sug.offsetWidth, h = obj.sug.offsetHeight, dw = document.documentElement.clientWidth||document.body.clientWidth; dh = document.documentElement.clientHeight || document.body.clientHeight; var st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st +17 + h < dh + st && e.clientY + st + 17 || e.clientY + st - 5 - h; obj.style.left = left+ 10 + 'px'; obj.style.top = top + 10 + 'px'; dr.style.width = w + 'px'; dr.style.height = h + 'px'; ifr.style.width = w + 3 + 'px'; ifr.style.height = h + 3 + 'px'; obj.style.visibility = 'visible'; document.onmousemove = function(e){ var e = e || window.event, st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st +17 + h < dh + st && e.clientY + st + 17 || e.clientY + st - 5 - h; obj.style.left = left + 'px'; obj.style.top = top + 'px'; } }</script></head> <body> <a href="http://web.archive.org/web/20150322053343/http://myjs.jz123.cn/" onmouseover="wsug(event, '【网页特效】http://myjs.jz123.cn/<br />几千种网页特效供您选择')" onmouseout="wsug(event, 0)" target="_blank">网页特效</a><br/> <a href="http://web.archive.org/web/20150322053343/http://tool.jz123.cn/" onmouseover="wsug(event, '【站长工具】http://tool.jz123.cn/<br>站长工具、站长家园')" onmouseout="wsug(event, 0)" target="_blank">站长工具</a><br/> <a href="http://web.archive.org/web/20150322053343/http://www.zzgjj.com.cn/" onmouseover="wsug(event, '【链接平台】http://www.zzgjj.com.cn/<br />链接交换平台,发布链接交换交易信息')" onmouseout="wsug(event, 0)" target="_blank">链接平台</a><br/> <a href="http://web.archive.org/web/20150322053343/http://www.jz123.cn/" onmouseover="wsug(event, '【站长家园】http://www.jz123.cn/<br>站长家园,站长学习网')" onmouseout="wsug(event, 0)" target="_blank">站长家园</a><br/> <a href="http://web.archive.org/web/20150322053343/http://ad.jz123.cn/" onmouseover="wsug(event, '【广告代码】http://ad.jz123.cn/<br />广告代码丨js广告代码')" onmouseout="wsug(event, 0)" target="_blank">广告代码</a><br/> <a href="http://web.archive.org/web/20150322053343/http://www.bankcha.com/" onmouseover="wsug(event, '【银行查询】http://www.bankcha.com/<br>银行网点查询网站')" onmouseout="wsug(event, 0)" target="_blank">银行查询</a><br/> </body> </html>
样式很漂亮的鼠标悬停提示效果
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
单行间歇滚动显示的公告效果
下一篇:文章:
感应鼠标立体效果很强的导航菜单
本类浏览排行 »
感应鼠标立体效果很强的导航菜单
样式很漂亮的鼠标悬停提示效果
单行间歇滚动显示的公告效果
三款简洁Tab选项卡、滑动门
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
非常个性化的下拉列表样式
JS实现的始终固定在页面底部的菜单
本站推荐文章 »
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
滑动的div层做的动态菜单
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果