jQuery實(shí)現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果(附demo源碼下載)
更新時(shí)間：2016年01月27日 14:43:18 作者：m1870164
這篇文章主要介紹了jQuery實(shí)現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果,可實(shí)現(xiàn)通過(guò)下方的滑塊拖動(dòng)控制圖片旋轉(zhuǎn)的功能,涉及jQuery操作頁(yè)面元素樣式動(dòng)態(tài)變換的技巧,并附帶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設(shè)置下拉框顯示與隱藏效果的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的事件響應(yīng)與屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-09-09
jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能示例【代碼解釋】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能,結(jié)合完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的輪播圖相關(guān)功能實(shí)現(xiàn)、樣式設(shè)置與注意事項(xiàng),需要的朋友可以參考下2023-05-05
jquery對(duì)表單操作2，最近幾篇整理都是jquery表格操作相關(guān)，大家可以收藏下。2011-04-04
ASP.NET MVC中EasyUI的datagrid跨域調(diào)用實(shí)現(xiàn)代碼
因?yàn)閑asyUI使用的是JQuery的異步方法加載數(shù)據(jù)，應(yīng)該遵循JQuery的跨域訪問(wèn)規(guī)則2012-03-03
jQuery 數(shù)據(jù)緩存模塊進(jìn)化史詳細(xì)介紹
數(shù)據(jù)緩存系統(tǒng)最早應(yīng)該是jQuery1.2引入的，那時(shí)它的事件系統(tǒng)完成照搬DE大神的addEvent.js，而addEvent在實(shí)現(xiàn)有個(gè)缺憾，它把事件的回調(diào)都放到EventTarget之上，這會(huì)引發(fā)循環(huán)引用2012-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
jQuery實(shí)現(xiàn)網(wǎng)頁(yè)抖動(dòng)的菜單抖動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)頁(yè)抖動(dòng)的菜單抖動(dòng)效果,鼠標(biāo)滑過(guò)菜單項(xiàng)可見(jiàn)到菜單項(xiàng)的抖動(dòng)效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)操作的技巧,需要的朋友可以參考下2015-08-08
jQuery通過(guò)改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能
大家在做登錄注冊(cè)功能的時(shí)候都會(huì)遇到用戶選擇自己輸入的密碼是否顯示需求，大家都是怎么實(shí)現(xiàn)的呢？今天小編給大家分享一種比較好用的方法jQuery通過(guò)改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能，需要的朋友參考下2017-02-02
這篇文章主要介紹了jQuery預(yù)加載圖片常用方法,以兩個(gè)簡(jiǎn)單實(shí)例分析了jQuery預(yù)加載圖片的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
詳解jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁(yè)面布局方式為主,需要的朋友可以參考下2015-12-12