js案例 - 手风琴轮播图
时间:2021-08-25
本文章向大家介绍js案例 - 手风琴轮播图,主要包括js案例 - 手风琴轮播图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
float: left;
width: 240px;
height: 400px;
}
/* li 标签的背景图,需要使用 js 代码动态添加 */
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
// 获取所有的 li 标签
var $lis = $("#box ul li");
// 模拟后台提供的图片数据
var arr = ["fq1.jpg","fq2.jpg","fq3.jpg","fq4.jpg","fq5.jpg"];
// 记录文件路径
var path = "img/";
var during = 1000;
// 给每一个 li 去添加背景图
// 遍历方法
$lis.each(function (i) {
// 存储路径
var url = "url(" + path + arr[i] + ")";
// this 指的是遍历的这一次的 li 元素
$(this).css("background-image",url);
})
// 给每个 li 标签添加鼠标进入事件,让自己的宽度变为 800,让其他的兄弟变为 100
$lis.mouseenter(function () {
$(this).stop(true).animate({"width": 800},during)
.siblings().stop(true).animate({"width": 100},during)
})
// 给最外层的大盒子添加鼠标离开事件,让所有的 li 恢复默认宽度
$("#box").mouseleave(function () {
$lis.stop(true).animate({"width": 240},during)
})
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/charonmomo/p/15184265.html
- 数据迁移中的数据库检查和建议(r2笔记71天)
- 决策树案例:基于python的商品购买能力预测系统
- 数据迁移前的准备和系统检查 (r2笔记70天)
- 数据处理的统计学习(scikit-learn教程)
- 机器学习实战,使用朴素贝叶斯来做情感分析
- Python NLTK 处理原始文本
- 通过闪回事务查看数据dml的情况 (r2笔记69天)
- 通过shell和sql结合查找性能sql(r2笔记68天)
- 淘宝的评论归纳是用什么方法做到的?
- Python的机器学习实战:AadBoost
- 通过shell检查分区表中是否含有默认分区(r2笔记87天)
- 利用python爬取人人贷网的数据
- 通过shell脚本查看package的信息(r2笔记86天)
- 通过shell脚本查看procedure的信息(r2笔记85天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于前端JS导出Excel文件(减轻服务端压力)
- 本机IDEA远程调试远端服务器代码
- 开源 - Java接口API授权认证与规范
- 亿及流量多级缓存 - 客户端缓存
- 亿及流量多级缓存 - 一致性哈希负载均衡与模板渲染
- 关于友情链接或者其他外部链接的建议
- 总结Js方法工具类库,总有你需要的方法
- [docker]安装Mysql
- [Centos7]linux运行django项目报错no module named _ssl
- [Centos7]在非标准端口上运行SSH
- [Centos7]安装及配置bind(DNS服务)
- [Centos7.2]关于crontab报错
- [Centos7.2]关于升级python后防火墙无法启动
- [Centos7]关于限制IP通过ssh登陆
- Apache安装SSL证证书