图片展示效果
2011-11-27 14:37
337 查看
张娜拉,韩国的
My Digital Story
不知道是什么图来的
我的Logo,Studio拼错了都不知道,汗一个。
四季图吧这是,但我分不清夏和秋
http://www.lanrentuku.com/lanren/jscode/js-0115/
上面的链接是群上一位兄弟发的一个图片展示效果,并叹息道:jQuery什么时候才有这么cool的例子啊?
我想说jQuery写这样的例子不难吧,于是就尝试着写一下.
先看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比较菜,将就吧,达到效果就好:
#photoShow{}{
.photo{}{
.photo img{}{
.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代码。
首先就是做一些初始化的工作:
/article/4659560.html
My Digital Story
不知道是什么图来的
我的Logo,Studio拼错了都不知道,汗一个。
四季图吧这是,但我分不清夏和秋
http://www.lanrentuku.com/lanren/jscode/js-0115/
上面的链接是群上一位兄弟发的一个图片展示效果,并叹息道:jQuery什么时候才有这么cool的例子啊?
我想说jQuery写这样的例子不难吧,于是就尝试着写一下.
先看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比较菜,将就吧,达到效果就好:
#photoShow{}{
.photo{}{
.photo img{}{
.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"); }); }); }); });
/article/4659560.html
相关文章推荐
- SlideView 图片滑动(扩展/收缩)展示效果
- js实现的图片滚动兼展示效果的特效
- JS实现图片高亮展示效果实例
- Silverlight的诸多效果(小鸟飞,白云走,气球飘,图片展示)附源码
- 非常漂亮的图片展示效果,倒影,可以用用鼠标中键滚动,半透明的效果,也很方便改为动态的,带图
- Android自定义控件显示多页图片展示效果并自动翻页适合广告展示
- 图片切换效果展示
- 可自动播放、拖动的js图片展示效果(二)(类似土豆网)
- 满横屏(full-x-width)图片展示效果
- JavaScript 图片滑动展示效果
- jquery.gridrotator实现响应式图片展示画廊效果
- 实现图片滑动切换展示效果
- jQuery实例:图片展示效果
- 一款基于jquery的手风琴图片展示效果
- 【Android 界面效果30】Android中ImageSwitcher结合Gallery展示SD卡中的资源图片
- 使用JS实现图片展示瀑布流效果的实例代码
- JS实现图片高亮展示效果实例
- 一串数字用图片替换展示效果 (固定展示6位数字,不够前补齐0)
- jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。
- js实现3D图片环展示效果