可复用的js效果
以下案例的html以及css代码
<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/bootstrap/css/animate.min.css">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" id="skin-css" href="styles/skin/skin-normal.css">
<title>购物网首页</title>
</head>
<body>
<header>
<div class="container">
<div class="header-top">
<div class="logo-wrapper">
<img src="data:images/logo.gif" class="logo" alt="img"/>
</div>
<input type="text" id="input-search" class="search" name="search" defaultValue="请输入商品名称"/>
<ul class="skin">
<li class="skin-blue"></li>
<li class="skin-green"></li>
<li class="skin-orange"></li>
<li class="skin-tianlan"></li>
<li class="skin-red"></li>
<li class="skin-pure"></li>
</ul>
</div>
<nav>
<ul class="nav-bar">
<li><a href="#">首页</a></li>
<li>
<a href="#">品牌</a>
<div class="subitem">
<dl class="fore">
<dt>
<a href="#nogo">品牌：</a>
</dt>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd ><a href="#nogo">安踏</a></dd>
<dd ><a href="#nogo">奥康</a></dd>
<dd ><a href="#nogo">骆驼</a></dd>
<dd ><a href="#nogo">特步</a></dd>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd class="noborder"><a href="#nogo">特步</a></dd>
</dl>
<dl>
<dt>
<a href="#nogo">品牌：</a>
</dt>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd ><a href="#nogo">安踏</a></dd>
<dd ><a href="#nogo">奥康</a></dd>
<dd ><a href="#nogo" >骆驼</a></dd>
<dd ><a href="#nogo">特步</a></dd>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo" >阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd class="noborder"><a href="#nogo">特步</a></dd>
</dl>
</div>
</li>
<li>
<a href="#">女装</a>
<div class="subitem" >
<dl class="fore">
<dt>
<a href="#nogo">女装：</a>
</dt>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd ><a href="#nogo">安踏</a></dd>
<dd ><a href="#nogo">奥康</a></dd>
<dd ><a href="#nogo">骆驼</a></dd>
<dd ><a href="#nogo">特步</a></dd>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd class="noborder"><a href="#nogo">特步</a></dd>
</dl>
<dl>
<dt>
<a href="#nogo">女装：</a>
</dt>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd ><a href="#nogo">安踏</a></dd>
<dd ><a href="#nogo">奥康</a></dd>
<dd ><a href="#nogo">骆驼</a></dd>
<dd ><a href="#nogo">特步</a></dd>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd class="noborder"><a href="#nogo">特步</a></dd>
</dl>
</div>
</li>
<li>
<a href="#">男装</a>
<div class="subitem" >
<dl class="fore" >
<dt>
<a href="#nogo">男装：</a>
</dt>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd ><a href="#nogo">安踏</a></dd>
<dd ><a href="#nogo">奥康</a></dd>
<dd ><a href="#nogo" class="promoted">骆驼</a></dd>
<dd ><a href="#nogo">特步</a></dd>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo" class="promoted">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd class="noborder"><a href="#nogo">特步</a></dd>
</dl>
<dl>
<dt>
<a href="#nogo">男装：</a>
</dt>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd ><a href="#nogo">安踏</a></dd>
<dd ><a href="#nogo">奥康</a></dd>
<dd ><a href="#nogo">骆驼</a></dd>
<dd ><a href="#nogo">特步</a></dd>
<dd ><a href="#nogo">耐克</a></dd>
<dd ><a href="#nogo">阿迪达斯</a></dd>
<dd ><a href="#nogo">达芙妮</a></dd>
<dd ><a href="#nogo">李宁</a></dd>
<dd class="noborder"><a href="#nogo">特步</a></dd>
</dl>
</div>
</li>
<li><a href="#">鞋包配饰</a></li>
</ul>
</nav>
</div>
</header>
<div class="main-body container">
<aside>
<h3 class="aside-banner">
商品分类
</h3>
<div class="aside-content">
<h4>
推荐品牌
</h4>
<ul class="aside-ul clear">
<li><a href="#nogo" >耐克</a></li>
<li><a href="#nogo" class="promoted">阿迪达斯</a></li>
<li class="promoted"> <a href="#nogo" >达芙妮</a></li>
<li><a href="#nogo" >李宁</a></li>
<li><a href="#nogo" >安踏</a></li>
<li><a href="#nogo" >奥康</a></li>
<li><a href="#nogo" class="promoted">骆驼</a></li>
<li><a href="#nogo" >特步</a></li>
</ul>
<h4>
女装
</h4>
<ul class="aside-ul clear">
<li><a href="#nogo" >呢大衣</a></li>
<li><a href="#nogo" >T恤</a></li>
<li><a href="#nogo" >羽绒</a></li>
<li><a href="#nogo" >衬衫</a></li>
<li><a href="#nogo" >羊绒衫</a></li>
<li><a href="#nogo" >针织</a></li>
<li><a href="#nogo" >连衣裙</a></li>
<li><a href="#nogo" >皮外套</a></li>
</ul>
<h4>男装</h4>
<ul class="aside-ul clear">
<li><a href="#nogo" >衬衫</a></li>
<li><a href="#nogo" >T恤衫</a></li>
<li><a href="#nogo" >夹克</a></li>
<li><a href="#nogo" >大皮衣</a></li>
<li><a href="#nogo" >风衣</a></li>
<li><a href="#nogo" >牛仔裤</a></li>
<li><a href="#nogo" >西服</a></li>
<li><a href="#nogo" >卫衣</a></li>
</ul>
<h4>鞋包配饰</h4>
<ul class="aside-ul clear">
<li><a href="#nogo" >围巾</a></li>
<li><a href="#nogo" >旅行箱</a></li>
<li><a href="#nogo" >真皮包</a></li>
<li><a href="#nogo" >韩版</a></li>
<li><a href="#nogo" >达芙妮</a></li>
<li><a href="#nogo" >单肩包</a></li>
<li><a href="#nogo" >毛线</a></li>
<li><a href="#nogo" >清仓靴子</a></li>
</ul>
</div>
</aside>
<div class="content">
<!--大幅广告栏-->
<div>
<div class="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="data:images/ads/1.jpg" alt="相约情人节"/></a>
</div>
<div class="item">
<a href="#"><img src="data:images/ads/2.jpg" alt="新款上线"/></a>
</div>
<div class="item">
<a href="#"><img src="data:images/ads/3.jpg" alt="愤怒小鸟特卖"/></a>
</div>
<div class="item">
<a href="#"><img src="data:images/ads/4.jpg" alt="男鞋促销第一波"/></a>
</div>
<div class="item">
<a href="#"><img src="data:images/ads/5.jpg" alt="春季新品发布"/></a>
</div>
</div>
<div class="carousel-control">
<a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
<a href="###2"><em>新款上线</em><em>全场357元起</em></a>
<a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
<a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
<a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
</div>
</div><!--大幅广告栏 end-->
<div class="ads">
<div class="ads-photo">
<a href="#"><img src="data:images/upload/20120216.jpg"/></a>
</div>
<div class="ads-activity">
<h4>最新动态</h4>
<ul>
<li><a href="#"><span>活动</span>伊伴春鞋迎春大促</a></li>
<li><a href="#"><span>活动</span>千百度冬靴新品火热让利</a></li>
<li><a href="#"><span>活动</span> 千百度冬靴新品火热让利</a></li>
<li><a href="#"><span>活动</span>伊伴春鞋迎春大促</a></li>
<li><a href="#"><span>活动</span>千百度冬靴新品火热让利</a></li>
</ul>
</div>
</div><!--广告栏右侧-->
</div>
<div class="brand-activity">
<div class="brand-title">
<h4>品牌活动</h4>
<ul class="category">
<li><a href="#">运动</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">童鞋</a></li>
</ul>
</div>
<div class="brand-content">
<ul class="brand-gallery">
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
</ul>
</div>
</div>
</div>
<!--右侧内容-->
</div>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/jquery.cookie.js"></script>
<script src="scripts/home.js"></script>
</body>
html源码
header{
width:%;
background: url( #FFFFFF;
height:105px;
}
header .header-top{
height:68px;
line-height:68px;
}
header .logo-wrapper{
float:left;
}
header .search{
border:1px solid #BABEBF;
height:30px;
line-height:30px;
width:215px;
font-size:14px;
margin-left:30px;
color:#;
padding:2px;
}
ul.skin{
float:right;
}
ul.skin li{
width:15px;
height:15px;
border-radius:3px;
display:inline-block;
z-index:;
background:url("../images/theme.gif");
}
ul.skin li.skin-blue{
background-position: ;
}
ul.skin li.skin-blue.selected{
background-position: -15px;
}
ul.skin li.skin-green{
background-position:-20px ;
}
ul.skin li.skin-green.selected{
background-position:-20px -15px;
}
ul.skin li.skin-orange{
background-position:-40px ;
}
ul.skin li.skin-orange.selected{
background-position:-40px -15px;
}
ul.skin li.skin-tianlan{
background-position:-60px ;
}
ul.skin li.skin-tianlan.selected{
background-position:-60px -15px;
}
ul.skin li.skin-red{
background-position:-80px ;
}
ul.skin li.skin-red.selected{
background-position:-80px -15px;
}
ul.skin li.skin-pure{
background-position:-100px ;
}
ul.skin li.skin-pure.selected{
background-position:-100px -15px;
}
/*导航栏*/
nav>ul{
height:36px;
line-height:36px;
background-color:#4A4A4A;
}
nav ul>li{
display:inline-block;
position:relative;
}
nav ul>li>a{
font-size:15px;
font-family:"宋体";
font-weight:bold;
color:#fff;
display:block;
padding-left:35px;
}
nav ul>li>a:hover{
text-decoration:underline;
}
/*二级导航栏*/
nav ul>li>div.subitem{
position:absolute;
top:36px;
left:35px;
height:auto;
border:1px solid #aaa;
width:470px;
display:none;
}
nav ul>li:hover>div.subitem{
display:block;
}
div.subitem{
background-color:#fff;
}
div.subitem dl{
clear:both;
margin: 10px;
}
div.subitem dt{
float:left;
line-height:60px;
font-size:14px;
font-weight:bold;
padding: 15px;
}
div.subitem dd{
margin-top:10px;
float:left;
padding: 8px;
height:16px;
line-height:16px;
border-right:1px solid #CCC;
}
div.subitem dd>a{
font-size:12px;
color:#aaa;
display:block;
}
div .subitem dl:nth-child(){
border-top:1px dashed #;
}
.main-body{
margin-top:10px;
}
/*侧边栏布局*/
aside{
width:187px;
height:auto;
float:left;
padding: 10px 10px 15px;
border:1px solid #6E6E6E;
margin:;
padding:;
}
aside h3{
background-color:#6E6E6E;
color:#fff;
font-size:12px;
font-weight:bold;
height:30px;
line-height:30px;
padding: 15px;
}
.aside-content{
padding: 15px 20px 15px;
}
.aside-content h4{
font-size:12px;
color:#;
font-weight:bold;
margin-top:10px;
padding-bottom:3px;
border-bottom:1px solid #ccc;
}
.aside-content ul li{
float:left;
position:relative;
}
.aside-content ul li .hot{
background: url( transparent;
height: 16px;
position: absolute;
right:20px;
top:;
width: 21px;
}
.aside-content ul li>a{
width:70px;
display:block;
height:24px;
line-height:24px;
}
.aside-content ul li>a.promoted{
color:red;
}
/*右侧大幅轮播广告栏*/
.content{
width:797px;
float:right;
overflow:hidden;
}
.carousel{
position:relative;
height:320px;
width:550px;
overflow:hidden;
float:left;
}
.carousel .item{
position:absolute;
top:;
left:;
}
.carousel .item.active{
position:absolute;
left:;
top:;
}
.carousel .carousel-control{
position:absolute;
bottom:;
left:;
width:550px;
}
.carousel .carousel-control a{
float:left;
color:#fff;
width:%;
border-right:1px solid rgba(,,,0.2);
background-color:rgba(,,,0.5);
height:44px;
}
/*下方箭头的效果不对,因为hover本身有一个动画的过渡时长？*/
.carousel .carousel-control a.cuttent{
background-color:#37A7D7;
background:url("../images/adindex.gif") no-repeat center 41px #37A7D7;
}
.carousel .carousel-control a em{
font-style:normal;
display:block;
text-align:center;
line-height:22px;
}
/*轮播右侧小广告栏*/
.ads{
width:230px;
height:320px;
float:right;
}
.ads img{
height:180px;
margin-bottom:10px;
transition:all 1s ease;
}
.ads img:hover{
transform:rotate(-359deg);
}
.ads .ads-activity{
border:1px solid #ccc;
font-size:12px;
}
.ads-activity h4{
border-bottom:1px solid #ccc;
height:24px;
line-height:24px;
font-weight:bold;
padding: 15px;
}
.ads-activity ul li span:before{
content:"[";
}
.ads-activity ul li span:after{
content:"]";
}
.ads-activity ul li>a{
color:#;
padding: 15px;
display:block;
height:21px;
line-height:21px;
}
.ads-activity ul li>a:hover{
color:#008CD7;
}
/*品牌活动*/
.brand-activity{
clear:both;
}
.brand-activity .brand-title{
padding-top:15px;
border-bottom:1px solid #E4E4E4;
overflow:hidden;
}
.brand-title h4{
float:left;
padding-bottom:7px;
font-weight:bold;
color:#;
}
.brand-title ul{
float:right;
}
.brand-title ul>li{
display:inline-block;
}
.brand-title ul>li a{
display:block;
color:#;
background-color:#E4E4E4;
padding: 3px 10px;
}
.brand-title ul>li:hover{
background: url(% bottom transparent;
padding-bottom: 3px;
}
.brand-title ul>li a:hover{
background-color:#FA5889;
}
/*品牌活动图片展示区*/
div.brand-content{
width:%;
height:200px;
overflow:hidden;
position:relative;
}
ul.brand-gallery{
width:4000px;
position:absolute;
top:;
left:;
}
ul.brand-gallery li{
float:left;
position:relative;
margin:15px 10px 20px 5px;
}
ul.brand-gallery li a{
display:block;
}
ul.brand-gallery li span{
position:absolute;
bottom:-16px;
left:;
right:;
height:24px;
line-height:24px;
text-align:center;
background-color:#EFEFEF;
}
css源码
一、输入框的focus和blur
/*搜索框的效果*/
$(function(){
$("#input-search").focus(function(){
var defaultValue=$(this).attr("defaultValue");
if(this.value==defaultValue){
this.value="";
}
}).blur(function(){
if(this.value==""){
this.value=$(this).attr("defaultValue");
}
}).keyup(function(e){
){
alert("回车提交表单");
}
});
})
输入框的focus与blur
二、网页换肤功能（需要结合jquery的cookie插件，来记录用户的选择）
/*换肤的效果,不知道为什么，cookie的效果没有出来*/
function switchSkin(myskin){
$("#skin-css").attr("href","styles/skin/"+myskin+".css");
$("."+myskin).addClass("selected").siblings().removeClass("selected");$
//为了用户下次打开以及刷新的时候，依旧显示上次的皮肤，需要使用cookie来记录当前的选择
$.cookie(});
}
$(function(){
var my_skin=$.cookie("myCssSkin");
alert(my_skin);
if(my_skin){
switchSkin(my_skin);
}
$(".skin li").click(function(){
my_skin=$(this).attr("class");
switchSkin(my_skin);
});
});
jquery实现网页换肤效果
三、广告栏轮播效果（目前实现的是fadeIn和fadeOut的效果，之后研究下如何实现从左到右的滑动效果）
/*大幅广告栏轮播的效果*/
function showImg(index){
$(".carousel-control a").eq(index).addClass("cuttent").siblings().removeClass("cuttent");
$(".carousel-inner div").eq(index).stop(true,true).fadeIn()
.siblings().stop(true,true).fadeOut();
}
$(function(){
//添加广告自动执行效果
//进入广告区域时候，停止动画，否则开始动画;初始化的时候开始动画
;
var adTimer=null;
$(".carousel").mouseenter(function(){
clearInterval(adTimer);
}).mouseleave(function(){
adTimer=setInterval(function(){
showImg(index);
var length=$(".carousel-control a").length;
index++;
){
index=;
}
},);
}).trigger("mouseleave");
//用户手动触发效果
$(".carousel-control a").mouseover(function(){
var index=$(".carousel-control a").index(this);
showImg(index);
}).eq().mouseover();
});
四、gallery的左右滚动效果
/*实现品牌活动的左右滑动效果*/
/*在布局的时候需要注意，ul外围的div的宽度设置正好合适，并且overflow：hidden，内部ul的宽度设置大一些*/
function show_page(index){
$ul_show=$(".brand-gallery");
var li_width=$ul_show.find("li").outerWidth(true);
;
$ul_show.stop(true,false).animate({left:-pageWidth*index},"slow");
}
$(function(){
$(".brand-title li>a").click(function(){
var index=$(".brand-title li>a").index(this);
show_page(index);
//禁止超链接的默认行为
return false;
});
});
gallery左右滚动效果
五、新闻上下滚动的效果
基本思路：通过设置滚动ul的margin-Top来实现，将margin-Top设置为负值，令其上移，当上移动画结束的时候，将margin-top恢复为原来的值，同时将以上去的第一个元素移动到ul的最后一个。
在布局上需要注意：将滚动ul上方的元素设置为relative或者absolute布局，使得当ul设置margin-top为负值的时候，消失在原上方元素的下面。
<div class="main-content">
<aside>
<div class="dongtai">
<h4 class="dongtai-title">
最新动态
</h4>
<ul class="dongtai-content">
<li><a href="#">瑞丽都疯狂推荐的秋装</a></li>
<li><a href="#">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#">长袖雪纺衫单穿内搭都超美..</a></li>
<li><a href="#">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#">秋装百搭小马甲不到50元..</a></li>
<li><a href="#">修身韩版小西装万人疯抢..</a></li>
</ul>
</div>
</div>
滚动新闻html片段
aside h4{
position:relative;
font-weight:bold;
color:#fff;
background-color:#3B5998;
font-size:12px;
height:26px;
line-height:26px;
padding-left:10px;
z-index:;
}
ul.dongtai-content{
padding: 15px 3px 15px;
border-bottom:7px solid #eee;
height:95px;
overflow:hidden;
}
ul.dongtai-content li>a{
height:22px;
line-height:22px;
color:#0287CA;
}
滚动新闻css片段
/*最新动态上下循环的效果*/
function scrollNews( $obj){
//var $ul-news=$("ul.dongtai-content");
var lineHeight=$obj.find("li:first").height();
$obj.animate({,function(){
$obj.css({});
$obj.find("li:first").appendTo($obj);
});
}
$(function(){
var $ul_news=$("ul.dongtai-content");
var scrollTimer;
scrollTimer=setInterval(function(){
scrollNews($ul_news);
},);
});
滚动新闻实现的js代码
六、树状目录折叠效果的实现
基本思路：使用next()选择器，以及slideUp和slideDown动画
<div class="global_module procatalog">
<h4 class="dongtai-title" >
产品分类
<span> </span>
</h4>
<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>
</div>
下方内容折叠html代码
ul.m-treeview{
padding:7px 10px 3px 10px;
border-bottom:7px solid #eee;
}
ul.m-treeview li span{
display:block;
height:22px;
line-height:22px;
cursor:pointer;
}
li.m-expanded{
padding-left:16px;
background:url(../img/treeview-expanded.gif) no-repeat 0 3px;
}
li.m-expanded.collapsed{
background:url(../img/treeview-collapsed.gif) no-repeat 0 3px;
}
.m-expanded ul>li{
padding-left:20px;
background:url(../img/treeview-item.gif) no-repeat 0 3px;
}
内容折叠的css代码
/*树状目录的展开和折叠*/
$(function(){
$(".dongtai-title").toggle(
function(){
$(this).next("ul").slideUp();
$(this).find("span").addClass("up");
},function(){
$(this).next("ul").slideDown();
$(this).find("span").removeClass("up");
}
);
});
$(function(){
$("li.m-expanded>span").toggle(
function(){
$(this).next("ul").slideUp();
$(this).parent("li.m-expanded").addClass("collapsed");
},function(){
$(this).next("ul").slideDown();
$(this).parent("li.m-expanded").removeClass("collapsed");
}
);
});
树状目录折叠的js实现
六、上下滑动广告栏效果
基本思路：
1.在css布局中，将包围ul的外围div的高度固定，并设置overflow:hidden，position:relative;将其包裹的ul，ul中的li设置为绝对布局。
2.上下滑动的过程就是更改ul的top值的过程（注意不是更改li的top值）。
<div class="ads-wrapper">
<ul class="ads">
<li class="ads1"><a href="#"><img src="img/ads/1.gif"/></a></li>
<li class="ads2"><a href="#"><img src="img/ads/2.gif"/></a></li>
<li class="ads3"><a href="#"><img src="img/ads/3.gif"/></a></li>
<li class="ads4"><a href="#"><img src="img/ads/4.gif"/></a></li>
<li class="ads5"><a href="#"><img src="img/ads/5.gif"/></a></li>
</ul>
<ul class="ads-index">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
广告栏html代码
/*广告栏的布局*/
.ads-wrapper{
position:relative;
height:150px;
width:590px;
overflow:hidden;
}
ul.ads{
position:relative;
}
.ads .ads1{
position:absolute;
top:0;
left:0;
}
.ads .ads2{
position:absolute;
top:150px;
left:0;
}
.ads .ads3{
position:absolute;
top:300px;
left:0;
}
.ads .ads4{
position:absolute;
top:450px;
left:0;
}
.ads .ads5{
position:absolute;
top:600px;
left:0;
}
ul.ads-index{
position:absolute;
right:15px;
bottom:5px;
}
.ads-index li{
width:17px;
height:17px;
text-align:center;
float:left;
border:1px solid orange;
color:orange;
margin-left:10px;
background-color:#fff;
}
.ads-index li.current{
height:20px;
background-color:orange;
color:#fff;
font-weight:bold;
}
广告栏css样式代码
/*大屏幕广告栏的上下滚动效果实现*/
function scrollAds($ul_ads,index){
var height=$ul_ads.find("li:first").height();
var position=height*index+"px";
//注意是给ul增加动画，而不是给其中的li增加
$ul_ads.stop(true,false).animate({top:"-"+position},1000);
$(".ads-index>li").eq(index).addClass("current").siblings().removeClass("current");
}
$(function(){
var adsTimer;
var index=0;
$("ul.ads").hover(function(){
clearInterval(adsTimer);
},function(){
adsTimer=setInterval(function(){
scrollAds($("ul.ads"),index);
if(index==4){
index=0;
}else{
index++;
}
},3000);
}).trigger("mouseleave");
$(".ads-index>li").mouseover(function(){
index=$(".ads-index>li").index($(this));
scrollAds($("ul.ads"),index);
$(this).addClass("current").siblings().removeClass("current");
}).eq(0).mouseover();
});
广告栏上下滚动效果实现
六、左右滑动效果
基本思路：
1.在css布局中，将包围ul的外围div的宽度固定，并设置overflow:hidden，position:relative;
2.将其包裹的ul设置为绝对布局。
3.左右滑动的过程就是更改ul的left值的过程。
4，对于向左向右按钮的控制，有些类似于数据库的分类查询，设置page_count,page_size,current_page这几个属性，这几个元素的值通过调用width()等获得外围元素的宽度，以及内部li的宽度来获得。
<div class="product-wrapper">
<div class="product-title">
<h4>新款上市</h4>
<div class="product-nav">
<span class="left">left</span>
<span class="right">right</span>
</div>
</div>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
</ul>
</div>
</div>
左右滑动html代码
/*右下方的产品展示区域*/
.product-wrapper{
border-top:10px solid #eee;
border-bottom:10px solid #eee;
overflow:hidden;
}
.product-title{
height:27px;
line-height:27px;
background-color:#3B5998;
}
.product-title h4{
display:inline-block;
color:#fff;
font-weight:bold;
margin-left:5px;
}
.product-nav{
float:right;
margin-right:20px;
}
.product-nav span{
margin-top:5px;
width:17px;
height:17px;
display:inline-block;
text-indent:99999px;
overflow:hidden;
}
.product-nav .left{
background-image:url(../img/left.gif);
}
.product-nav .right{
background-image:url(../img/right.gif);
}
.prolist_content{
width:auto;
height:200px;
border-bottom:1px solid #eee;
position:relative;
}
.prolist_content ul{
position:absolute;
top:0;
left:0;
height:200px;
margin-top:20px;
width:5000px;
}
.prolist_content ul li{
float:left;
margin-right:15px;
margin-left:10px;
}
.prolist_content ul li img{
width:124px;
height:124px;
}
.prolist_content ul li>span{
display:block;
text-align:center;
}
左右滑动区域的css代码
/*产品展示区域的左右滚动效果*/
$(function(){
var index=0;
var v_width=$(".product-wrapper").width();
var item_width=$(".prolist_content ul li:first").width();
var page_count=Math.floor(v_width/item_width);
var item_count=$(".prolist_content ul li").length;
var page_size=Math.ceil(item_count/page_count);
var current_page=0;
var left_position=0;
$(".product-nav .left").click(function(){
if(current_page==0){
current_page=page_size-1;
}else{
current_page--;
}
left_position=-v_width*current_page;
$(".prolist_content ul").animate({"left":left_position+"px"},1000);
});
$(".product-nav .right").click(function(){
if(current_page==page_size-1){
current_page=0;
}else{
current_page++;
}
left_position=-v_width*current_page;
$(".prolist_content ul").animate({"left":left_position+"px"},1000);
});
});
实现左右滑动的js代码
可复用的js效果的更多相关文章
- 类js效果
类似js效果,点击看看 代码 onclick="return confirm('您确定要看看吗?')" 放入a标签里面
- m.jd.com首页中的js效果
m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...
- Tab选项卡切换卡JS效果
<script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...
- JS效果的步骤
一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a. display:none; 显示为无,不占据空间 b. vi ...
- Github上html页面(包括CSS样式和JS效果)如何显示出来
在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...
- WebView 实现JS效果和a标签的点击事件
目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该控件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可 ...
- js效果-多选只能选两项,如果超出自动取消第一次选的
这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...
- 常用JS效果 需要时更新。。。
1.手风琴效果 JS: $(function() { var aMenuOneLi = $(".menu-one > li"); var aMenuTwo = ...
- 用js效果做的简单焦点图
/*js代码*/ <script src="js/js/myfocus-2.0.1.min.js" type="text/javascript">& ...
随机推荐
- POJ 3321 Apple Tree（DFS序+线段树单点修改区间查询）
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 25904 Accepted: 7682 Descr ...
- 提取安卓手机的recovery
一直都是从网上下载的recovery文件安装到手机.至于这个小小的recovery到底是什么全然不知.能不能自己做一个recovery呢?因为功能比较多的clockworkmod(简称cmw)的官网上 ...
- JQUERY 一些技巧在实际中的应用
在jquery选择器中.继续做判断$("tr[rel!=" + id + "]").find('.status').html('--'); $("tr ...
- [转]20个高级Java面试题汇总
http://saebbs.com/forum.php?mod=viewthread&tid=37567&page=1&extra= 这是一个高级Java面试系列题中的第一部分 ...
- the basic index concept
Computer Science An Overview _J. Glenn Brookshear _11th Edition Over the years numerous variations o ...
- 【转】CSS（10）盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
- maven 添加本地jar
方式一 Xml代码 <dependency> <groupId>org.apache</groupId> <artifactId>test</ar ...
- Python之创建tuple和“可变”的tuple
Python之创建tuple tuple是另一种有序的列表,中文翻译为" 元组 ".tuple 和 list 非常类似,但是,tuple一旦创建完毕,就不能修改了. 同样是表示班里 ...
- WCF TCP 错误代码 10061: 由于目标计算机积极拒绝
表象是连不上服务端,本质原因多种多样,网络硬件问题导致的网络不通.服务本身问题或没有启动.或者防火墙阻隔等等不一而足. 1.ping看服务端能否ping通: 2.telnet ip地址 端口 ,看看是 ...
- linux configure
Linux环境下的软件安装,并不是一件容易的事情;如果通过源代码编译后在安装,当然事情就更为复杂一些;现在安装各种软件的教程都非常普遍;但万变不离其中,对基础知识的扎实掌握,安装各种软件的问题就迎刃而 ...