菜单

www.2138.comjquery实现可旋转可拖拽的文字效果代码

2020年3月1日 - www.2138.com

一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动。其实现原理即同一张图片上作出人物上下左右不同面向的效果,利用JS调用背景图片的位置,以此实现人物“转脸”的jquery特效效果。先给大家展示效果图,需要的朋友可以下载源码

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

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

www.2138.com,运行效果截图如下:

www.2138.com 1

具体代码如下:

<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程序设计有所帮助。

具体实现过程不多说了,直接给大家贴代码了。

您可能感兴趣的文章:

本文实例讲述了jquery实现可旋转可拖拽的文字效果代码。分享给大家供大家参考,具…

基于jquery实现人物头像跟随鼠标转动效果  A passionate team   Andor Andor BaranyiDevelopment Andor   Angela Angela BorșanFinance Angela   Attila Attila SzászDevelopment Attila   Bogdan Bogdan HaifaDevelopment Bogdan   Bogdan Bogdan SalaDevelopment Bogdan   Bogdan Bogdan StănescuDevelopment Bogdan   Bogus BogusSpecial Projects Bogus   Botond Botond RadulyDevelopment Botond   Călin Călin TriteanDevelopment Călin   Ciprian Ciprian HermanDevelopment Ciprian   Ciprian Ciprian MorarLeadership Ciprian     Cristian Cristian CojițăDevelopment Cristian   Cristian Cristian MesarosDevelopment Cristian   Cristian Cristian ZdrobeDevelopment Cristian   Cristina Cristina MoldovanQA Cristina   Csaba Csaba TekseDevelopment Csaba      Doru Doru CiceuDevelopment Doru   Dragoș Dragoș BucevschiDevelopment Dragoș   Erika Erika LăcătuşQA Erika   Filip Filip Cherecheș-ToșaLeadership Filip   Gabriel Gabriel LăcătuşDevelopment Gabriel   Ildikó Ildikó SoósDevelopment Ildikó   István István TakácsDevelopment István   Jozsi József GergelyDevelopment Jozsi   Lavinia Lavinia MendreaDevelopment Lavinia   Levente Levente HorváthDevelopment Levente   Liviu Liviu PogarQA Liviu   Marc Marc AbrudanDevelopment Marc   Maximilian Maximilian MareleDesign Maximilian   Mihai Mihai PotcoavăDevelopment Mihai   Mihai Mihai SavuDevelopment Mihai   Mircea Mircea BaicuDevelopment Mircea   Mircea Mircea DrăgoiDesign Mircea   Paul Paul AbrudanDevelopment Paul   Radu Radu LucaciuDevelopment Radu   Radu Radu PanteaQA Radu   Sebastian Sebastian MorarDevelopment Sebastian   Ștefan Ștefan BălanDesign Ștefan   Tibor Tibor FazakasQA Tibor   Timi Timi FagadarDevelopment Timi   Tudor Tudor GalanopulosDevelopment Tudor   Victor Victor StegaruDevelopment Victor   Viorel Viorel DramDevelopment Viorel   Zsolt Zsolt BorbelyDevelopment Zsolt   You? Join us!We have great coffee! You?   

以上代码就是基于jquery实现人物头像跟随鼠标转动,希望大家喜欢。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图