JS大神进关于页面旋转的问题。

JavaScript012

JS大神进关于页面旋转的问题。,第1张

旋转用css3的transform属性，设置rotate(90deg)就行了，可以设置旋转中心，transfrom-origin: center center，就是以中心点旋转。

map加载完成，会触发canplaythrough事件，监听这个就可以了；播放、暂停、声音都有接口，可以通过在控制台打印Audio.prototype来查看原型链，换歌可以通过监听ended事件，即当前mp3播放完成，再播放下一首就行了。

NOTE. 建议使用现成的框架，推荐jPlayer.js。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <script>

var current = 0

function tranImg(trun){

var imgObj= document.getElementById('imgTest')

current = (current+trun)%360

imgObj.style.transform = 'rotate('+current+'deg)'

}

    </script>

</head>

<body>

    <img id ="imgTest" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487259339574&di=ea8937bacd8f0e7bbb91f9bceb27e612&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F1e30e924b899a90146287f671f950a7b0208f545.jpg" target="_blank" class="baidu-highlight">

<br>

<input type="button" id="leftTran" onclick="tranImg(-90)" value="左">

<input type="button" id="rightTran" onclick="tranImg(90)" value="右">

</body>

</html>