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


Posted in Javascript onJanuary 27, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
详解Vue单元测试case写法
May 24 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
mocha的时序规则讲解
Feb 16 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 #Javascript
再谈JavaScript异步编程
Jan 27 #Javascript
简单介绍jsonp 使用小结
Jan 27 #Javascript
理解javascript异步编程
Jan 27 #Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 #Javascript
AngularJS转换响应内容
Jan 27 #Javascript
jQuery+css实现的切换图片功能代码
Jan 27 #Javascript
You might like
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php单例模式实现方法分析
2015/03/14 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
Javascript中引用示例介绍
2014/02/21 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python中的字典详细介绍
2014/09/18 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
办理信用卡工作证明
2014/01/11 职场文书
服务承诺口号
2014/05/22 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
服务员态度差检讨书
2014/10/28 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
刑事起诉书范文
2015/05/19 职场文书
小学体育课教学反思
2016/02/16 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书