20190716-jQuery实例
——Javee
案例六：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-size: 12px;
}
#win{
width: 600px;
margin: auto;
text-align: center;
}
#btn{
margin-top: 10px;
color: #0088FF;
width: 600px;
float: left;
text-align: center;
box-sizing: border-box;
}
#btn>div{
width: 150px;
border: 1px solid #CCC;
margin: auto;
padding: 5px 0;
cursor: pointer;
user-select: none;
box-sizing: border-box;
}
#btn>div>div{
border: 1px solid orange;
display: inline-block;
margin-right: 7px;
}
ul>li{
list-style-type: none;
width: 200px;
float: left;
margin-top: 5px;
cursor: pointer;
}
ul>li>span{
color: #0088FF;
}
ul>li:nth-of-type(n+7):not(:last-of-type){
display: none;
}
.orange>span{
color: orange;
}
.triangle-bottom {
display: block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid orange;
margin: 3px 1px;
}
.triangle-top {
display: block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid orange;
margin: 3px 1px;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#btn>div").click(function(){
var liList = $("ul>li:gt(5)").not($("ul>li:last-child"));
liList.toggle();
$("ul>li").filter(function(index,obj){
if(index == 0 || index == 3 || index == 10) return obj;
}).toggleClass("orange");
$("#btn>div>div>i").toggleClass("triangle-bottom");
$("#btn>div>div>i").toggleClass("triangle-top");
if(liList.is(":visible")){
$("#btn>div>span").text("显示精简品牌");
}else{
$("#btn>div>span").text("显示全部品牌");
}
});
});
</script>
</head>
<body>
<div id="win">
<ul>
<li><span>佳能</span><i>(30440)</i></li>
<li><span>索尼</span><i>(27220)</i></li>
<li><span>三星</span><i>(20808)</i></li>
<li><span>尼康</span><i>(17821)</i></li>
<li><span>松下</span><i>(12289)</i></li>
<li><span>卡西欧</span><i>(8242)</i></li>
<li><span>富士</span><i>(14894)</i></li>
<li><span>柯达</span><i>(9520)</i></li>
<li><span>宾博</span><i>(2195)</i></li>
<li><span>理光</span><i>(4114)</i></li>
<li><span>奥林巴斯</span><i>(12205)</i></li>
<li><span>明基</span><i>(1466)</i></li>
<li><span>爱国者</span><i>(3091)</i></li>
<li><span>其他品牌相机</span><i>(7275)</i></li>
</ul>
<div id="btn"><div><div><i class="triangle-bottom"></i></div><span>显示全部品牌</span></div></div>
</div>
</body>
</html>
案例7：（天猫首页图片轮播效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
height: 500px;
}
#win {
margin: auto;
padding: 0px;
width: 1234px;
}
#win>li:not(:first-of-type) {
display: none;
}
.bg1 {
background: #E8E8E8 url("img/1.jpg") no-repeat center;
}
.bg2 {
background: #E8E8E8 url("img/2.jpg") no-repeat center;
}
.bg3 {
background: #FEE4E3 url("img/3.jpg") no-repeat center;
}
.bg4 {
background: #e8e8e8 url("img/4.jpg") no-repeat center;
}
.bg5 {
background: #d5FFFe url("img/5.jpg") no-repeat center;
}
.bg6 {
background: #e8e8e8 url("img/6.jpg") no-repeat center;
}
#main {
position: relative;
}
#btns>a {}
#btns {
width: 194px;
position: absolute;
z-index: 9999;
bottom: 22px;
left: calc(50% - 97px);
}
#btns>a {
float: left;
width: 24px;
height: 5px;
margin-left: 7px;
background-color: rgba(0, 0, 0, 0.4);
}
.choose {
background-color: rgba(255, 255, 255, 1) !important;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
var colors = ["#E8E8E8","#E8E8E8","#FEE4E3","#E8E8E8","#d5FFFe","#E8E8E8"];
var nowIndex = 0;
var mytime;
var myinterval;
$("#btns>a").mouseenter(function(){
var mythis = this;
if($(mythis).hasClass("choose")) return;
clearTimeout(mytime);
clearInterval(myinterval);
mytime = setTimeout(function(){
$("#btns>a").removeClass("choose");
$(mythis).addClass("choose");
var index = $("#btns>a").index(mythis);
$("#win>li").hide();
$("#win>li").eq(index).fadeIn(500);
$("#main").css("backgroundColor",colors[index]);
nowIndex = index;
},300);
myinterval = setInterval(mymove,3000);
});
myinterval = setInterval(mymove,3000);
function mymove(){
nowIndex++;
if(nowIndex >= 6) nowIndex = 0;
$("#btns>a").removeClass("choose");
$("#btns>a").eq(nowIndex).addClass("choose");
$("#win>li").hide();
$("#win>li").eq(nowIndex).fadeIn(500);
$("#main").css("backgroundColor",colors[nowIndex]);
}
});
</script>
</head>
<body>
<div id="main" style=";background-color:#E8E8E8; ">
<ul id="win">
<li class="bg1"></li>
<li class="bg2"></li>
<li class="bg3"></li>
<li class="bg4"></li>
<li class="bg5"></li>
<li class="bg6"></li>
</ul>
<div id="btns">
<a class="choose" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
案例8：（动态滚动到顶部）
$(function(){
$("#topbtn").click(function(){
$("html").animate({"scrollTop":"0px"},500);
});
});案例9：（天猫首页右侧移入移出，提示信息淡入淡出的动画）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#leftDiv{
background-color: black;
width: 30px;
height: 100%;
position: fixed;
right: 0px;
}
#tip{
width: 100px;
height: 35px;
position: absolute;
right: 60px;
top: 100px;
display: none;
}
#rectangle{
width: 92px;
height: 35px;
background-color: #494949;
font-size: 12px;
color: #FFF;
line-height: 35px;
text-align: center;
}
#triangle{
width: 0;
height: 0;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 8px solid #494949;
position: absolute;
right: 0px;
top: 12px;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#leftDiv").hover(function(){
$("#tip").css("opacity","0").show().stop()
.animate({"opacity":1,"right":"20px"},500);
},function(){
$("#tip").stop()
.animate({"opacity":0,"right":"60px"},500,function(){
$(this).hide();
});
});
});
</script>
</head>
<body>
<div id="leftDiv">
<div id="tip">
<div id="rectangle">会员权益</div>
<div id="triangle"></div>
</div>
</div>
</body>
</html>
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
