jquery實(shí)現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼
更新時(shí)間：2016年01月27日 12:18:24 作者：m1870164
這篇文章主要介紹了jquery實(shí)現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼,涉及jquery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼。分享給大家供大家參考，具體如下：
運(yù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ù)器默認(rèn)動(dòng)作的方式
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">
歡迎來(lái)看咧
</div>
<div class="block scale drag" id="scale2">
歡迎來(lái)看咧
</div>
<div class="block scale drag" id="scale3">
歡迎來(lái)看咧
</div>
<div class="block scale drag" id="scale4">
歡迎來(lái)看咧
</div>
<div class="block scale drag" id="scale5">
歡迎來(lái)看咧
</div>
</body>
</html>
更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見(jiàn)經(jīng)典特效匯總》及《jQuery動(dòng)畫(huà)與特效用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個(gè)問(wèn)題基于如下場(chǎng)景：點(diǎn)擊頁(yè)面上某個(gè)按鈕之后，觸發(fā)click事件，事件處理函數(shù)內(nèi)部發(fā)送一個(gè)AJAX請(qǐng)求，AJAX回調(diào)函數(shù)更新頁(yè)面的某一個(gè)部分。2010-12-12
Jquery動(dòng)態(tài)列功能完整實(shí)例
這篇文章主要介紹了Jquery動(dòng)態(tài)列功能,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery基于事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)屬性操作實(shí)現(xiàn)的動(dòng)態(tài)列顯示功能相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
JQuery獲取各種寬度、高度(format函數(shù))實(shí)例
本例除了使用標(biāo)準(zhǔn)的JQuery類庫(kù)外，還添加了自定義的函數(shù)來(lái)進(jìn)行字符串的format操作。2013-03-03
each()函數(shù)是基本上所有的框架都提供了的一個(gè)工具類函數(shù)，通過(guò)它，你可以遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理，jQuery和jQuery對(duì)象都實(shí)現(xiàn)了該方法，下面是使用方法2014-03-03
本文給大家推薦了25個(gè)jQuery網(wǎng)格特效插件，在此集合中，我們將展示一些非常酷的jQuery插件和資源在網(wǎng)格布局設(shè)計(jì)，提高了數(shù)據(jù)的介紹。一些實(shí)用的插件，一定會(huì)提供一個(gè)美好的用戶體驗(yàn)。同時(shí)，一些精致的資源，這將有助于布局精美的數(shù)據(jù)范圍。2014-11-11
jquery實(shí)現(xiàn)相冊(cè)一下滑動(dòng)兩次的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)相冊(cè)一下滑動(dòng)兩次的方法,是非常實(shí)用的圖片特效技巧,需要的朋友可以參考下2015-02-02
jquery下json數(shù)組的操作實(shí)現(xiàn)代碼
在jquery中處理JSON數(shù)組的情況中遍歷用到的比較多，但是用添加移除這些好像不是太多。2010-08-08
jquery 清空f(shuō)ile域示例(兼容個(gè)瀏覽器)
在本文將為大家介紹喜下如何使用jquery 清空f(shuō)ile域并做到兼容個(gè)瀏覽器，感興趣的朋友可以參考下2013-10-10
jQuery autocomplate 自擴(kuò)展插件、自動(dòng)完成示例代碼
jquery-lib版本是 1.3.2的，該插件是簡(jiǎn)單的擴(kuò)展插件，代碼也比較簡(jiǎn)單的封裝。所以看起來(lái)也比較簡(jiǎn)單不是很費(fèi)力，當(dāng)然封裝得也不是很好。2011-03-03
jQuery ajax提交Form表單實(shí)例(附demo源碼)
這篇文章主要介紹了jQuery ajax提交Form表單的方法,結(jié)合實(shí)例分析了jQuery ajax操作實(shí)現(xiàn)表單提交的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04