js实现图片左右垂直翻转

来源:互联网 发布:潭州学院学淘宝怎么样 编辑:程序博客网 时间:2024/05/16 05:29
<!DOCTYPE html><html>  <head>    <title>MyHtml.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script>var current = 0;function turnLeft(){current = (current-90)%360;document.getElementById('target').style.transform = 'rotate('+current+'deg)';}function turnRight(){current = (current+90)%360;document.getElementById('target').style.transform = 'rotate('+current+'deg)';}</script></head><body><img id ="target" src="../image/head_portrait.jpg" alt=""><input value="左转" type="button" onclick="turnLeft()"><input value="右转" type="button" onclick="turnRight()"></body></html>

附:transform浏览器支持情况

http://www.w3school.com.cn/cssref/pr_transform.asp

0 0
原创粉丝点击