jquery实现可旋转可拖拽的文字效果代码

本文实例讲述了jquery实现可旋转可拖拽的文字效果代码。分享给大家供大家参考，具体如下：
运行效果截图如下：

具体代码如下：

<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中阻止函数器默认动作的方式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特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。