jQuery图片散乱无序排列样式代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片散乱无序排列样式代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

jQuery图片散乱无序排列样式代码

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery图片散乱无序排列样式代码</title>

<style>
	*{margin:0px;padding:0px;}
	body{ font-family: 'Avenir Next', "Lantinghei SC"; color: #555; font-size : 14px; -webkit-font-smoothing: antialiased; background-color: #0F0F0F; }

	.wrap{ width: 100%; height: 600px; background-color: #272727; position: absolute; top: 50%; margin: -300px 0 0 0; overflow: hidden;           }
	.photo{width:260px;height:320px;position:absolute;left:50%;top:50%;margin:-160px 0 0 -160px; perspective:800px;
		-webkit-transition:all .3s ,left 1s 0.3s,top 1s 0.3s;}
	.photo .photo_wrap{width:100%;height:100%;position:absolute;left:0;right:0;-webkit-transform-style:preserve-3d;
	-webkit-transform-origin:0% 50%;-webkit-transition:all .6s ;}
	.photo .photo_wrap .side{width:100%;height:100%;background:#eee;position:absolute;left:0;top:0;padding:20px;
		box-sizing:border-box;-webkit-backface-visibility:hidden;}
	.photo .photo_wrap .side_front{}
	.photo .photo_wrap .side_front .image{width:100%;height:250px;overflow:hidden;line-height:250px;}
	.photo .photo_wrap .side_front .image img{width:100%;vertical-align: middle;}
	.photo .photo_wrap .side_front .capation{width:100%;text-align:center;line-height:50px;font-size:16px;}
	.photo .photo_wrap .side_back{position:absolute;top:0;left:0;-webkit-transform:rotateY(-180deg);font-size:16px;}
	.photo_front .photo_wrap{-webkit-transform:rotateY(0deg);}
	.photo_back .photo_wrap{-webkit-transform:translate(260px,0) rotateY(-180deg);}
	/*导航条*/
	.nav{width:80%;height:30px;position:absolute;left:10%;bottom:30px;text-align:center;}
	.nav .i{ width: 30px; height: 30px; display: inline-block; border-radius: 50%; background-color: #00807A; -webkit-transform: rotateY(180deg) scale(0.48); cursor: pointer; -webkit-transition: all 1s; }
	.nav .i_current{-webkit-transform:rotateY(0deg) scale(1);}
	.nav .i_back{background:yellow;-webkit-transform:rotateY(180deg) scale(1);}

	.photo_center{z-index:999; left:50%;top:50%;margin:-160px 0 0 -130px;}
</style>

</head>
<body>

<div id="wrap" class="wrap">
	<div class="photo" id="photo_{{index}}" onclick="turn(this)">
	<div class="photo_wrap" >
			<div class="side side_front">
				<div class="image">
					<img src="images/{{img}}" alt="{{alt}}">
				</div>
				<div class="capation">{{caption}}
				</div>
			</div>
			<div class="side side_back">
				<div class="desc">
					{{desc}}
				</div>
		</div>
		</div>
	</div>
</div>

<script src="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>
</body>
</html>









JS代码(myData.js):

/** * Created by Administrator on 2015/4/25. */
 //定义mydata数组,用来分段返回值.var myData = [];
	//存储数据,包括内容为标题,图片地址名,和简介 .var myDataStr = "1.霍比特人<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\片长:144分钟<br>\<br>\<br>\2.冰雪奇缘<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\片长:144分钟<br>\<br>\<br>\3.速度与激情7<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\片长:144分钟<br>\<br>\<br>\4.一路惊喜<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\片长:144分钟<br>\<br>\<br>\5.三傻大闹宝莱坞<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\片长:144分钟<br>\<br>\<br>\6.甜心先生<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\片长:144分钟<br>\<br>\<br>\7.青春三<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\片长:144分钟<br>\<br>\<br>\8.美女<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\<br>\<br>\9.邓紫棋<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\<br>\<br>\10.铁塔<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\<br>\<br>\11.love<br>\<br>\导演:彼得.杰克逊<br>\编剧:弗兰.威尔士<br>\主演:傻逼<br>\类型:动作<br>\制片国家:美国<br>\语言:英语<br>\上映时间:2015-01-23<br>\"//定义函数分割myData数据,myData接收分好组的数据:以三个连续的<br>\标记为分界var d = myDataStr.split("<br><br><br>");
	//以三个br分出不同大主题for(var i=0;
	i< d.length;
	i++){
	var c = d[i].split("<br><br>");
	myData.push({
	img:c[0].replace('.',"")+".jpg",caption:c[0].split('.')[1],desc:c[1]}
)}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
392.86 KB
jquery特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章