图片任一点击放大

Html

Css

* {
	margin:0;
	padding:0;
}
.container {
	height:300px;
	margin:0 auto;
	background-color:#fff;
	overflow:hidden;
	position:relative;
}
.container ul li {
	list-style:none;
	background-color:yellow;
}
.first {
	/*margin-left:-90px;
	*/
}
.other {
	/*margin-left:60px;
	*/
}
.big {
	width:240px;
	height:300px;
}
.small {
	width:180px;
	height:220px;
}
.img_big {
	width:240px;
	height:200px;
	margin:0 auto;
	display:block;
}
.img_small {
	width:180px;
	height:120px;
	margin:0 auto;
	display:block;
}
.text_small {
	width:180px;
	background:#ffffff;
	height:100px;
	overflow:hidden;
	text-overflow:ellipsis;
	margin:0 auto;
}
.text_big {
	width:240px;
	background:#ffffff;
	height:100px;
	overflow:hidden;
	text-overflow:ellipsis;
	margin:0 auto;
}
.item {
	float:left;
	position:absolute;
}
.slide-text-p {
	margin-left:5px;
}

var _BIG_WIDTH = 240;
var _SMALL_WIDTH = 180;
var _BIG_HEIGHT = 300;
var _SMALL_HEIGHT = 220;

var _IMG_BIG_WIDTH = 240;
var _IMG_SMALL_WIDTH = 180;
var _IMG_BIG_HEIGHT = 200;
var _IMG_SMALL_HEIGHT = 120;

var _TEXT_BIG_WIDTH = 240;
var _TEXT_SMALL_WIDTH = 180;
var _TEXT_BIG_HEIGHT = 100;
var _TEXT_SMALL_HEIGHT = 100;

var _SPAN_SIZE = 60;
var _SPEED = 500; //越大越慢

var _pos_list_src = new Array();
var _path_list = new Array();
var _num = 0;
var _timer = null;
var _step = 0;
var _finish_count = 0;

function creat_img_list(num) {
    pos = new Array();
    $("#ulContainer").html("");

style = "small other";
            img_style = "img_small";
            text_style = "text_small";

}
        $("#ulContainer").append("<li style='left:" + pos["index" + i] + "px;' index='" + i + "' class='item " + style + "'>" +
            "<img src='http://www.jq22.com/img/cs/500x500.png' class='" + img_style + " ' />" +
            '<div class=" ' + text_style + '"> ' +
            ' <h6 class=" "> ' + "以上是张图片" + '</h6>' +
            ' <p class=""> ' + "文字" + '</p>' +
            ' <p class="slide-text-p "> ' + "这里可以随意输入文字。" + '</p>' +
            '</div> ' +
            "</li>");
    }

return pos;

}

function count_img_num(container_width) {
    var num = 0;
    container_width = container_width - _BIG_WIDTH - _SPAN_SIZE; //先把大的宽度和一个间隔去掉
    num = parseInt(container_width / (_SMALL_WIDTH + _SPAN_SIZE)) + 5;

return num;
}

function move(item) {
    var path = $(item).attr("path").split(",");
    var next = parseInt($(item).attr("next"));

if (next == path.length - 1) {
        _finish_count = _finish_count - 1;
        return;
    }

next = next + 1;
    $(item).attr("next", next);
    var img = $(item).children()[0];
    var text = $(item).children()[1];

if (path[next] == _num - 1 && path[next - 1] == 0) //最左到最右，执行补间动画
    {
        $(item).animate({
                "left": -350,
                "width": _SMALL_WIDTH,
                "height": _SMALL_HEIGHT
            }, _SPEED,
            function() {
                var path = $(this).attr("path").split(",");
                var next = parseInt($(this).attr("next"));

//移动到最右边
                $(this).css("left", _pos_list_src["index" + path[next]] + "px");

move(this);
            });
    } else if (path[next] == 0 && path[next - 1] == _num - 1) //最右到最左，不执行补间动画，直接飞过去就好了
    {
        $(item).css("left", -350 + "px");

$(item).animate({
                "left": -90,
                "width": _SMALL_WIDTH,
                "height": _SMALL_HEIGHT
            }, _SPEED,
            function() {
                var path = $(this).attr("path").split(",");
                var next = parseInt($(this).attr("next"));

move(this);
            }
        );

} else {
        var width = _SMALL_WIDTH;
        var height = _SMALL_HEIGHT;

var img_width = _IMG_SMALL_WIDTH;
        var img_height = _IMG_SMALL_HEIGHT;

var text_width = _TEXT_SMALL_WIDTH;
        var text_height = _TEXT_SMALL_HEIGHT;

if (path[parseInt($(item).attr("next"))] == 2) {
            width = _BIG_WIDTH;
            height = _BIG_HEIGHT;

img_width = _IMG_BIG_WIDTH;
            img_height = _IMG_BIG_HEIGHT;

text_width = _TEXT_BIG_WIDTH;
            text_height = _TEXT_BIG_HEIGHT;
        }

$(img).animate({
            "width": img_width,
            "height": img_height
        }, _SPEED);
        $(text).animate({
            "width": text_width,
            "height": text_height
        }, _SPEED);

function init_img() {
    var container_width = document.body.clientWidth;
    $("#divContainer").width(container_width);

_num = count_img_num(container_width);
    $("#ulContainer").width(_num * _SMALL_WIDTH + _BIG_WIDTH + _num * _SPAN_SIZE);
    _pos_list_src = creat_img_list(_num);
    $(".item").click(function() {

//console.log("_finish_count:" +_finish_count);
        if (_finish_count != 0) {
            return;
        }

_finish_count = _num;

var current_click_index = parseInt($(this).attr("index"));
        _step = current_click_index - 2;
        //先修改显示顺序
        for (var i = 0; i < $("#ulContainer li").length; ++i) {
            var pos_des = 0;
            var item = $("#ulContainer li")[i];
            var index = parseInt($(item).attr("index"));

if (_step == 0) {
                _finish_count = 0;
                return;
            }

if (index == current_click_index) {
                pos_des = 2;
            } else {
                if (_step < 0) //表示点击的是左边的
                {
                    if (index - _step < _num) //后面的依次往后
                    {
                        pos_des = index - _step;

} else //超出的飞到前面来
                    {
                        pos_des = -_num + index - _step;
                    }
                } else {
                    if (index - _step < 0) //超出的飞到后面来
                    {
                        pos_des = _num + (index - _step);
                    } else //后面的依次往前
                    {
                        pos_des = index - _step;
                    }
                }
            }

$(item).attr("index", pos_des);

//存路径
            //console.log(index,pos_des,_step,_num);
            var path = [];
            if (_step < 0) {
                if (index > pos_des) {
                    for (var cell = index + 1; cell <= _num - 1; ++cell) {
                        path.push(cell);
                        //console.log("x1" + cell);
                    }

for (var cell = 0; cell <= pos_des; ++cell) {
                        path.push(cell);
                        //console.log("x2" + cell);
                    }

} else {
                    for (var cell = index + 1; cell <= pos_des; ++cell) {
                        path.push(cell);
                        //console.log("y" +　cell);
                    }
                }
            } else {
                if (index > pos_des) {
                    for (var cell = index - 1; cell >= pos_des; --cell) {
                        path.push(cell);
                        //console.log("m" + cell);
                    }
                } else {
                    for (var cell = index - 1; cell >= 0; --cell) {
                        path.push(cell);
                        //console.log("n1" + cell);
                    }

for (var cell = _num - 1; cell >= pos_des; --cell) {
                        path.push(cell);
                        //console.log("n2" + cell);
                    }
                }
            }
            _path_list["index" + pos_des] = path
            //console.log("xxxxxxxxxxxxxx");
        }

for (var i = 0; i < $("#ulContainer li").length; ++i) {
            var item = $("#ulContainer li")[i];
            var index = $(item).attr("index");
            var path = _path_list["index" + index];
            $(item).attr("next", 0);
            $(item).attr("path", path);
            var img = $(item).children()[0];
            var text = $(item).children()[1];
            if (_step > 0) {
                if (path[parseInt($(item).attr("next"))] == _num - 1) //最左到最右，执行补间动画
                {
                    $(item).animate({
                            "left": -350,
                            "width": _SMALL_WIDTH,
                            "height": _SMALL_HEIGHT
                        }, _SPEED,
                        function() {
                            var path = $(this).attr("path").split(",");
                            var next = parseInt($(this).attr("next"));

//移动到最右边
                            $(this).css("left", _pos_list_src["index" + path[next]] + "px");

move(this);
                        }
                    );
                } else {
                    var path = $(item).attr("path").split(",");
                    var next = parseInt($(item).attr("next"));
                    var width = _SMALL_WIDTH;
                    var height = _SMALL_HEIGHT;

var img_width = _IMG_SMALL_WIDTH;
                    var img_height = _IMG_SMALL_HEIGHT;

var text_height = _TEXT_SMALL_HEIGHT;
                    var text_width = _TEXT_SMALL_WIDTH;

if (path[parseInt($(item).attr("next"))] == 2) {
                        width = _BIG_WIDTH;
                        height = _BIG_HEIGHT;

img_width = _IMG_BIG_WIDTH;
                        img_height = _IMG_BIG_HEIGHT;

text_width = _TEXT_BIG_WIDTH;
                        text_height = _TEXT_BIG_HEIGHT;

}

$(img).animate({
                        "width": img_width,
                        "height": img_height
                    }, _SPEED);
                    $(text).animate({
                        "width": text_width,
                        "height": text_height
                    }, _SPEED);

$(item).animate({
                            "left": _pos_list_src["index" + path[next]],
                            "width": width,
                            "height": height
                        }, _SPEED,
                        function() {
                            move(this);
                        }
                    );
                }
            } else {
                if (path[parseInt($(item).attr("next"))] == 0) //最右到最左，不执行补间动画，直接飞过去就好了
                {
                    $(item).css("left", -350 + "px");

$(item).animate({
                            "left": -90,
                            "width": _SMALL_WIDTH,
                            "height": _SMALL_HEIGHT
                        }, _SPEED,
                        function() {
                            var path = $(this).attr("path").split(",");
                            var next = parseInt($(this).attr("next"));

move(this);
                        }
                    );

} else {
                    var path = $(item).attr("path").split(",");
                    var next = parseInt($(item).attr("next"));
                    var img_width = _IMG_SMALL_WIDTH;
                    var img_height = _IMG_SMALL_HEIGHT;

var text_height = _TEXT_SMALL_HEIGHT;
                    var text_width = _TEXT_SMALL_WIDTH;

var width = _SMALL_WIDTH;
                    var height = _SMALL_HEIGHT;
                    if (path[parseInt($(item).attr("next"))] == 2) {
                        width = _BIG_WIDTH;
                        height = _BIG_HEIGHT;

img_width = _IMG_BIG_WIDTH;
                        img_height = _IMG_BIG_HEIGHT;

text_height = _TEXT_BIG_HEIGHT;
                        text_width = _TEXT_BIG_WIDTH;
                    }

$(img).animate({
                        "width": img_width,
                        "height": img_height
                    }, _SPEED);
                    $(text).animate({
                        "width": text_width,
                        "height": text_height
                    }, _SPEED);

$(item).animate({
                            "left": _pos_list_src["index" + path[next]],
                            "width": width,
                            "height": height
                        }, _SPEED,
                        function() {
                            move(this);
                        }
                    );
                }
            }

}

});
}

$(document).ready(function() {
    init_img();
});

$(window).resize(function() {
    init_img();
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

图片任一点击放大



代码描述：点击任意一张在固定位置放大，不限制图片的数量，根据屏幕的大小决定数量

图片的话可以自行选择，主要的特点就是在屏幕大小不确定的时候，依旧可以让图片占满全屏

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

希诺

相关代码

图片任一点击放大

最新