Jquery 效果集结号
来源：互联网 发布：opencv vibe算法改进 编辑：程序博客网 时间：2024/04/28 06:37
一、部分效果集结 (此仅个人收集,有待于扩展)
1、导航栏下拉
2、树形菜单的伸展
3、图片横向切换
4、图片纵向切换
5、新闻滚动
6、选项卡切换
7、列表图片块横向滚动
8、插件的使用(放大镜的效果)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航栏下拉</title>
<style type="text/css">
ul{ list-style:none;}
#navigation {width:784px;padding:8px;margin:8px auto;background:#3B5998;height:18px;}
#navigation ul li {float:left;margin-right:14px;position: relative;z-index:100;}
#navigation ul li a {display:block;padding:0 8px;background:#EEEEEE;font-weight:700;}
#navigation ul li a:hover {background:none;color:#fff;}
#navigation ul li ul{background-color: #88C366; position: absolute; width: 80px;
overflow:hidden;display:none;}
#navigation ul li:hover ul{background-color: #88C366;position: absolute;width: 150px;display:block;}
#navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 200px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation ul li:has(ul)').hover(function(){
$(this).children('ul').slideDown('show');
},function(){
$(this).children('ul').slideUp('show');
}).trigger('mouseleave');
});
</script>
</head>
<body>
<!--导航开始-->
<div id="navigation">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">衬 衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li><a href="#">卫 衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li><a href="#">裤 子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!--导航结束-->
</body>
</html>
************************2>树形菜单的伸展*******************************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>树形节点的伸展</title>
<style type="text/css">
ul{ list-style:none;}
.global_module {position:relative;background:#EEEEEE;padding-bottom:8px;}
.module_up_down{position:absolute;top:9px;right:10px;cursor:pointer;}
.global_module h3 {height:26px;background:#3B5998;color:#FFF;line-height:26px;text-indent:6px;}
.procatalog ul {padding:5px 0 5px 15px;}
.procatalog .m-treeview{background:#FFFFFF;}
.procatalog .m-treeview li span {cursor: pointer;}
.procatalog .m-treeview li.m-expanded {padding-left:16px;background:url('images/treeview-expanded.gif') no-repeat 0 0;}
.procatalog .m-treeview li.m-expanded ul li {list-style-image: url('images/treeview-item.gif');}
.procatalog .m-treeview li.m-collapsed {padding-left:16px;background:url('images/treeview-collapsed.gif') no-repeat 0 0;}
.procatalog .m-treeview li.m-collapsed ul{display:none;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*Method I
$('.m-expanded span').toggle(function(){
$(this).next().show();
$(this).parent().removeClass('m-expanded').addClass('m-collapsed');
},function(){
$(this).next().hide();
$(this).parent().removeClass('m-collapsed').addClass('m-expanded');
});
$('.module_up_down img').toggle(function(){
$(this).parent().prev('ul').slideUp('show');
$(this).attr('src','images/up.gif');
},function(){
$(this).parent().prev('ul').slideDown('show');
$(this).attr('src','images/down.gif');
});
*/
/*
Method II
*/
$('.m-treeview > li >span').click(function(){
var $ul=$(this).siblings('ul');
if($ul.is(':visible')){
$ul.hide();
$ul.parent().attr('class','m-collapsed');
}else{
$ul.show();
$ul.parent().attr('class','m-expanded');
}
});
$('.module_up_down').toggle(function(){
var $self=$(this);
$self.prev().slideToggle('fast',function(){
//$('img',$self).attr('src','images/up.gif');
$self.children('img').attr('src','images/up.gif');
});
},function(){
var $self=$(this);
$self.prev().slideToggle('fast',function(){
//$('img',$self).attr('src','images/down.gif');
$self.children('img').attr('src','images/down.gif');
});
});
});
</script>
</head>
<body>
<div class="global_module procatalog">
<h3>产品分类</h3>
<ul class="m-treeview">
<li class="m-expanded">
<span>衬衫</span>
<ul>
<li><span>短袖衬衫</span></li>
<li><span>长袖衬衫</span></li>
</ul>
</li>
<li class="m-expanded">
<span>卫衣</span>
<ul>
<li ><span>开襟卫衣</span></li>
<li ><span>套头卫衣</span></li>
</ul>
</li>
<li class="m-expanded">
<span>裤子</span>
<ul>
<li><span>休闲裤</span></li>
<li><span>免烫卡其裤</span></li>
<li><span>牛仔裤</span></li>
<li><span>短裤</span></li>
</ul>
</li>
</ul>
<p class="module_up_down"><img src="images/down.gif" alt="" /></p>
</div>
</body>
</html>
************************3>图片横向切换******************************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现图片横向切换</title>
<style type="text/css">
/* 第二步 添加CSS样式*/
ul{ list-style:none;}
.tr{text-align:right;}
.tvShow{ width:600px;position:relative; overflow:hidden;}
.tvShow_cont{ height:220px; width:6000px;}
.tvShow_index{ position:absolute; left:450px; bottom:5px; font-weight:bold; line-height:16px; color:#fff;}
.tvShow_index li{ float:left; width:21px; height:16px; cursor:pointer; position:relative; text-align:center; background-color:#FF6633; margin-right:1px;}
.tvShow_index li.on{ background-color:#66FFCC;}
.tvShow_index li.on span{ display:block; width:5px; height:3px;background:url(images/tvshow_arrow.gif); position:absolute; left:8px; top:-8px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* 第三步 创建js动态效果*/
$(document).ready(function(){
//alert('ok');
var TV_INTTERVEL;
$('#tvShow_index li').each(function(i){
var tvShow_cont=$('#tvShow_cont');
var tvShow_index=$('#tvShow_index li');
var TV_index=1;
function tv_srcoll(n){
if(TV_INTTERVEL){
clearTimeout(TV_INTTERVEL);
}
tvShow_index.removeClass();
tvShow_index.eq(n).addClass('on');
TV_index=n+1>=tvShow_index.length?0:n+1;
tvShow_cont.animate({marginLeft:-600*n+'px'},300);
TV_INTTERVEL=setTimeout(function(){tv_srcoll(TV_index)},5000);
};
setTimeout(function(){tv_srcoll(TV_index)},5000);
});
});
</script>
</head>
<body>
<!--第一步 搭建HTML结构-->
<div class="tvShow">
<div class="tvShow_cont" id="tvShow_cont">
<a href="#"><img src="images/tvshow/p1.jpg" width="600" height="220" /></a>
<a href="#"><img src="images/tvshow/p2.jpg" width="600" height="220" /></a>
<a href="#"><img src="images/tvshow/p3.jpg" width="600" height="220" /></a>
<a href="#"><img src="images/tvshow/p4.jpg" width="600" height="220" /></a>
</div>
<ul class="tvShow_index tr" id="tvShow_index">
<li class="on"><span></span>1</li>
<li><span></span>2</li>
<li><span></span>3</li>
<li><span></span>4</li>
</ul>
</div>
</body>
</html>
************************4>图片纵向切换*****************************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现图片纵向切换</title>
<style type="text/css">
/* 第二步 添加CSS样式*/
ul{ list-style:none;}
.tr{text-align:right;}
.tvShow{ width:600px; position:relative;}
.tvShow_cont{ height:220px; overflow:hidden;}
.tvShow_index{ position:absolute; right:4px; bottom:5px; font-weight:bold; line-height:16px; color:#fff;}
.tvShow_index li{ float:left; width:21px; height:16px; cursor:pointer; position:relative; text-align:center; background-color:#FF6633; margin-right:1px;}
.tvShow_index li.on{ background-color:#66FFCC;}
.tvShow_index li.on span{ display:block; width:5px; height:3px;background:url(images/tvshow_arrow.gif); position:absolute; left:8px; top:-8px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* 第三步 创建js动态效果*/
$(document).ready(function(){
//alert('ok');
var TV_INTTERVEL;
$('#tvShow_index li').each(function(i){
var tvShow_cont=$('#tvShow_cont');
var tvShow_index=$('#tvShow_index li');
var TV_index=1;
function tv_srcoll(n){
if(TV_INTTERVEL){
clearTimeout(TV_INTTERVEL);
}
tvShow_index.removeClass();
tvShow_index.eq(n).addClass('on');
TV_index=n+1>=tvShow_index.length?0:n+1;
tvShow_cont.animate({scrollTop:220*n+'px'},300);
TV_INTTERVEL=setTimeout(function(){tv_srcoll(TV_index)},5000);
};
$(this).mouseover(function(){
tvShow_cont.stop();
tv_srcoll(i);
})
setTimeout(function(){tv_srcoll(TV_index)},5000);
});
});
</script>
</head>
<body>
<!--第一步 搭建HTML结构-->
<div class="tvShow">
<div class="tvShow_cont" id="tvShow_cont">
<a href="#"><img src="images/tvshow/p1.jpg" width="600" height="220" /></a>
<a href="#"><img src="images/tvshow/p2.jpg" width="600" height="220" /></a>
<a href="#"><img src="images/tvshow/p3.jpg" width="600" height="220" /></a>
<a href="#"><img src="images/tvshow/p4.jpg" width="600" height="220" /></a>
</div>
<ul class="tvShow_index tr" id="tvShow_index">
<li class="on"><span></span>1</li>
<li><span></span>2</li>
<li><span></span>3</li>
<li><span></span>4</li>
</ul>
</div>
</body>
</html>
************************5>新闻滚动********************************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻滚动</title>
<style type="text/css">
ul{ list-style:none;}
.global_module {position:relative;background:#EEEEEE;padding-bottom:8px;}
.module_up_down{position:absolute;top:9px;right:10px;cursor:pointer;}
.global_module h3 {height:26px;background:#3B5998;color:#FFF;line-height:26px;text-indent:6px;}
.news ul {padding:5px 0 5px 15px;}
.scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;}
.scrollNews li{height:20px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $this=$('.scrollNews');
var scrollTime;
$this.hover(function(){
clearInterval(scrollTime);
},function(){
scrollTime=setInterval(function(){
newscroll($this);
},3000);
}).trigger('mouseleave');
});
function newscroll(obj){
var $f_ul=obj.find('ul:first');
var lineheight_li=$f_ul.find('li:first').height();
$f_ul.animate({"marginTop":-lineheight_li+'px'},600,function(){
$f_ul.css({marginTop:0}).find('li:first').appendTo($f_ul);
});
}
</script>
</head>
<body>
<div class="global_module news">
<h3>最新动态</h3>
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
<p class="module_up_down"><img src="image/down.gif" alt="" /></p>
</div>
</body>
</html>
**************************6>选项卡切换******************************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡效果</title>
<style type="text/css">
ul{ list-style:none;}
.tab {width:380px;}
.tab_menu {clear:both;}
.tab_menu li {float:left;text-align:center;cursor:pointer;list-style:none;padding:1px 6px;margin-right:4px;
background:#F1F1F1;border:1px solid #898989;border-bottom:none;}
.tab_menu li.hover {background:#DFDFDF;}
.tab_menu li.selected {color:#FFF;background:#6D84B4;}
.tab_box {clear:both;border:1px solid #898989;}
.tab2 {width:380px;}
.tab_menu2{clear:both;}
.tab_menu2 li {float:left;text-align:center;cursor:pointer;list-style:none; padding:1px 6px;margin-right:4px;
background:#F1F1F1;border:1px solid #898989;border-bottom:none;}
.tab_menu2 li.hover {background:#DFDFDF;}
.tab_menu2 li.selected {color:#FFF;background:#6D84B4;}
.tab_box2 {clear:both;border:1px solid #898989;}
.hide{display:none}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$('.tab_menu ul li').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
$('.tab_box div').eq($('.tab_menu ul li').index(this)).show().siblings().hide();
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
$('.tab_menu2 ul li').each(function(i){
$(this).mouseover(function(){
$(this).addClass('selected').siblings('li').removeClass('selected');
$('.tab_box2 div').eq(i).show().siblings().hide();
});
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">产品属性</li>
<li>产品尺码表</li>
<li>产品介绍</li>
</ul>
</div>
<div class="tab_box">
<div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。
</div>
<div class="hide">
来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。
</div>
<div class="hide">
世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
</div>
</div>
</div>
<div class="tab2">
<div class="tab_menu2">
<ul>
<li class="selected">产品属性</li>
<li>产品尺码表</li>
<li>产品介绍</li>
</ul>
</div>
<div class="tab_box2">
<div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。
</div>
<div class="hide">
来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。
</div>
<div class="hide">
世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
</div>
</div>
</div>
</body>
</html>
******************************8>列表图片块横向滚动*******************************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向图片列表</title>
<style type="text/css">
ul{ list-style:none;}
.prolist {position:relative;height: 220px;margin-bottom:10px;overflow:hidden;
border: 1px solid #AAAAAA; background:#FFFFFF; width:586px;}
.prolist .prolist_content{position:absolute;width:1800px;top:26px;left:0px;padding:20px 0 0 8px;}
.prolist ul{margin-bottom:10px;float:left;height: 220px;}
.prolist ul li {float:left;display:inline;text-align:center;margin-right:22px;}
.prolist ul li span {display:block;overflow:hidden;}
.prolist ul li img {display:block;width:124px;height:124px;background:#EEE; border:0;}
.module_left_right{position:absolute;top:5px;right:10px;cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var page=1;
var i=4;
var len=$('.prolist_content ul li').length;
var page_count=Math.ceil(len/i);
var none_unit_width=$('.prolist').width();
var $parent=$('.prolist_content');
$('.goRight').click(function(){
if(!$parent.is(':animated')){
if(page==page_count){
$parent.animate({left:0+'px'},800);
page=1;
}else{
$parent.animate({left:'-='+none_unit_width+'px'},800);
page++;
}
}
});
$('.goLeft').click(function(){
if(!$parent.is(':animated')){
if(page==1){
$parent.animate({left:'-='+none_unit_width*(page_count-1)+'px'},800);
page=page_count;
}else{
$parent.animate({left:'+='+none_unit_width+'px'},800);
page--;
}
}
});
});
</script>
</head>
<body>
<div class="global_module prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
</ul>
</div>
<p class="module_left_right"><img class="goLeft" src="image/left.gif" alt="" /><img class="goRight" src="image/right.gif" alt="" /></p>
</div>
</body>
</html>
*******************************8>插件的使用(放大镜的效果)**************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向图片列表</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="scripts/jquery.jqzoom.js" type="text/javascript"></script>
<script>
$(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300, //放大图的宽度(默认是 200)
yzoom: 300, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10)
position: "right", //放大图的定位(默认是 "right")
preload:1
});
});
</script>
</head>
<body>
<div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div>
</body>
</html>
***********************************（
未
完
待
续
）***************************************
- Jquery 效果集结号
- 集结号
- 集结号?
- 集结号
- 集结号看过了
- 感，集结号
- 《集结号》很失败
- 集结号----狂顶
- 招行吹响《集结号》
- IN语集结号
- 互联网架构集结号
- 影视集结号--首页
- CSS Hack集结号
- 集结号----昨天看地
- 五星影院看《集结号》
- ICON图标资源集结号
- 技术集结号 第二季
- 考研集结号(第一帖)
- 事务与锁定-设置自动提交
- SVM入门 线性分类器（2）
- 事务与锁定-基础知识
- 事务与锁定-提交事务
- SVM入门 线性分类器的求解——问题的描述（3）
- Jquery 效果集结号
- 事务和锁定-通过结束会话方式解除死锁
- Tapestry的Shell报错：org.apache.tapestry.html.Shell.writeStylesheetLink(Shell.java:180)
- activex和javascript交互(delphi版本)
- 事务和锁定-与锁相关的初始化参数
- directshow 摄像头参数 设置
- sql获取本周的内第一天的时间
- 把ic卡的读方法封装成activex控件给js调用
- 内存分配详解、指针与数组[C++][内存管理]
