<html>
<head>
<meta charset="utf-8">
<title>电视墙</title>
<script type="text/javascript" src="lib/easyui/jquery.min.js"/></script>
</head>
<style>
html,body{
margin:0;
padding:0;
}
.left,.right{
width:100px;
float:left;
height:100%;
display:table;
}
.row {
display:table-row;
}
.videocell {
display:table-cell;
text-align:center;
vertical-align:middle;
height:33.33%;
padding:20px;
}
.cell {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%;
}
.center{
float:left;
height:100%;
overflow:hidden;
}
.table{
margin: auto;
height:100%;
display:table;
transition: All 1s ease-in-out;
}
#leftbtn{
display:block;
width:48px;
height:48px;
margin:auto;
background:url(image/left.png) no-repeat;
}
#rightbtn{
display:block;
width:48px;
height:48px;
margin:auto;
background:url(image/right.png) no-repeat;
}
#leftbtn:HOVER{
background:url(image/left1.png) no-repeat;
}
#rightbtn:HOVER{
background:url(image/right1.png) no-repeat;
}
.widget{
width:192px;
height:108px;
transition: All 1s ease-in-out;
}
.point{
position:absolute;
left:50%;
top:50%;
display:none;
}
.pop{
position:absolute;
width:960px;
height:540px;
left:-480px;
top:-270px;
}
.image{
position:fixed;
width:192px;
height:108px;
transition: All 2s ease-in-out;
}
</style>
<body>
<div class="left">
<div class="cell">
<a href="#" id="leftbtn"></a>
</div>
</div>
<div class="center">
<div class="table">
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
<div class="right">
<div class="cell">
<a href="#" id="rightbtn"></a>
</div>
</div>
<div class="point">
<div class="pop">
</div>
</div>
<script type="text/javascript">
$('.center').css('width',($(document).width()-200)+'px');
var start = 0;
var col = 4;//列
var row = 3;//行
var videoArr = [
{img:'image/widget.jpg',name:'widget1'},
{img:'image/widget.jpg',name:'widget2'},
{img:'image/widget.jpg',name:'widget3'},
{img:'image/widget2.jpg',name:'widget4'},
{img:'image/widget2.jpg',name:'widget5'},
{img:'image/widget2.jpg',name:'widget6'},
{img:'image/widget2.jpg',name:'widget7'},
{img:'image/widget.jpg',name:'widget8'},
{img:'image/widget.jpg',name:'widget9'},
{img:'image/widget3.jpg',name:'widget10'},
{img:'image/widget3.jpg',name:'widget11'},
{img:'image/widget.jpg',name:'widget12'},
{img:'image/widget3.jpg',name:'widget13'},
{img:'image/widget3.jpg',name:'widget14'},
{img:'image/widget3.jpg',name:'widget15'},
{img:'image/widget4.jpg',name:'widget16'},
{img:'image/widget2.jpg',name:'widget17'},
{img:'image/widget.jpg',name:'widget18'},
{img:'image/widget.jpg',name:'widget19'},
{img:'image/widget3.jpg',name:'widget20'},
{img:'image/widget.jpg',name:'widget21'},
{img:'image/widget.jpg',name:'widget22'},
{img:'image/widget.jpg',name:'widget23'},
{img:'image/widget2.jpg',name:'widget24'},
{img:'image/widget2.jpg',name:'widget25'},
{img:'image/widget2.jpg',name:'widget26'},
{img:'image/widget2.jpg',name:'widget27'},
{img:'image/widget.jpg',name:'widget28'},
{img:'image/widget.jpg',name:'widget29'},
{img:'image/widget3.jpg',name:'widget30'}
];
createCell();
showLR();
addListener();
$('#leftbtn').click(function(){
if(start<row)return;
start -= row;
showLR();
$('.table').css('transform','translateX(-'+Math.floor($('.center').width()/col)*(start/row)+'px)');
});
$('#rightbtn').click(function(){
start += row;
showLR();
$('.table').css('transform','translateX(-'+Math.floor($('.center').width()/col)*(start/row)+'px)');
});
function createCell(){
var max = Math.ceil(videoArr.length/row);
for(var $i=0;$i<max;$i++){
$('.row').each(function(i){
if(($i*row+i)<videoArr.length){
var item = videoArr[$i*row+i];
$(this).append('<div class="videocell">'+
'<a href="javascript:void(0)"><img id="img_'+($i*row+i)+'" class="widget" src="'+item.img+
'" title="'+item.name+
'"></a></div>');
$(this).find('img').ready(function(){
$('.widget').css('box-shadow','0 2px 1px 0 #963004, 0 4px 1px -1px #852A03, 0 6px 1px -2px #812802, 0 8px 1px -3px #7D2803, 0 10px 1px -4px #661F01, 0 12px 1px -5px #521A02, 0 14px 1px -6px #401601, 0 16px 1px -7px #3C1501, 0 18px 1px -8px #2D1001, 0 20px 1px -9px #110500, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.75), 0 20px 4px -6px rgba(0, 0, 0, 0.9), 0 45px 5px -5px rgba(0, 0, 0, 0.05), 0 35px 10px -5px rgba(0, 0, 0, 0.1), 0 25px 55px 5px rgba(0, 0, 0, 0.15)');
});
$('.videocell').css('width',Math.floor($('.center').width()/col)+'px');
}else{
$(this).append('<div class="videocell"></div>');
}
});
}
$('.table').css('width',Math.floor($('.center').width()/col)*max+'px');
}
function showLR(){
if(start<row){
$('#leftbtn').hide();
}else{
$('#leftbtn').show();
}
if(start>(videoArr.length-(col*row+1))){
$('#rightbtn').hide();
}else{
$('#rightbtn').show();
}
}
function addListener(){
$('.widget').click(function(){
var index = parseInt($(this).attr('id').split('_')[1]);
var item = videoArr[index];
showImg(item.img,$(this).offset().left,$(this).offset().top);
});
}
function showImg(src,x,y){
$('.pop').html('<img class="image" src="'+src+'">');
$('.image').css('left',x+'px');
$('.image').css('top',y+'px');
$('.point').show();
$('.image').click(function(){
hideImg();
});
setTimeout(function(){
var left = ($(window).width()-960)/2;
var top = ($(window).height()-540)/2;
$('.image').css('left',left+'px');
$('.image').css('top',top+'px');
$('.image').css('width','960px');
$('.image').css('height','540px');
}, 100);
}
function hideImg(){
$('.pop').empty();
$('.point').hide();
}
</script>
</body>
</html>
1887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
