jquery实现的字体旋转

最新推荐文章于 2021-06-16 23:16:43 发布
最新推荐文章于 2021-06-16 23:16:43 发布
阅读量485 收藏
点赞数
分类专栏： javascript 文章标签： jQuery XHTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/minn84/article/details/83557079
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="keywords" content="div，菜单，网站导航,jquery动画,留言板,css,jquery个人网站"> <meta http-equiv="description" content="个人网站，技术网集中营">
<title>个人作品,友情链接</title>
<style type="text/css">

#donghua{
color: #cccccc;
left:150px;
top:250px;
position: absolute;
width:550px;
height: 150px;
}

#donghua a{
font: monospace;
text-decoration: none;
color:#660033;
cursor: default;
}
#box1{
float: left;
position: relative;
font-size: 18px;
top: 60px;
left:250px;
}
#box2{
float: left;
position: relative;
font-size: 18px;
top: 60px;
left:280px;
}
#box3{
float: left;
position: relative;
font-size: 18px;
top: 100px;
left:240px;
}
#box4{
float: left;
position: relative;
font-size: 18px;
top: 85px;
left:270px;
}
#box5{
float: left;
position: relative;
font-size: 18px;
top: 35px;
left:250px;
}
#box6{
float: left;
position: relative;
font-size: 18px;
top: 10px;
left:180px;
}
#box7{
float: left;
position: relative;
font-size: 18px;
top: 35px;
left:115px;
}
#box8{
float: left;
position: relative;
font-size: 18px;
top: 80px;
left:95px;
}

#menupanel dl{
text-align:left;
}
</style>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){
donghua();

});

function donghua1()
{

$("#box3").animate({opacity: "0.5", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.3",top:"-=45"}, 1200).
animate({opacity: "0.2",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.5",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.9",top:"+=45"}, 1200).
animate({opacity: "0.7",left:"+=60",top:"+=20"}, 1200,function(){

});
$("#box4").animate({opacity: "0.2",top:"-=45"}, 1200).
animate({opacity: "0.5",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.3",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.7",top:"+=45"}, 1200).
animate({opacity: "0.9",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.6", left: "+=50",top:"-=20"}, 1200);

$("#box5").
animate({opacity: "0.2",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.5",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.7",top:"+=45"}, 1200).
animate({opacity: "0.9",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.7", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.6",top:"-=45"}, 1200);

$("#box6").
animate({opacity: "0.5",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.4",top:"+=45"}, 1200).
animate({opacity: "0.2",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.6", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.9",top:"-=45"}, 1200).
animate({opacity: "0.7",left:"-=55",top:"-=25"}, 1200);

$("#box7").
animate({opacity: "0.1",top:"+=45"}, 1200).
animate({opacity: "0.3",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.5", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.7",top:"-=45"}, 1200).
animate({opacity: "0.6",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.9",left:"-=55",top:"+=25"}, 1200);
$("#box8").
animate({opacity: "0.5",left:"+=60",top:"+=20"}, 1200).
animate({opacity: "0.1", left: "+=50",top:"-=20"}, 1200).
animate({opacity: "0.7",top:"-=45"}, 1200).
animate({opacity: "0.3",left:"-=55",top:"-=25"}, 1200).
animate({opacity: "0.9",left:"-=55",top:"+=25"}, 1200).
animate({opacity: "0.6",top:"+=45"}, 1200,function(){
donghua1();
});



}

function donghua2()
{
$("#box1").
animate({opacity: "0.1",left:"+=25",top:"-=20"}, 1200).
animate({opacity: "0.4",left:"+=25",top:"+=20"}, 1200).
animate({opacity: "0.8",left:"-=25",top:"+=20"}, 1200).
animate({opacity: "1",left:"-=25",top:"-=20"}, 1200);
$("#box2").
animate({opacity: "0.4",left:"-=25",top:"+=20"}, 1200).
animate({opacity: "0.1",left:"-=25",top:"-=20"}, 1200).
animate({opacity: "0.8",left:"+=25",top:"-=20"}, 1200).
animate({opacity: "1",left:"+=25",top:"+=20"}, 1200,function(){
donghua2();
});
}
function donghua()
{
donghua1();
donghua2();

}

</script>
</head>

<body id="bd" onselectstart="return false;" οncοntextmenu="return false;">

<div id="donghua">
<div id="box1"><a >欢</a></div>
<div id="box2"><a >迎</a></div>
<div id="box3"><a >我</a></div>
<div id="box4"><a >的</a></div>
<div id="box5"><a >个</a></div>
<div id="box6"><a >人</a></div>
<div id="box7"><a >网</a></div>
<div id="box8"><a >站</a></div>
</div>





</body>
</html>

记得引入：jquery.js
minn84
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现可旋转可拖拽的文字效果代码
10-22
主要介绍了jquery实现可旋转可拖拽的文字效果代码,涉及jquery响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
jquery文字旋转放大特效.zip
07-04
jquery文字旋转放大特效,jquery,文字特效,文字旋转,变换字距.
html5 旋转文字效果,jQuery炫酷文字翻转打字机特效
weixin_29331985的博客
06-03 470
这是一款效果炫酷的jQuery文字翻转打字机特效插件。注意，这个打字机特效插件只在Chrome, Firefox, Safari浏览器的桌面和移动设备上测试通过，在IE浏览器上海没有测试。要使用这个打字机特效插件，你需要子啊html中引入jQuery和jQuery.flipping_text.js文件。HTML结构在引入以上文件后，在body标签中放置下面的html代码：.......JAVASC...
jQuery css3文字翻转动画特效
墨鱼部落格
04-05 159
jQuery css3文字翻转动画特效 jQuery基于css3属性制作简单的文字翻转高亮动画特效 演示地址 下载地址
juqery字体旋转插件效果
无声街角 无声拥抱
11-19 120
需要的插件库 js和css文件 百度云连接： 链接：https://pan.baidu.com/s/1dizIlj3UPTo21I0vVOgPTg 提取码：2sun 实现的效果 实现左右的转换效果和文字飞入效果 ...
jquery文字旋转放大特效特效代码
03-20
标题中的“jquery文字旋转放大特效特效代码”是指利用jQuery库实现的一种动态效果，它使得文本在页面上既能旋转又能放大，增加了视觉吸引力和交互性。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件...
jquery实现图片翻牌旋转特效特效代码
03-20
本文将深入探讨如何使用jQuery库来实现图片翻牌旋转特效，这种特效通常用于展示产品信息或者卡片式设计，当用户将鼠标悬停在图片上时，图片会翻转显示出背面的文字信息。 ### jQuery基础 jQuery是一个轻量级的...
关于jquery做文字翻滚效果
ll_superman的博客
01-05 1517
好久没写了博客了，因为跳到了一个坑的不要命的公司，每天累的跟狗似的，今天客户要做个文字翻滚效果，我找了一下，下面的这个比较简单就能实现--基于jquery的     jQuery插件版文字轮流滚动，一步一停                 function scroll_news(){     $(function(){     $('#dvmq li').eq(0
HTML5 Canvas 绘制旋转45度佛教万字
weixin_33778544的博客
09-03 835
效果如下： 代码如下：   &lt;!DOCTYPE html&gt; &lt;html lang="utf-8"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;head&gt; &lt;title&gt;旋转45度佛教
js绘制一条直线并旋转45度
10-14
主要为大家详细介绍了js绘制一条直线并旋转45度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery旋转插件
05-31
需要先引用基础jquery类库 然后在引用这个 最后 //演示1 //旋转45angle $(document.body).click(function () { //方式1 $('.divOne').rotate(45); //方式2 $('.divOne').rotate({ angle: 45 }); }); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //演示2 //鼠标移动效果 //方式1 $('.divOne').rotate({ bind: { mouseover: function () { $(this).rotate({ animateTo: 180 }); }, mouseout: function () { $(this).rotate({ animateTo: 0 }); } } }); //方式2 $('.divOne').mouseover(function () { $(this).rotate({ animateTo: 180 }); }).mouseout(function () { $(this).rotate({animateTo:0}); }); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 //演示3 不停旋转 //方式1 var angle = 0; setInterval(function () { angle += 3; $('.divOne').rotate(angle); }, 50); //方式2 var rotation = function () { $('.divOne').rotate({ angle: 0, animateTo: 360, callback:rotation }) } rotation(); //方式3 var rotation = function () { $('.divOne').rotate({ angle: 0, animateTo: 360, callback: rotation, easing: function (x, t, b, c, d) { return c * (t / d) + b; } }) } rotation(); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //演示4 点击旋转 //方式1 $('.divOne').click(function () { $(this).rotate({ angle: 0, animateTo: 180, easing: $.easing.easeInOutExpo }); }); var val = 0; $('.divOne').click(function () { val += 90; $(this).rotate({ animateTo: val }); });
jQuery 3D 文字三维旋转效果代码
07-13
jQuery 3D 文字三维旋转效果代码 jQuery 3D 文字三维旋转效果代码
.before和.after+3D旋转案例（字体翻转的效果）
小头Sophia
03-20 3510
1.行内的盒子——考虑定位 2.3D旋转： rotaeX() rotateY() rotaeZ() 设置旋转中心点：transform-origin skew(x,y)  倾斜 示例代码： html> lang="en"> charset="UTF-8"> 伪元素练习 type="text/css"> *{margin: 0;p
html5地球旋转效果,javascript模拟地球旋转效果代码实例
weixin_36480423的博客
06-03 921
JS模拟地球旋转-柯乐义JS模拟地球旋转·柯乐义eval(z = 'p=""/* ,.oq#+ ,._, */;for(y in n="zw24l6k\4e3t4jnt4qj24xh2 x/* =9h243pdxt41csb yz/* #K q##H######Am */43iyb6k43pk7243nm\r24".split(4)){/* dP cpq#q##########b, */for(a...
html旋转的环形菜单,jQuery右下角旋转环状菜单特效代码
weixin_39528000的博客
06-16 357
jquery实现右下角旋转环形菜单特效代码，是固定在页面右下角位置，当用户点击了主菜单按钮后，子菜单项会以环状旋转进入页面，并使用animate.css制作动画效果。效果图如下：html代码：js代码：$(document).ready(function (ev) {var toggle = $('#ss_toggle');var menu = $('#ss_menu');var rot;$('#...
jQuery 学习（一）
45度的天空
07-02 119
jQuery 作为一个强大的javascript框架，怎能不去了解，学习呢。 引入非常简单，只需要下载一个js，然后引入到页面中就可以了。下载就不多说了。www.jqueyr.com 引入时注意一点： 错误格式 &lt;script type="text/javascript" src="jquery-1.7.2.min.js" /&gt; 正确格式： &lt;script type="...
矩阵旋转45度
木木三的专栏
01-14 8250
例如： A B C D E F G H I J K L M N O P Q R S T U V W X Y E D J C I O B H N T A G M S Y F L R X K Q W P V U 思路如上图：  在菱形之外的都是空格，菱形之内（可以使用函数判断）有两种点，一种是
005 - 马科维茨投资组合理论实现
最新发布
08-10
python基于tushare实现马科维茨投资组合理论实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值