jquery实现百叶窗效果

今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~

最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会失真了,后来经过学习,发现原来原理很简单:

基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过left值控制位置);然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也进行相应的改变。

文字描述起来很难懂的样子,先上html和css布局效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
</body>
</html>

布局很简单,接下来就是jq控制各个图片相对位置的变化了。

起始位置:五张图片的 left 值在css已经写好,就是平分了整个盒子的宽度;

鼠标经过时候:经过的那张图片完全显示,即占据宽度280px(图片的宽度是280px),剩余的宽度是  (盒子宽度-280px)/剩余的图片数量,根据所得值确定各个图片的终止位置,left值;

感觉自己说的好复杂,先看下鼠标讲过某张图的时候的动画效果:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
 });
})

当前图片能够愉快的玩耍了,接下来的重点就是其余图片怎么运动。

此时,我们可以把剩余的图片分成左右两部分,用jq 的  ":lt()" 和 ":gt()"方法写出剩余部分的效果。这里有一个小小的坑,自己也是绕了半天,最后还是别人提醒的才绕出来。

以当前图片左侧动画效果为例,最开始我是这么写的

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
  $(“img:lt( idx )“).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 });
})

看上去没有什么错误,见证奇迹~~~奇迹~~迹~~~然而并没有什么奇迹,原因就是  $(“img:lt( idx )“) 这种写法,里面的idx已经不是变量了,所以无法获取当前的 idx 值,我们可以在外面定义一个变量,同时用 + 连接 lt 和变量 idx,再把变量引入进去即可。

因此更改后如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
var imgL;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
  imgL = "img:lt(" + idx + ")"
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
  $(imgL).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 });
})

这样奇迹就出现了~~ 同样的道理,右侧也是同样的方法。

最终代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 width:280px;
 height:186px;
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
//精简之后的方法
var lefts;
var idx;
var imgL;
var imgR;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 imgL = "img:lt(" + idx + ")" //获取当前左侧的所有图片,如果直接用 $("img:lt(idx)"),idx会被当做字符串,获取不到对应的值
 imgR = "img:gt(" + idx + ")" //获取当前右侧的所有图片
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
 //左侧图片的变化
 $(imgL).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 //右侧图片的变化
 $(imgR).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()+7) * 35}, 1000)
 })
 });
})
$("img").each(function(){
 $(this).mouseleave(function(){
 $("img").each(function(){
 $(this).stop(true).animate({"left" : ($(this).index())*84}, 1000);
 })
 });
})
</script>
</body>
</html>

鼠标移出效果,就是恢复到最开始的状态,就不在叙述了。

方法可能不是最简单的方法,说的也可能不甚详尽,希望大神多多指教,我也多多学习~~~

ps: 图片不知道怎么加上来,稍后看下再改吧。欢迎各位加入交流学习前端群 466039913

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

时间: 2017-01-09

jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持.焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调. 在线演示     源码下载 HTML代码 <div id="slider"> <img src="images/1.jpg" alt="我们1" title=&quo

jquery实现页面百叶窗走马灯式翻滚显示效果的方法

本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法.分享给大家供大家参考.具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: 复制代码 代码如下: jQuery.fn.extend((     function($){         var l = 4,//卷动行数             t=5000,//卷动完一次后,隔多长时间下次开始卷动             rt=500,//每个n卷动过去的耗时             n="li",

jQuery 翻牌或百叶窗效果(内容三秒自动切换)

核心代码: 复制代码 代码如下: $(function(){ var timer = true; //执行向上或向下的开关 var liindex = 0; //LI的索引 var $div = $(".byc").find("div"); //每隔三秒执行一次变换LI的内容 var set1 = setInterval(function(){ ainbyc($div); liindex = 0; timer = !timer; },3000); //LI变换的方式

jQuery弹出div层过2秒自动消失

下面给大家分享一段代码关于jquery弹出div层并自动消失的实现代码,废话不多说了,具体代码如下所示: var HuiFang={ m_tishi :null,//全局变量 判断是否存在div, //提示div 等待2秒自动关闭 Funtishi: function (content, url) { if (HuiFang.m_tishi == null) { HuiFang.m_tishi = '<div class="xiaoxikuang none" id="a

jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像)

本文主要介绍jsp实现图像震动效果.闪烁效果.自动切换图像的资料,废话不多说了,具体代码如下: 1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

jQuery实现图片与文字描述左右滑动自动切换的方法

本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

jquery实现瀑布流效果 jquery下拉加载新数据

瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢.今天我就来记录一下关于用jquery实现瀑布流效果的代码: 一.页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item: 2. tips是页面加载数据的时候用来提示用户的文本: <div class="wrapper"> <div class="items"> <div class="item"></div> &l

jQuery实现的倒计时效果实例小结

本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

基于jquery实现多级菜单效果

本文实例为大家分享了jquery实现多级菜单效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } ul,li{ list

jquery跟随屏幕滚动效果的实现代码

我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#arc

基于jquery实现省市联动效果

由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo