设为首页
收藏本站
开启辅助访问
请
登录
后使用快捷导航
没有帐号?
立即注册
首页
课程设置
平面设计
室内设计
机械设计
园林景观设计
影视后期制作
论坛
老师加盟
登录
|
注册
搜索
搜索
本版
帖子
用户
快捷导航
室内设计学院
论坛
BBS
论坛
›
学院
›
平面设计学院
›
京东选项卡案例
返回列表
lori棒棒糖
11
主题
12853
帖子
12908
积分
版主
积分
12908
加为好友
发送消息
访问家园
1
772
电梯直达
[作业]
京东选项卡案例
小白的自学生涯
|
新手上路
|
勤币 58
|
学币 0
发表于 2018-9-10 21:03
|
复制链接
|
打印
|
上一主题
|
下一主题
JavaScript+jQuery网页前端教程
-
6.7 选项卡特效在项目中的应用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东选项卡案例</title>
</head>
<style>
*{ padding: 0; margin: 0; list-style: none;}
.banner{ width: 790px; height: 340px; border: 3px solid green; margin: 100px auto; position: relative;}
.pic li{ position: absolute; top:0; left: 0; }
ol{ position: absolute; bottom: 20px; right: 50%; margin-right:-35px; }
ol li{ width: 14px; height: 14px; background: #000; float: left; margin: 0 5px; border-radius: 50%; }
</style>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$(".pic li").eq(0).show();
$("ol li").eq(0).css("background","red");
$("ol li").mouseover(function(){
$(this).css("background","red").siblings("li").css("background","#000");
var idx=$(this).index();
$(".pic li").eq(idx).fadeIn().siblings("li").fadeOut();
})
})
</script>
<body>
<div class="banner">
<ul class="pic">
<li>
<a href="#">
<img src="../image/7.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../image/8.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../image/9.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../image/10.jpg" alt="">
</a>
</li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有帐号?
立即注册
x
点赞
26
哪些同学觉得很赞!
lori棒棒糖
觉得很赞
昵昵妹
觉得很赞
潜意式
觉得很赞
龙猫1212
觉得很赞
大大大表哥
觉得很赞
依仔101
觉得很赞
西卡
觉得很赞
一品数码
觉得很赞
热爱生活热爱家
觉得很赞
我叫大帅比
觉得很赞
举报
使用道具
|
回复
共1个回复 最后回复于 2018-9-12 16:57
lori棒棒糖
积分
12908
11
主题
12853
帖子
12908
积分
版主
积分
12908
加为好友
发送消息
访问家园
lori棒棒糖
版主
勤币 13901
学币 196
沙发
发表于 2018-9-12 16:57:55
|
只看该作者
作业完成没有问题的哦~
举报
使用道具
回复
支持
反对
返回列表
B
Color
Image
Link
Quote
Code
Smilies
高级模式
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表