【前端】javascript+jquery实现手风琴式的滚动banner或产品展示图
实现效果
实现步骤
// 鼠标放入到li中该盒子变宽，其他盒子变窄，鼠标移开大盒子，恢复原样
// 实现步骤
// 1. 给li添加背景
// 2. 绑定onmouseover事件，鼠标放入到li中，该盒子变宽，其他盒子变窄
// 3. 移开盒子，恢复原样
实现代码
<!DOCTYPE html>
<html>
<head>
<title>手风琴式图片展示列表</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color: #2f2f2f;
}
div{
width: 1000px;
margin: 100px auto;
box-shadow: 1px 1px 20px #000;
overflow: hidden;
}
div ul{
width: 1300px;
list-style: none;
}
div ul li{
width: 200px;
height: 150px;
float: left;
}
</style>
<script type="text/javascript" src="jquery1.0.0.1.js"></script>
<!-- 引入jQuery -->
<script type="text/javascript">
// 鼠标放入到li中该盒子变宽，其他盒子变窄，鼠标移开大盒子，恢复原样
// 实现步骤
// 1. 给li添加背景
// 2. 绑定onmouseover事件，鼠标放入到li中，该盒子变宽，其他盒子变窄
// 3. 移开盒子，恢复原样 window.onload = function(){
var div = document.getElementsByTagName("div")[0];
var liArr = div.getElementsByTagName("li");
// 1. 给li添加背景,使用background属性
for(var i=0; i<liArr.length; i++){
liArr[i].style.background = "url(images/0"+(i+1)+".jpg) no-repeat"; // 步骤 2
liArr[i].onmouseover = function(){
// 排他思想
for(var j=0; j<liArr.length; j++){
// 引用框架实现宽度变窄
animate(liArr[j], {"width":140});
// 注意：jQuery3需要写成 liArr[j].animate({""})的写法！！！
}
// 设置触发的盒子的宽度
animate(this, {"width":490});
}
} // 步骤 3
div.onmouseout = function(){
for(var j=0; j<liArr.length; j++){
// 引用框架实现宽度变窄
animate(liArr[j],{"width":200});
}
}
}
</script>n </head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
【前端】javascript+jquery实现手风琴式的滚动banner或产品展示图的更多相关文章
- 手风琴式焦点图jQuery特效
手风琴式焦点图jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="ag-cont ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
- 【JavaScript&jQuery】前端资源大全
综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- 第四篇：web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单
首先页面去加载的时候,会去加载main.js文件,我们在加载left.jsp.top.jsp body.jsp,现在我们修改main.jsp的代码,让它去请求的时候去访问的是不在直接去访问left.j ...
随机推荐
- 单表行数超过 500 万行或者单表容量超过 2GB，才推荐进行分库分表。
https://github.com/alibaba/p3c/blob/master/阿里巴巴Java开发手册(详尽版).pdf 单表行数超过 500 万行或者单表容量超过 2GB,才推荐进行分库分表 ...
- PHP之文件上传
1.$_FILES['myFile']['name'] 上传文件的原始名称 2.$_FILES['myFIle']['type'] 上传文件的mime-type 3.$_FILES['myFile'] ...
- 一键安装openstack juno 之controller node.
原文名称: OpenStack Juno Scripted Installation on CentOS 7 Step I: 本机信息配置 CONTROLLER_IP=192.168.173.133 ...
- Excel-字符串连接
使用函数concatenate()将多个字符连接起来
- javaScript高级教程(七)正则表达式中括号三种常见作用
括号用来将子表达式标记起来,以区别于其他表达式 比如很多的命令行程序都提供帮助命令,键入 h 和键入 help 的意义是一样的,那么就会有这样的表达式: h(elp)? 字符h之后的elp可有可无这里 ...
- 第三课：JAVA反射机制
基础的不想写啦,好了,直接上JAVA反射机制吧: 类对象概念: 所有的类,都存在一个类对象,这个类对象用于提供类层面的信息,比如有几种构造方法, 有多少属性,有哪些普通方法. JAVA类,他们的区别在 ...
- MySQL check table/optimize table/analyze table/REPAIR TABLE
MySQL check table/optimize table/analyze table/REPAIR TABLE 转自:https://www.cnblogs.com/datastack/p/3 ...
- dedecms网站迁移时记得将安装目录放空 附迁移的正确方法
这段时间在赶一些新项目,我们建站一般都在本地服务器搭建起来,测试得差不多了才传到网上,这样对蜘蛛也相对友好一些,要不然改来改去变化太大给搜索引擎的第一印象很不好.但是由于本地环境和服务器环境还是有一些 ...
- 【剑指offer】用两个栈实现队列
一.题目: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 二.思路: 两个栈A,B,A负责进栈,B负责出栈,进栈很容易,A中添加即可,出栈需要从B里出,所以要先 ...
- Centos 设置zookeeper开机自启动
把zookeeper做成服务 1.进入到/etc/rc.d/init.d目录下,新建一个zookeeper脚本 [root@zookeeper ~]# cd /etc/rc.d/init.d/ [ro ...