先看Html:
HTML 代码
<div id="photoShow">
<div class="photo">
<img src="p1.jpg" />
<span>张娜拉,韩国的</span>
</div>
<div class="photo">
<img src="p2.jpg" />
<span>My Digital Story</span>
</div>
<div class="photo">
<img src="p3.jpg" />
<span>不知道是什么图来的</span>
</div>
<div class="photo">
<img src="p4.jpg" />
<span>我的Logo,Studio拼错了都不知道,汗一个。</span>
</div>
<div class="photo">
<img src="p5.jpg" />
<span>四季图吧这是,但我分不清夏和秋</span>
</div>
</div>
</div>
然后我们写一个CSS来控制一下这个HTML的样式,CSS比较菜,将就吧,达到效果就好:
CSS
#photoShow{}{
border: solid 1px #C5E88E;
overflow: hidden; /**//*图片超出DIV的部分不显示*/
width: 580px;
height: 169px;
background: #C5E88E;
position: absolute;
}
.photo{}{
position: absolute;
top: 0px;
width: 490px;
height: 169px;
}
.photo img{}{
width: 490px;
height: 169px;
}
.photo span{}{
padding: 5px 0px 0px 5px;
width: 490px;
height: 30px;
position: absolute;
left: 0px;
bottom: -32px; /**//*介绍内容开始的时候不显示*/
background: black;
filter: alpha(opacity=50); /**//*IE透明*/
opacity: 0.5; /**//*FF透明*/
color: #FFFFFF;
}
完成上面的准备工作后,我们下面开始jQuery代码。
首先就是做一些初始化的工作:
$(document).ready(function(){
var imgDivs = $("#photoShow>div");
var imgNums = imgDivs.length; //图片数量
var divWidth = parseInt($("#photoShow").css("width")); //显示宽度
var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度
var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度
var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //图片介绍信息的高度
imgDivs.each(function(i){
$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)});
$(imgDivs[i]).hover(function(){
//处理鼠标进入的时候
},function(){
//处理鼠标离开的时候
});
});
});首先我们定义了一些变量,方便我们后面使用。
然后就是使用了一个 each() 的函数在每一个匹配的元素进行事件处理。这里是每一个<div class="photo"> 元素分别进行事件的处理。
然后看一下下面这一句:$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums), "top":"0px"});这句是通过CSS来控制每一个图片的层次和显示位置。然后就是用一个 hover() 函数来处理鼠标的hover事件。
首先看一下鼠标进入图片的时候该怎么处理:$(imgDivs[i]).hover(function(){
//$(this).find("img").css("opacity","1");
$(this).find("span").stop().animate({bottom: 0}, "slow");
imgDivs.each(function(j){
if(j<=i){
$(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
}else{
$(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
}
});
},function(){
//处理鼠标离开时候的事件
});在这里所有的动画效果都是通过 animate() 函数修改CSS来控制元素的显示位置来实现的。
这里注意一下就是在调用 animate() 函数前都调用了 stop() 函数。stop() 函数是用来停止当前元素的所有执行中的事件。
j<=i 的判断就是判断鼠标hover的当前图片和该图片前面的图片与该图片后面的图片的分割线。
鼠标离开的处理也差不多,下面之完整的代码:$(document).ready(function(){
var imgDivs = $("#photoShow>div");
var imgNums = imgDivs.length; //图片数量
var divWidth = parseInt($("#photoShow").css("width")); //显示宽度
var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度
var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度
var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //图片介绍信息的高度
imgDivs.each(function(i){
$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)});
$(imgDivs[i]).hover(function(){
//$(this).find("img").css("opacity","1");
$(this).find("span").stop().animate({bottom: 0}, "slow");
imgDivs.each(function(j){
if(j<=i){
$(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
}else{
$(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
}
});
},function(){
imgDivs.each(function(k){
//$(this).find("img").css("opacity","0.7");
$(this).find("span").stop().animate({bottom: -spanHeight}, "slow");
$(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow");
});
});
});
});
http://www.corange.cn/archives/2008/11/2154.html
分享到:
相关推荐
jQuery插件:可拖动的图片展示实例(效果超酷) jQuery插件:可拖动的图片展示实例(效果超酷)
jquery富士日本图片展示效果,很棒的实例,值得收藏和瞎子啊!
jQuery实例教程,滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行换色、收缩展开效果、图片展示
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果
插件描述:仿微信朋友圈图片展示效果。 参考实例:http://www.jq22.com/jquery-info6186
圆形旋转的jquery图片展示特效,老外制作的图片浏览特效,运行十分流畅,兼容性也相当好。点击右侧的控制按钮,图片会向下滚动一张,三角形对应的图片是当前图片,会在圆形的中心显示大图片,同时显示出文字提示内容...
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
jquery实用产品图片展示动感切换效果源码 jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 jquery异步加载图片的插件jqGalScroll下载 jquery微型相册插件Micro Image Gallery下载 jQuery把图片放大及变亮特效插件...
jQuery实现的简单带有关闭按钮的lightbox高亮图片展示效. 使用Jquery的类库完成,实现方法很简单,照着实例可以自己完成,并且可以扩展到多种多样的图片展示效果中。
jQuery三维图片展示,支持鼠标拖动 点击放大图片,可看作是一个比较另类的焦点图特效,自动改变图片层级,单击或拖动图片后,该图片会置于最上层显示,鼠标单击图片右下角的按钮,可放大显示图片。
jquery 瀑布流实例最流行瀑布流图片展示
jquery Slicebox 3D图片展示,用到了jquery.easing.1.3.js、jquery.slicebox.min.js、jquery.slicebox.js等文件,展示了各个方向上的图片滚动切换以及过渡效果,自带的实例非常丰富,兼容IE8以下浏览器,及火狐和...
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
这是一款带有文字动画展示效果与方形索引按钮的jQuery幻灯片图片轮播代码。
这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox...图片展示框提供向前/向后控制并能够为每一张图 片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。
36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38.jquery异步加载图片的插件jqGalScroll下载 39.jquery微型相册插件Micro Image Gallery下载 40.jQuery...
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 代码: [removed] ...
一款jQuery图片展示插件,外观和功能类似于ImageBox插件,可在网页上快速显示图片,并...jQuery辅助实现了本款插件的动画放大效果,带有动画特效的图片显示,配合CSS加上的阴影特效,使得整个图片展示看上去非常漂亮。