2顶

兼容性很好的jquery提示层特效

稿源：互联网 2022-04-02 21:40:51 点击： 3102 撤稿纠错

不错的jquery提示层，鼠标经过弹出显示，兼容当前各种浏览器。

以下讨论的是和jquery 提示层兼容相关的兼容性很好的jquery提示层特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=utf-8">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 兼容各种浏览器简单实用jquery提示框 站长特效网</title>
<style type="text/css">
html, body, div {
    margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 vertical-align: baseline;
    font-family: "Verdana","lucida sans",Sans-serif;
 font-size: 12px;
}
html, body {
    min-height: 100%;
 color: #FFFFFF;
 background-repeat: repeat-x;
 background-position: top;
 background-color: #161f2a;
}
.body_zzjs_net p {
    margin-bottom: 10px;
 clear: both;
}
.body_zzjs_net p a {
 width: 150px;
 font-size: 1.5em;
 color: #DDD;
 border: 2px solid #DDD;
 padding: 5px 0;
 display: block;
 text-align: center;
}
.wwwzzjsnet {
 width:250px;
    position: absolute;
    z-index: 999;
    left: -9999px;
    background-color: #dedede;
    padding: 5px;
    border: 1px solid #fff;
}
.wwwzzjsnet p {
    color: #fff;
    background-color: #222;
    padding: 7px 7px;
 margin: 0;
}
.wwwzzjsnet p.zzjsnet01 {
 background-color: #ff0000;
}
.wwwzzjsnet p.zzjsnet02 {
 background-color: #1c8600;
}
.wwwzzjsnet p.zzjsnet03 {
 background-color: #005fa8;
}
</style>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript">
function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
  $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
  var my_tooltip = $("#"+name+i);
  $(this).removeAttr("title").mouseover(function(){
    my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
  }).mousemove(function(kmouse){
    my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
  }).mouseout(function(){
    my_tooltip.fadeOut(400);
  });
 });
}
$(document).ready(function(){
  simple_tooltip("a.zzjs_net","www_zzjs_net");
});
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新后看效果<br />
<div class="body_zzjs_net">
 <p><a href="#" class="zzjs_net">站长特效一号</a></p>
 <p><a href="#" class="zzjs_net">站长特效二号</a></p>
 <p><a href="#" class="zzjs_net">站长特效三号</a></p>
 <p><a href="#" class="zzjs_net">站长特效四号</a></p>
 <div id="www_zzjs_net0" class="wwwzzjsnet"><p>站长特效网，以质量为核心，以实用为目的，打造一流网页特效站，欢迎收藏本站！</p></div>
 <div id="www_zzjs_net1" class="wwwzzjsnet"><p class="zzjsnet01">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站，欢迎收藏本站！</p></div>
 <div id="www_zzjs_net2" class="wwwzzjsnet"><p class="zzjsnet02">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站，欢迎收藏本站！</p></div>
 <div id="www_zzjs_net3" class="wwwzzjsnet"><p class="zzjsnet03">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站，欢迎收藏本站！</p></div>
</div>
</body>
</html>

关于兼容性很好的jquery提示层特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010123066672.shtml方便下次再访问哦。

·上一篇： 点击链接展开和关闭图层
·下一篇： 通常用于评论评价后后弹出浮动并自动消失的提示层效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

兼容性很好的jquery提示层特效

文章分类LIST >>返回首页

最新游戏

最新新闻