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