jQuery练习实例（四）
最近写的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练习实例（四）的更多相关文章
- jQuery插件实例四：手风琴效果[无动画版]
手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...
- jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】
本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)转
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- jQuery UI 实例 – 切换(Toggle)
toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数. toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数.每次触发click事件时,togg ...
- 十分钟玩转 jQuery、实例大全(参考自博主索宁)
十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- jQuery AJAX实例
<html><head><title>jQuery Ajax 实例演示</title></head><script language= ...
随机推荐
- MDK常用快捷键
一.常用编译相关的快捷键 1.编译(单个文件) Ctrl+F7 2.连接 F7 二.常用调试相关的快捷键 1.运行/停止 Ctrl+F5 2.Run(全速运行) F5 3.Stop Deb ...
- 简单的网页采集程序（ASP.NET MVC4）
因为懒人太多,造成现在网页数据采集非常的流行,我也来写个简单的记录一下. 之前写了MVC的基本框架的搭建随笔,后面因为公司太忙,个人感情问题:(,导致不想写了,就写了两篇给删除了,现在就搁浅了, 本人 ...
- 数据库 - FMDB
FMDB 是基于 SQLite 封装的 面向对对象(OC) 的API. FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API FMDB 需要libsqli ...
- C#之装箱与拆箱
C#中值类型和和引用类型实质上是同源的,所以不但可以从值类型和引用类型之间进行转换,也可以在值类型和引用类型之间进行转换.,但是两者使用的内存类型不同,使他们的转换变得复杂. 1.装箱: 在C#中通常 ...
- 一周一话题之一（EF-CodeFirst、MEF、T4框架搭建学习）
本话题是根据郭明峰博客<MVC实用架构系列>的搭建学习总结. -->目录导航 一.数据仓储访问的构建 1.UnitOfWork的构建 2.Repository的构建 ...
- 使用Common.Logging+log4net规范日志管理
Common.Logging+(log4net/NLog/) common logging是一个通用日志接口,log4net是一个强大的具体实现,也可以用其它不同的实现,如EntLib的日志.NLog ...
- Hibernate：组合模式解决树的映射
树经常用来展示目录结构,那么在Hibernate中怎样解决树的映射问题呢? 先来看一个分销商的树形结构的例子 所有分销商 东北区 辽宁省 沈阳医药 吉林省 华北区 北京市 北京医药 河北省 华南区 那 ...
- Adroid解析json
参考资料: http://www.open-open.com/lib/view/open1326376799874.html http://www.cnblogs.com/tt_mc/archive/ ...
- POJ_3662_Telephone_Lines_(二分+最短路)
描述 http://poj.org/problem?id=3662 给一张图,要将1与n连起来.可以有k条边免费,其他边自费,付费的值为所有自费边中最大的值.求最小付费. Telephone Line ...
- [资源共享]C#+AE构建GIS桌面端应用系统框架-全代码
转自:http://www.cnblogs.com/gispeng/archive/2008/10/06/1304534.html [资源共享]C#+AE构建GIS桌面端应用系统框架-全代码 ( ...