jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:25:57

jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果

jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果:本文實例講述了jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果。分享給大家供大家參考，具體如下：運行效果截圖如下：具體代碼如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果:本文實例講述了jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果。分享給大家供大家參考，具體如下：運行效果截圖如下：具體代碼如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

本文實例講述了jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果。分享給大家供大家參考，具體如下：

運行效果截圖如下：

jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果

具體代碼如下：

<!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">
<head>
 <title></title>
 <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
 <style type="text/css" >
 img { margin-top:100px; margin-left:400px; width:300px; border:3px solid #F2F2F2; height:300px; box-shadow:4px 4px 4px #DDDDDD;}
 input { margin-top:10px; margin-left:480px; }
 </style>
 <script type="text/javascript" >
 window.onload = function () {
 document.getElementById('range').onchange = function () {
 var value = this.value;
 $("img").css({ "transform": "skewX(" + value + "deg)", "-webkit-transform": "skewX(" + value + "deg)", "-moz-transform": "skewX(" + value + "deg)" });
 }
 }
 </script>
</head>
<body>
 <img src="3.jpg" alt=""/>
 <br /><br />
 <input type="range" id="range" value="0" />
</body>
</html>

希望本文所述對大家jQuery程序設(shè)計有所幫助。

更多jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果相關(guān)文章請關(guān)注PHP中文網(wǎng)！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com