收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1425|回复: 1

[jquery] jquery+css3实现文字环形展示初试

[复制链接]
发表于 2016-9-8 17:32:08 | 显示全部楼层 |阅读模式
本帖最后由 jianwang19 于 2016-9-8 17:35 编辑

在我看来,这是一个很变态的需求。
设计觉得很简单,文字变形而已嘛,图片分分钟搞定。
产品也觉得,这个效果不错,我们就要他了。
我本来是拒绝的,没人会这么做。
但是,设计说,618做了,好吧,我实在不能认怂

百度了下,有个插件,很兴奋的下了dome,悲剧,dome还需要谷歌的资源才能跑起来

然后看了下插件,实现原理跟我之前想的一样,干脆的,dome也不看了,埋头苦干才是硬道理
html:
  1. <div id="radius-box" data-text="已有136425人参与"></div>
复制代码

css:
  1. #radius-box{text-align: center; position: absolute; left: 17%; top: 0; width: 66%; margin-top: 131%; color: #fff;}
  2. #radius-box span{display: inline-block; position: absolute;}
复制代码

jq:
  1. function drawText(){
  2.         var Width = $('#radius-box').width();
  3.         var radius = Width / 2;
  4.         var text = $('#radius-box').data('text');
  5.         var html = '', css = '', left = 0, top = 0, deg = 0;
  6.         var length = text.length;
  7.         if(length%2 == 0){
  8.                 length += 1;
  9.                 text += ' ';
  10.         }
  11.         var median = parseInt(length / 2);

  12.         var fsize = parseInt(radius / 7);

  13.         for(var i = 0; i < length; i++){
  14.                 css = 'font-size: ' + fsize + 'px; ';
  15.                 if(i < median){
  16.                         deg = (median - i) * 10;
  17.                 }
  18.                 if(i == median){
  19.                         deg = 0;
  20.                 }
  21.                 if(i > median){
  22.                         deg = -(i - median) * 10;
  23.                 }

  24.                 left = parseInt(Width/2-Math.sin(deg*2*Math.PI/360)*radius);

  25.                 if(i < median){
  26.                         top = -(parseInt(Width/2 - left)) / Math.tan((180-deg)/2*2*Math.PI/360);
  27.                 }
  28.                 if(i == median){
  29.                         top = 0;
  30.                 }
  31.                 if(i > median){
  32.                         top = -parseInt(Width/2 - left) / Math.tan((180-deg)/2*2*Math.PI/360);
  33.                 }

  34.                 css += 'left: ' + left + 'px; ';
  35.                 css += 'top: ' + top + 'px; ';

  36.                 css += '-webkit-transform: rotate(' + deg + 'deg); ';
  37.                 css += 'transform: rotate(' + deg + 'deg); ';

  38.                 html += '<span style="' + css + '">' + text.charAt(i) + '</span>';
  39.         }
  40.         $('#radius-box').html(html).attr('data-text', text);
  41. }
  42. drawText();
复制代码

正好下班...dome就不放上来了...
有兴趣的童鞋可以完善下,自己搞搞...
 楼主| 发表于 2016-9-8 17:36:34 | 显示全部楼层
这是效果图
QQ截图20160908172959.png
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-21 23:08 , Processed in 0.094487 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表