最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果

有兴趣的同学可以参考一下，这幅效果，个人觉得挺不错的

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style type="text/css">

	*{margin:0;padding:0;list-style-type:none;}

	a,img{border:0;}

	body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#fff;}

	.content{width:900px;position:relative;margin:20px auto 0px auto;}

	.content h2{color:#333;font-size:22px;text-align:center;height:40px;}

	/* hs_container */

	.hs_container{width:902px;height:471px;overflow:hidden;clear:both;border:2px solid #ddd;cursor:pointer;padding:3px;}

	.hs_container .hs_area{float:left;position:relative;overflow:hidden;}

	.hs_area img{position:absolute;top:0px;left:0px;display:none;}

	.hs_area img.hs_visible{display:block;z-index:9999;}

	.hs_area1{border-right:2px solid #fff;}

	.hs_area4, .hs_area5{border-top:2px solid #fff;}

	.hs_area4{border-right:2px solid #fff;}

	.hs_area3{border-top:2px solid #fff;}

	.hs_area1{width:449px;height:334px;}

	.hs_area2{width:451px;height:165px;}

	.hs_area3{width:451px;height:167px;}

	.hs_area4{width:192px;height:135px;}

	.hs_area5{width:708px;height:135px;}

</style>

</head>

<body>

   <p>this is a index page</p>

<div class="content">

	<h2>jQuery图片九宫格样式鼠标悬停图片滑动切换效果(<font color="#ff0000">点击图片试试</font>)</h2>

	<div id="hs_container" class="hs_container">

		<div class="hs_area hs_area1">

			<img class="hs_visible" src="data:images/area1/1.jpg" alt="xixi"/>

			<img src="data:images/area1/31.jpg" alt=""/>

		</div>

		<div class="hs_area hs_area2">

			<img class="hs_visible" src="data:images/area2/1.jpg" alt=""/>

			<img src="data:images/area2/32.jpg" alt=""/>

		</div>

		<div class="hs_area hs_area3">

			<img class="hs_visible" src="data:images/area3/1.jpg" alt=""/>

			<img src="data:images/area3/33.jpg" alt=""/>

		</div>

		<div class="hs_area hs_area4">

			<img class="hs_visible" src="data:images/area4/1.jpg" alt=""/>

			<img src="data:images/area4/34.jpg" alt=""/>

		</div>

		<div class="hs_area hs_area5">

			<img class="hs_visible" src="data:images/area5/1.jpg" alt=""/>

			<img src="data:images/area5/35.jpg" alt=""/>

		</div>

	</div>

</div>

<!-- The JavaScript -->

<script type="text/javascript">

$(function(){

	//使用自定义动画

	//过渡效果

	var animations		= ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];

	var total_anim		= animations.length;

	//设置选择效果

	var easeType		= 'swing';

	//每个转换的速度

	var animSpeed		= 450;

	//缓存

	var $hs_container	= $('#hs_container');

	var $hs_areas		= $hs_container.find('.hs_area');

	//第一预加载的所有图像

	$hs_images          = $hs_container.find('img');

	var total_images    = $hs_images.length;

	var cnt             = 0;

	$hs_images.each(function(){

		var $this = $(this);

		$('<img/>').load(function(){

			++cnt;

			if(cnt == total_images){

				$hs_areas.each(function(){

					var $area 		= $(this);

					//当鼠标进入该区域时，我们制作动画的电流

					//图像（随机阵列动画）

					//使下一个得到可见。

					//"over" 是一个标志，如果我们可以动画

					//一个地区或没有（我们不希望2动画

					//为每个区域在同一时间）

					$area.data('over',true).bind('mouseenter',function(){

						if($area.data('over')){

							$area.data('over',false);

							//在这方面多少图像？

							var total		= $area.children().length;

							//可见光图像

							var $current 	= $area.find('img:visible');

							//可见光图像的索引

							var idx_current = $current.index();

							//的将被显示的下一个图像。

							//无论是下一个，或第一个如果当前是最后

							var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();

							//显示下一个（不可见）

							$next.show();

							//得到一个随机的动画

							var anim		= animations[Math.floor(Math.random()*total_anim)];

							switch(anim){

								//从当前幻灯片的权利

								case 'right':

								$current.animate({'left':$current.width()+'px'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','left':'0px'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								//从左边滑动

								case 'left':

								$current.animate({'left':-$current.width()+'px'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','left':'0px'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								//从顶部的幻灯片

								case 'top':

								$current.animate({'top':-$current.height()+'px'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','top':'0px'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								//从底部滑动

								case 'bottom':

								$current.animate({'top':$current.height()+'px'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','top':'0px'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								//从当前幻灯片的右侧和淡出

								case 'rightFade':

								$current.animate({'left':$current.width()+'px','opacity':'0'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','left':'0px','opacity':'1'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								//从当前幻灯片的左侧和淡出

								case 'leftFade':

								$current.animate({'left':-$current.width()+'px','opacity':'0'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','left':'0px','opacity':'1'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								//从当前幻灯片的顶部和淡出

								case 'topFade':

								$current.animate({'top':-$current.height()+'px','opacity':'0'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','top':'0px','opacity':'1'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								//当前幻灯片，从底部淡出

								case 'bottomFade':

								$current.animate({'top':$current.height()+'px','opacity':'0'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','top':'0px','opacity':'1'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

								default:

								$current.animate({'left':-$current.width()+'px'},animSpeed,easeType,function(){

									$current.hide().css({'z-index':'1','left':'0px'});

									$next.css('z-index','9999');

									$area.data('over',true);

								});

								break;

							}

						}

					});

				});

				//当点击hs_container各个领域得到滑动

				$hs_container.bind('click',function(){

					$hs_areas.trigger('mouseenter');

				});

			}

		}).attr('src',$this.attr('src'));

	});	

});

</script>

</body>

</html>

运行效果：

图片效果2：

jQuery练习实例（四）的更多相关文章

  1. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  2. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  3. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  4. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  6. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. jQuery UI 实例 – 切换(Toggle)

    toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数. toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数.每次触发click事件时,togg ...

  8. 十分钟玩转 jQuery、实例大全(参考自博主索宁)

    十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...

  9. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  10. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

随机推荐

  1. Linux系统调优

    Linux核心参数都是放置在/proc下面:系统的参数都是放置在/proc/sys swap最好放置在运行最快的硬盘上面,但是swap并能取代ram,因为并有I/O上面的损耗,所以优先考虑检验内存没有 ...

  2. 第 4 章 多例模式【Multition Pattern】

    以下内容出自:24种设计模式介绍与6大设计原则 这种情况有没有?有!大点声,有没有? 有!,是,确实有,就出现在明朝,那三国期间的算不算,不算,各自称帝,各有各的地盘,国号不同.大家还记得那首诗< ...

  3. ALV 行列 颜色

    1)颜色含义 1:海蓝:2:浅清:3:黄色:4:浅蓝:5:青色:6:红色:7:橙色.(1)首位为主颜色:(2)次位为辅助颜色:(3)末位为0时,表示首位数字表为表格的底色:末位为1时,则表示以1为底色 ...

  4. 3D触控简介：建立数字刻度应用及快速活动栏

    苹果公司通过 iPhone 6s 和 6s Plus 引入了与手机互动的全新方式:按压手势.你也许知道,苹果智能手表和苹果笔记本电脑早已具备这一功能,只是名称略有不同,为力感触控(Force Touc ...

  5. 带你了解世界最先进的手势识别技术 -- 微软，凌感，Leap...

    转载 今天为大家解释一下现有的几种主要的手势识别技术,为你揭开手势识别技术的神秘面纱. 概述 谈起手势识别技术,由简单粗略的到复杂精细的,大致可以分为三个等级:二维手型识别.二维手势识别.三维手势识别 ...

  6. java常量使用比较好的方法

    1.首先建立一个工具类 public class AppConst { private static Map<String,String> map=new HashMap<Strin ...

  7. asp.net中bin目录下的 dll.refresh文件

    首先找到了这篇文章http://www.cnblogs.com/haokaibo/archive/2010/07/31/1789342.html 然后找到一篇英文的文章http://monsur.xa ...

  8. CentOS 如何将.deb 文件 转换.rpm

    CentOS 如何将.deb 文件 转换.rpm [root@localhost tmp]#tar zxvf alien_8.88.tar.gz [root@localhost alien]#perl ...

  9. bzoj1458

    题做多的话不难想到可能是以行列作为二分图两个点集,然后网络流相关 具体怎么弄呢 我们可以用求补集的思想,假设有解 我们先把棋盘能放的地方放满士兵,然后我们尽量的把士兵拿走 并且要满足行和列的要求, 说 ...

  10. Leveraging the Power of Asynchrony in ASP.NET [转]

    Asynchronous programming has had a lot of attention in the last couple of years and there are two ke ...