这是一款jquery图片散乱无序排列效果_jquery图片效果免费下载。
开始使用
引入CSS和JS
<link href="css/dmaku.css" rel="stylesheet"/> <script src="js/myData.js"></script>
核心代码
<script> function $(selector){ var method = selector.substr(0,1) == "."?"getElementsByClassName":"getElementById"; return document[method](selector.substr(1)); } function turn(elem){ var cls = elem.className; var n = elem.id.split("_")[1]; if(!/photo_center/.test(cls)){ rsort(n); return; } if(/photo_front/.test(cls)){ cls= cls.replace('photo_front','photo_back'); $('.i')[n].className=$('.i')[n].className.replace(/i_current/,'i_back'); } else if(/photo_back/.test(cls)){ cls = cls.replace('photo_back','photo_front'); $('.i')[n].className=$('.i')[n].className.replace(/i_back/,'i_current'); } return elem.className = cls; } //遍历myData数据长度 , 写入html ;加载图片的时候 , 还顺带加上对应数量的导航: function addMyData(){ var template = $("#wrap").innerHTML; //取出wrap里面的值,作为模板, 留待后面替换 var oHtml = [] ; //存储要替换的内容 var oNav = [] ; for(var i = 0 ;i < myData.length;i++){ var _html = template.replace('{{index}}',i) .replace('{{alt}}',myData[i].caption) .replace('{{img}}',myData[i].img) .replace('{{caption}}',myData[i].caption) .replace('{{desc}}' , myData[i].desc) oHtml.push(_html); oNav.push('<span id="nav_'+i+'" class="i" onclick ="turn($(\'#photo_'+i+'\'))"></span>'); } //遍历创建完成之后 , 不但要把图片传禁区 , 还要把对应 的nav导航条假如: oHtml.push('<div class="nav" id="nav">'+oNav.join("") +'</div>'); $("#wrap").innerHTML = oHtml.join(""); //图片加载后调用一下随机抽取居中图片: rsort(random([0,myData.length-1])); } addMyData(); //调用函数 , 载入图片 . //取得在特定范围内随机的值: function random(range){ var min = Math.min(range[0],range[1]); var max = Math.max(range[0],range[1]); var diff = max - min + 1 ;//[3,5] var n = Math.floor(diff*Math.random())+min; return n; } //取得左右区域图片的取值活动范围: function range(){ //定义json数组格式:返回对象 var range = { left:{ x:[], y:[] }, right:{ x:[], y:[] } } var wrap = { w:$("#wrap").clientWidth, h:$("#wrap").clientHeight } var photo = { w:$(".photo")[0].clientWidth, h:$(".photo")[0].clientHeight } range.wrap = wrap; //向json里面添加json元素. range.photo = photo; //定义left的xy值范围 , 和right的xy范围值. range.left.x=[0-photo.w/2,wrap.w/2-photo.w/2]; //定义json数组中的元素 , 用.方法. range.left.y=[0-photo.h/2,wrap.h-photo.w/2]; range.right.x=[wrap.w/2-photo.w/2,wrap.w-photo.w/2]; //定义json数组中的元素 , 用.方法. range.right.y=[0-photo.h/2,wrap.h-photo.w/2]; return range; } //随机选取一个作为中间的特殊元素,及两边排序. function rsort(n){ //获取所有的photo , 准备排序 var _photo = $(".photo") ; var photos =[]; for(var i = 0 ; i<_photo.length;i++){ _photo[i].className=_photo[i].className.replace(/\s*photo_center\s*/," "); _photo[i].className=_photo[i].className.replace(/\s*photo_front\s*/," "); _photo[i].className=_photo[i].className.replace(/\s*photo_back\s*/," "); _photo[i].className += " photo_front "; _photo[i].style.left = ""; _photo[i].style.top = ""; _photo[i].style['-webkit-transform'] = "rotate(360deg) scale(1.3)"; photos.push(_photo[i]); } //定义一张随机图片居中显示: var photo_center = $("#photo_"+n); photo_center.className += " photo_center "; //剔除掉居中显示图片 : photo_center = photos.splice(n,1); //定义变量存储数据值 var ranges = range(); var photos_left = photos.splice(0,Math.ceil(photos.length/2)); var photos_right = photos; //通过随机的left和top值 , 随意排列图片: for(var j =0 ;j<photos_left.length;j++){ photos_left[j].style.left = random(ranges.left.x)+"px"; photos_left[j].style.top = random(ranges.left.y)+"px"; photos_left[j].style["-webkit-transform"] ="rotate("+random([-150,150])+"deg) scale(1)"; } for(var s =0 ;s<photos_right.length;s++){ photos_right[s].style.left = random(ranges.right.x)+"px"; photos_right[s].style.top = random(ranges.right.y)+"px"; photos_right[s].style["-webkit-transform"] ="rotate("+random([-150,150])+"deg) scale(1)"; } //图片排序后 , 顺带选出当前选中按钮: var navs = $('.i'); for(var i = 0 ; i< navs.length;i++){ //统一先清空: navs[i].className = navs[i].className.replace(/\s*i_current\s*/,''); navs[i].className = navs[i].className.replace(/\s*i_back\s*/,''); } navs[n].className += " i_current " ; } </script>