实现效果

实现步骤

// 鼠标放入到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或产品展示图的更多相关文章

  1. 手风琴式焦点图jQuery特效

    手风琴式焦点图jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="ag-cont ...

  2. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  3. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  4. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  5. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  6. 前端之jquery

    前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...

  7. 第四篇：web之前端之jquery

    前端之jquery   前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...

  8. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  9. JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单

    首先页面去加载的时候,会去加载main.js文件,我们在加载left.jsp.top.jsp body.jsp,现在我们修改main.jsp的代码,让它去请求的时候去访问的是不在直接去访问left.j ...

随机推荐

  1. initrd和initramfs的区别

      Linux内核在初始化之后会执行init进程,而init进程会挂载我们的根文件系统,但由于init程序也是在根文件系统上的,所以这就有了悖论.Linux采用两步走的方法来解决这个问题.Linux2 ...

  2. ECharts修改坐标轴，坐标轴字体，坐标轴网格样式以及控制坐标轴是否显示

    转自:http://blog.csdn.net/kirinlau/article/details/72876689 首先要将一个图表显示在前端页面上: var myChart = echarts.in ...

  3. Spring MVC静态资源处理：<mvc:resources />

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...

  4. CentOS 6 网络设置

    系统配置: 系统硬件:vmware workstation 系统版本:Centos-6.6-x86_64 路由器网关:192.168.1.1 linux系统网络设置须知: 1.主机所有网卡信息配置文件 ...

  5. HDU1712:ACboy needs your help(分组背包模板）

    http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem Description ACboy has N courses this term, an ...

  6. MVC中的传参并在View中获取

    首先action跳转的模式有如下: redirecttoaction("index");//一个参数时在本controller下,不传入参数. redirecttoaction(a ...

  7. 算法---数组总结篇2——找丢失的数，找最大最小，前k大，第k小的数

    一.如何找出数组中丢失的数 题目描述:给定一个由n-1个整数组成的未排序的数组序列,其原始都是1到n中的不同的整数,请写出一个寻找数组序列中缺失整数的线性时间算法 方法1:累加求和 时间复杂度是O(N ...

  8. 用户用户组管理：用户管理命令-passwd

    passwd直接回车就是给root设密码.或加root. 普通用户只能改自己的密码.改时直接敲passwd,回车.否则报错. 因为只有root可以在passwd后加用户名.其实最常见的就是不加选项. ...

  9. linux cut字符串切割

    linux字符串列截取  cut  -d ‘分割条件’ -f ‘列数’ [root@LocalWeb01 ~]# less  /etc/passwd | grep '^user' | grep -v ...

  10. [转]C语言四书五经

    我们来说说C语言方面的图书.什么,C语言?有读者奇怪了.没错,这一次的主角就是诞生于1973年如今已经儿孙满堂的C语言.我们之所以要谈及C,不仅仅是因为它的影响深远,这完全可以从C系列语言家族的兴旺发 ...