jQuery书架式图片缩放显示代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery书架式图片缩放显示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>jQuery书架式图片缩放显示代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="xiaomiqiang@gmail.com" />
<style type="text/css">
#bookrack { width: 600px; margin: auto; } #bookrack a { text-align: center; text-decoration: none; font-size: 12px; } #bookrack span { display: none; position: absolute; color: #fff; background: #000000; background: rgba(0, 0, 0, 0.5); padding: 5px; top: 30px; left: 0; } #bookrack span big { color: red; font-size: 14px; } #bookrack img { width: 100%; height: 100%; display: block; border: 0; }
</style>
</head>
<body>
<div id="bookrack">
    <a href="#" title="图片1"><img src="img/1.jpg" alt="jquery" /></a>
    <a href="#" title="图片2"><img src="img/2.jpg" alt="jquery" /></a>
    <a href="#" title="图片3"><img src="img/3.jpg" alt="jquery" /></a>
    <a href="#" title="图片4"><img src="img/4.jpg" alt="jquery" /></a>
    <a href="#" title="图片5"><img src="img/5.jpg" alt="jquery" /></a>
    <a href="#" title="图片6"><img src="img/6.jpg" alt="jquery" /></a>
    <a href="#" title="图片7"><img src="img/7.jpg" alt="jquery" /></a>
    <a href="#" title="图片8"><img src="img/8.jpg" alt="jquery" /></a>
    <a href="#" title="图片9"><img src="img/9.jpg" alt="jquery" /></a>
</div>

<script type="text/javascript">
var Bookrack = function(a, b, c, e) {
    this.scale = e || 0.4;
    this.x = b || 120;
    this.y = c || 160;
    this.border = 2;
    this.init(a);
    this.exec(Math.ceil(Math.random() * this.imgs.length))
};
Bookrack.prototype = {
    init: function(a) {
        this.width = a.clientWidth - 2 * this.x * this.scale;
        a.style.position = "relative";
        a.style.height = this.y + "px";
        this.imgs = a.getElementsByTagName("a");
        var b = this,
        c = document.createElement("span"),
        e,
        d;
        this.each(function(a, g) {
            a.style.position = "absolute";
            a.style.bottom = "0";
            a.style.border = this.border + "px solid gray";
            a.style.left = this.width * (g / this.imgs.length) + 2 * this.border + "px";
            a.setAttribute("dir", g);
            d = a.getElementsByTagName("img")[0].getAttribute("alt").split("|");
            e = c.cloneNode(!0);
            e.innerHTML = a.getAttribute("title");
            a.appendChild(e);
            a.onmouseover = function() {
                b.exec(this.getAttribute("dir"))
            }
        })
    },
    each: function(a) {
        for (var b = 0,
        c; c = this.imgs[b++];) a.call(this, c, b, this.imgs.length)
    },
    color: function(a) {
        a = (~~ (255 * a)).toString(16);
        2 > a.length && (a = "0" + a);
        a = a.substr(0, 2);
        return "#" + a + a + a
    },
    exec: function(a) {
        this.each(function(b, c, e, d, f) {
            b.getElementsByTagName("span")[0].style.display = "none";
            c == a && (b.getElementsByTagName("span")[0].style.display = "block");
            d = Math.min(c / a, a / c);
            f = Math.sin(90 * (Math.PI / 180) * d) * (1 - this.scale);
            b.style.zIndex = Math.ceil(1E4 * f);
            b.style.borderColor = this.color(f + this.scale);
            b.style.width = this.x * (f + this.scale) - 2 * this.border + "px";
            b.style.height = this.y * (f + this.scale) - 2 * this.border + "px";
            b.style.marginLeft = this.x * f / -2 + "px"
        })
    }
};
new Bookrack(document.getElementById('bookrack'), 120, 160);
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)