怎样利用JS实现像QQ相册的功能

JavaScript022

怎样利用JS实现像QQ相册的功能,第1张

easydialog你查一下这个JS插件，用这个就能简单实现了

还有Bootstrap提供的jquery插件也能简单实现

这些都是很成熟的JS插件了，希望对你有帮助

如果你看了不会用再联系我

下面是用css旋转图片，用js换className。

换图片地址后试试。

<!doctype html>

<html>

<head>

<style>

.css-turn-0{

    -moz-transform:matrix(1,0,0,1,0,0)

    -o-transform:matrix(1,0,0,1,0,0)

    -webkit-transform:matrix(1,0,0,1,0,0)

    transform:matrix(1,0,0,1,0,0)

    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"

}

.css-turn-270{

    -moz-transform:matrix(0,-1,1,0,0,0)

    -o-transform:matrix(0,-1,1,0,0,0)

    -webkit-transform:matrix(0,-1,1,0,0,0)

    transform:matrix(0,-1,1,0,0,0)

    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand')"

}

.css-turn-180{

    -moz-transform:matrix(-1,0,0,-1,0,0)

    -o-transform:matrix(-1,0,0,-1,0,0)

    -webkit-transform:matrix(-1,0,0,-1,0,0)

    transform:matrix(-1,0,0,-1,0,0)

    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')"

}

.css-turn-90{

    -moz-transform:matrix(0,1,-1,0,0,0)

    -o-transform:matrix(0,1,-1,0,0,0)

    -webkit-transform:matrix(0,1,-1,0,0,0)

    transform:matrix(0,1,-1,0,0,0)

    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod='auto expand')"

}

</style>

</head>

<body>

<img src="图片地址">

<script>

    var img = document.getElementsByTagName('img')[0],

        i = 1,

        css = ['css-turn-0', 'css-turn-90', 'css-turn-180', 'css-turn-270']

    img.onclick = function () {

        this.className = css[i++ % 4]

    }

</script>

</body>

</html>