jQuery實(shí)現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果(附demo源碼下載)
本文實(shí)例講述了jQuery實(shí)現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
點(diǎ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>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見(jiàn)經(jīng)典特效匯總》及《jQuery動(dòng)畫(huà)與特效用法總結(jié)》。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery canvas繪制圖片驗(yàn)證碼實(shí)例
這篇文章主要為大家詳細(xì)介紹了jquery canvas繪制圖片驗(yàn)證碼實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10jQuery 過(guò)濾not()與filter()實(shí)例代碼
下面兩種寫(xiě)法,都可以達(dá)到一樣的效果,not與filter是相反的過(guò)濾2012-05-05jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
今天小編就為大家分享一篇jQuery的Ajax接收java返回?cái)?shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08jQuery使用動(dòng)畫(huà)隊(duì)列自定義動(dòng)畫(huà)操作示例
這篇文章主要介紹了jQuery使用動(dòng)畫(huà)隊(duì)列自定義動(dòng)畫(huà)操作,涉及jQuery使用queue()方法和dequeue()方法進(jìn)行函數(shù)隊(duì)列操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06jQuery基本選擇器(實(shí)例及表單域value的獲取方法)
下面小編就為大家?guī)?lái)一篇jQuery基本選擇器(實(shí)例及表單域value的獲取方法)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05JQuery 獲取json數(shù)據(jù)$.getJSON方法的實(shí)例代碼
這篇文章介紹了JQuery 獲取json數(shù)據(jù)$.getJSON方法的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及針對(duì)頁(yè)面元素屬性判斷的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08詳談jQuery Ajax(load,post,get,ajax)的用法
下面小編就為大家?guī)?lái)一篇詳談jQuery Ajax(load,post,get,ajax)的用法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
文本輸入框內(nèi)的字?jǐn)?shù)不能確定,而input type="text"的size是固定的,當(dāng)字?jǐn)?shù)超過(guò)size時(shí)(默認(rèn)是20),先輸入的內(nèi)容就會(huì)從文本框的左端隱藏起來(lái),不便于輸入。2010-04-04