jquery實現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼
本文實例講述了jquery實現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼。分享給大家供大家參考,具體如下:
運行效果截圖如下:
具體代碼如下:
<html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" > function scaleXBlock(blocker, scaleX){ blocker.css({ "-moz-transform": 'scaleX(' + scaleX + ')' , "-webkit-transform": 'scaleX(' + scaleX + ')' , "-o-transform": 'scaleX(' + scaleX + ')', "-ms-transform": 'scaleX(' + scaleX + ')', "transform": 'scaleX(' + scaleX + ')' }); } function getPosition(event){ return { x: parseInt(event.pageX || event.X), y: parseInt(event.pageY || event.Y) } } function cancelEvent(event){ if(event.preventDefault ) { event.preventDefault(); } else { //IE中阻止函數(shù)器默認動作的方式 event.returnValue = false; } return false; } function stopDrag(blocker){ blocker.data('draginfo', { isDrag: false }); blocker.css('cursor', "arrow"); } function drag(blocker){ blocker.data('draginfo', { isDrag: false }); blocker.css("position", "absolute"); blocker.mousedown(function(event){ event = event || window.event; var position = getPosition(event), offset = blocker.offset(), offsetX = position.x - parseInt(offset.left), offsetY = position.y - parseInt(offset.top); blocker.css('cursor', "move"); blocker.data('draginfo', { isDrag: true, offsetX: offsetX, offsetY: offsetY }); cancelEvent(event); }); blocker.mouseup(function(){ stopDrag($(this)); }); $(document).mousemove(function(event){ var dragInfo = blocker.data('draginfo'); if(!dragInfo.isDrag) { return; } event = event || window.event; var position = getPosition(event), x = position.x - dragInfo.offsetX, y = position.y - dragInfo.offsetY; blocker.css({ "left": x + "px", "top": y + "px" }); cancelEvent(event); }).mouseup(function(){ stopDrag(blocker); }); } function loopScaleXBlock(timeout, mode, blocker, scaleX){ scaleXBlock(blocker, scaleX); setTimeout(function(){ if(mode == "bigger") { if(scaleX < 1) { scaleX += 0.05; } else { mode = "smaller"; scaleX = 1; } } else { if(scaleX > 0) { scaleX -= 0.05; } else { mode = "bigger"; scaleX = 0.05; } } loopScaleXBlock(timeout, mode, blocker, scaleX); }, timeout); } function initDrag(){ var dragList = $(".drag"); for(var i=0,length=dragList.length; i<length; i++) { drag($(dragList[i])); } } function initScaleX(){ var scaleXList = $(".scale"); for(var i=0,length=scaleXList.length; i<length; i++) { loopScaleXBlock(10 * i + 10, "smaller", $(scaleXList[i]), 1); } } $(document).ready(function(){ initScaleX(); initDrag(); }); </script> <style type="text/css" > body { margin:0; background:black; } .block { position: absolute; text-align: center; display: block; width: 250px; height: 250px; background: #494949; font-size: 80px; color: #fff; line-height: 125px; text-shadow: 2px 2px 2px #fff; box-shadow: 2px 2px 2px #fff; cursor: pointer; opacity: 0.6; filter: alpha(opacity=60); } #scale { left:0; top:0; } #scale2 { left:300px; top:0; background: #F2F2F2; color: orange; } #scale3 { left:600px; top:0; background: orange; color: #494949; } #scale4 { left:900px; top:0; background: green; color: gray; } #scale5 { left:1200px; top:0; background: #494949; color: orange; } </style> </head> <body> <div class="block scale drag" id="scale"> 歡迎來看咧 </div> <div class="block scale drag" id="scale2"> 歡迎來看咧 </div> <div class="block scale drag" id="scale3"> 歡迎來看咧 </div> <div class="block scale drag" id="scale4"> 歡迎來看咧 </div> <div class="block scale drag" id="scale5"> 歡迎來看咧 </div> </body> </html>
更多關于jQuery特效相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見經(jīng)典特效匯總》及《jQuery動畫與特效用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個問題基于如下場景:點擊頁面上某個按鈕之后,觸發(fā)click事件,事件處理函數(shù)內(nèi)部發(fā)送一個AJAX請求,AJAX回調(diào)函數(shù)更新頁面的某一個部分。2010-12-12JQuery獲取各種寬度、高度(format函數(shù))實例
本例除了使用標準的JQuery類庫外,還添加了自定義的函數(shù)來進行字符串的format操作。2013-03-03jquery下json數(shù)組的操作實現(xiàn)代碼
在jquery中處理JSON數(shù)組的情況中遍歷用到的比較多,但是用添加移除這些好像不是太多。2010-08-08jQuery autocomplate 自擴展插件、自動完成示例代碼
jquery-lib版本是 1.3.2的,該插件是簡單的擴展插件,代碼也比較簡單的封裝。所以看起來也比較簡單不是很費力,當然封裝得也不是很好。2011-03-03jQuery ajax提交Form表單實例(附demo源碼)
這篇文章主要介紹了jQuery ajax提交Form表單的方法,結(jié)合實例分析了jQuery ajax操作實現(xiàn)表單提交的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04