本篇文章主要是对Jquery的Tabs内容轮换效果的实现代码进行了介绍。几行代码轻松搞定
创新互联公司是一家集网站建设,静乐企业网站建设,静乐品牌网站建设,网站定制,静乐网站建设报价,网络营销,网络优化,静乐网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
titleJquery的Tabs内容轮换效果实现代码,几行搞定/title
script
language="javascript"
type="text/javascript"
src="/Scripts/jquery-1.4.4.min.js"/script
style
type="text/css"
*
{
margin:0;
padding:0;}
body
{
font:12px
Verdana,
Geneva,
sans-serif;
color:#404040;}
.tabs
{
margin:10px
20px;
width:360px;
position:relative;
overflow:hidden;
height:1%;
height:160px;}
.tabs
span
{
z-index:2;
font-size:12px;
border:1px
solid
#d5d5d5;
width:95px;
height:25px;
line-height:25px;
text-align:center;
float:left;
margin-right:5px;
cursor:pointer;}
span.active
{
background-position:0
-25px;
background-color:#d5d5d5;}
#tab-01,
#tab-02,
#tab-03
{
position:absolute;
top:26px;
left:0;
width:338px;
padding:10px;
height:93px;
border:1px
solid
#d5d5d5;
z-index:1;}
#tab-02,
#tab-03
{
display:none;}
/style
script
type="text/javascript"
$(document).ready(function
()
{
$('.tabs
span').mouseover(function
()
{
//div隐藏
$('.tabs
div').hide();
//查找.tabs
span同辈元素span
后面紧邻的同辈元素div显示
$(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();
});
});
/script
/head
body
div
class="tabs"
!--
默认第一个tab为激活状态
--
span
class="active"热点新闻/span
div
id="tab-01"news/div
span娱乐新闻/span
div
id="tab-02"enteriment/div
span就业形势/span
div
id="tab-03"jobs/div
/div
/body
/html
页面加载等待特效，当数据加载完成效果消失的代码如下:
$.ajax({
url:"",
type:"post",
data:{"xx":"xx"},
beforeSend:function(){
//这里是开始执行方法，显示效果，效果自己写
},
complete:function(){
//方法执行完毕，效果自己可以关闭，或者隐藏效果
},
success:function(){
//数据加载成功
},
error:function(){
//数据加载失败
}
});
本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考，具体如下：
这是又一个网页上的在线客服代码，不错，可以用一下哦。与其它客服不一样的地方呢？无非是在网页左侧滑出，可对客服类型分组，又多了一个功能，哈哈。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
title网页左侧浮动jquery在线QQ客服代码/title
style
*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}
/*
QQbox
*/
.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px
0;position:fixed;}
*html,
*html
body{background-image:url(about:blank);background-attachment:fixed;}
*html
.QQbox{position:absolute;
top:expression(eval(document.documentElement.scrollTop));}
.QQbox
.press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}
.QQbox
.Qlist{float:left;width:410px;background:url(images/bj01.png)
no-repeat;background-position:1px
0px;height:436px;display:block;overflow:hidden;zoom:1;}
.QQbox
.Qlist
.infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}
.QQbox
.Qlist
.con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}
.QQbox
.Qlist
.con
ul
li{height:31px;list-style:none;margin-left:35px;}
.QQbox
.Qlist
.con
ul
li
a{font-size:13px;margin-left:18px;text-decoration:none;}
.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}
.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png)
no-repeat;margin-top:-45px;margin-left:220px;}
/style
script
type="text/javascript"
src="jquery-1.6.2.min.js"/script
/head
body
div
id="divQQbox"
class="QQbox"
div
id="divOnline"
class="Qlist"
div
class="OnlineLeft"
div
class="con"
ul
li售前咨询a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li网站建设a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li网站优化a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li整合营销a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li售后服务a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
/ul
/div
/div
div
class="OnlineBtn"
/div
/div
/div
script
type="text/javascript"
$(function(){
//建站热线展开效果
$("#divQQbox").hover(
function(){
$(this).stop(true,false);
$(this).animate({left:0},300);
},
function(){
$(this).animate({left:-276},149);
}
)
});
/script
/body
/html
希望本文所述对大家jQuery程序设计有所帮助。
以下是全部代码，请自行修改图片及js路径
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
meta http-equiv="Content-Language" content="zh-CN"
meta name="Keywords" content="SuperSlide,jQuery-实用焦点图"
meta name="Description" content="SuperSlide,jQuery-实用焦点图"
titleSuperSlide - 实用焦点图/title
script src=""/script
script src="jquery.SuperSlide.2.1.1.js"/script
/head
body
style type="text/css"
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.focusBox { position: relative; width: 320px; height: 240px; overflow: hidden; font: 12px/1.5 Verdana, Geneva, sans-serif; text-align: left; background: white; }
.focusBox .pic img { width: 320px; height: 240px; display: block; }
.focusBox .txt-bg { position: absolute; bottom: 0; z-index: 1; height: 36px; width:100%; background: #333; filter: alpha(opacity=40); opacity: 0.4; overflow: hidden; }
.focusBox .txt { position: absolute; bottom: 0; z-index: 2; height: 36px; width:100%; overflow: hidden; }
.focusBox .txt li{ height:36px; line-height:36px; position:absolute; bottom:-36px;}
.focusBox .txt li a{ display: block; color: white; padding: 0 0 0 10px; font-size: 12px; font-weight: bold; text-decoration: none; }
.focusBox .num { position: absolute; z-index: 3; bottom: 8px; right: 8px; }
.focusBox .num li{ float: left; position: relative; width: 18px; height: 15px; line-height: 15px; overflow: hidden; text-align: center; margin-right: 1px; cursor: pointer; }
.focusBox .num li a,.focusBox .num li span { position: absolute; z-index: 2; display: block; color: white; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; }
.focusBox .num li span { z-index: 1; background: black; filter: alpha(opacity=50); opacity: 0.5; }
.focusBox .num li.on a,.focusBox .num a:hover{ background:#f60; }
/style
div class="focusBox" style="margin:0 auto"
ul class="pic"
lia href="#" target="_blank"img src="images/1.jpg"//a/li
lia href="#" target="_blank"img src="images/2.jpg"//a/li
lia href="#" target="_blank"img src="images/3.jpg"//a/li
lia href="#" target="_blank"img src="images/4.jpg"//a/li
/ul
div class="txt-bg"/div
div class="txt"
ul
lia href="#"SuperSlide美女福利图Quiet/a/li
lia href="#"SuperSlide美女福利图DoubleLi/a/li
lia href="#"SuperSlide美女福利图爱的练习曲/a/li
lia href="#"SuperSlide美女福利图夜莺/a/li
/ul
/div
ul class="num"
lia1/aspan/span/li
lia2/aspan/span/li
lia3/aspan/span/li
lia4/aspan/span/li
/ul
/div
script type="text/javascript"
jQuery(".focusBox").slide({
titCell : ".num li",
mainCell : ".pic",
effect : "fold",
autoPlay : true,
trigger : "click",
startFun : function (i) {
jQuery(".focusBox .txt li").eq(i).animate({
"bottom" : 0
}).siblings().animate({
"bottom" : -36
});
}
});
/script
/body
/html
本文实例讲述了jQuery实现行文字链接提示效果的方法。分享给大家供大家参考。具体实现方法如下：
复制代码
代码如下:!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/
title一行文字的提示效果/title
script
type='text/javascript'
src='/ajaxjs/jquery1.3.2.js'/script
script
type="text/javascript"
$(function(){
$(".div
ul
li").hover(function(e){
var
x=e.pageX;
var
y=e.pageY;
var
div=$("div
id='div_show'/div");
var
text=$(this).html();
$(this).append(div);
$("#div_show").html(text).css({"height":"25px","position":"absolute","zIndex":"99","backgroundColor":"#38F758","whiteSpace":"nowrap","paddingLeft":"15px","paddingRight":"15px","top":y+10+"px","left":x+10+"px"});
$("this").children("#div_show").show();
},function(){
$(this).children("#div_show").remove();
})
})
/script
style
type="text/css"
ul{
margin:0;
padding:0;}
ul
li{
list-style:none;}
.div{
width:200px;
float:left;
display:inline;
}
.div
ul
li{
width:220px;
padding:0px
6px;
line-height:25px;
height:25px;
margin-top:1px;
cursor:pointer;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;}
/style
/head
body
div
class="div"
ul
li好吧，现在流行HTML5，我就给它标题加上个HTML5吧/li
liRaphael
js库是在webrebuild交流会上听到的/li
li我们来简单了解一下上文中提到的css
appearance/li
/ul
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
