Home > Article > Web Front-end > jquery实现可旋转可拖拽的文字效果代码_jquery
jquery实现可旋转可拖拽的文字效果代码_jquery
- WBOYOriginal
- 2016-05-16 15:17:321257browse
本文实例讲述了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程序设计有所帮助。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery+canvas实现的球体平抛及颜色动态变换效果_jqueryNext article：jquery+css3实现会动的小圆圈效果_jquery