jQuery實現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果(附demo源碼下載)
本文實例講述了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>
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見經(jīng)典特效匯總》及《jQuery動畫與特效用法總結(jié)》。
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery的Ajax接收java返回數(shù)據(jù)方法
今天小編就為大家分享一篇jQuery的Ajax接收java返回數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08JQuery 獲取json數(shù)據(jù)$.getJSON方法的實例代碼
這篇文章介紹了JQuery 獲取json數(shù)據(jù)$.getJSON方法的實例代碼,有需要的朋友可以參考一下2013-08-08jQuery實現(xiàn)判斷滾動條滾動到document底部的方法分析
這篇文章主要介紹了jQuery實現(xiàn)判斷滾動條滾動到document底部的方法,結(jié)合實例形式分析了jQuery事件響應及針對頁面元素屬性判斷的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08詳談jQuery Ajax(load,post,get,ajax)的用法
下面小編就為大家?guī)硪黄斦刯Query Ajax(load,post,get,ajax)的用法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03jQuery 自動增長的文本輸入框?qū)崿F(xiàn)代碼
文本輸入框內(nèi)的字數(shù)不能確定,而input type="text"的size是固定的,當字數(shù)超過size時(默認是20),先輸入的內(nèi)容就會從文本框的左端隱藏起來,不便于輸入。2010-04-04