您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery练习 > 正文

jquery实现图片墙特效多张小图片集合图片墙排列布局

2012-08-20 11:08:32 作者:天外飞仙 人气:4999 Views

jquery更新到1.8了,很是速度呐,想当初从1.4版本开始,陪伴着jquery经历的不少时间啦.下面分享一个jquery实现图片墙特效多张小图片集合图片墙排列布局

之前前端开发经理要求搞的,趴下了放自己网站上去,觉得不错,趴下了精简个,以备后面用哈.

这个还真的很炫啊,jquery图片特效用多张小图片集合排列出图片墙布局,jquery图片墙鼠标滑过图片动画提示图片详细信息,记得以前在discuz论坛上看到类似的效果

主要javascript如下

<script type="text/javascript">/*会员图片墙*/var memberShow = function(val){ var mem_div = $("."+val); var memli = mem_div.find("li.memLI"); var mem_len = memli.length; var pop_info = mem_div.find(".popInfo"); var layer_Mode = mem_div.find(".layerMode"); var thumb1 = [];//缓存数组 var thumb2 = [];//缓存数组 var init_left,init_top; var hovertime; /*图片位置随机显示*/ function imgRand(){ //随机生成条目,加载随机的样式,插入dom里面,先隐藏 for(var i = 0; i<mem_len; i++){ thumb1[i] = i; thumb2[i] = i; } var thumb1_len = thumb1.length; var thumb2_len = thumb2.length; var index = 0; (function(){ if(index >= mem_len){ return; } var s_index = parseInt(Math.random()*thumb2_len); //显示随机数 memli.eq(thumb2[s_index]).css('visibility','visible'); thumb2.splice(s_index,1); thumb2_len--; index++; window.setTimeout(arguments.callee,50); })(); } imgRand(); memli.bind({ mouseover : function(){ THIS = $(this); hovertime = setTimeout(function(){ pop_info.css({"display":"block"}); var addinfo = THIS.find(".addInfo").html(); pop_info.html(addinfo); var position = THIS.position(); var new_left,new_top; var cssShadow; var _margin; if(position.left <= mem_div.width() - pop_info.width()){ new_left = position.left -2; cssShadow = "imgShadow1"; _margin = "left"; pop_info.find("img").css("float","left"); pop_info.find("p").css({"float":"left","margin-left":"-50px"}); } if(position.left > mem_div.width() - pop_info.width()){ new_left = position.left - THIS.width()*3 -5; cssShadow = "imgShadow2"; _margin = "right"; pop_info.find("img").css("float","right"); pop_info.find("p").css({"float":"right","margin-right":"-50px","text-align":"right"}); } if(position.top <= mem_div.height() - pop_info.height()){ new_top = position.top - 2; } if(position.top > mem_div.height() - pop_info.height()){ new_top = position.top - THIS.height()*2 - 4; } pop_info.css({"top":new_top,"left":new_left}); pop_info.find("img").addClass(cssShadow); if(_margin == "left"){ pop_info.find("p").animate({ marginLeft: "0px" }, 300 ); } else if(_margin == "right"){ pop_info.find("p").animate({ marginRight: "0px" }, 300 ); } layer_Mode.fadeTo("fast", 0.6); },300); }, mouseout: function(){ clearTimeout(hovertime); } }) pop_info.bind('mouseout',function(){ layer_Mode.css({"display":"none"}); pop_info.css({"display":"none","top":0,"left":0}); pop_info.html(""); })}$(document).ready(function(){ memberShow("memberShow");})</script>

在线效果DEMO

链接:http://www.jqueryba.com/774.html(转载时请注明本文出处及文章链接)
分类:jQuery练习

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!