이 기사의 예에서는 회전 및 드래그 가능한 텍스트 효과 코드의 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.