使用JavaScript实现旋转的彩圈特效

使用JavaScript写的一个旋转的彩圈

效果图

<!DOCTYPE html>
<html>
<head>
<script src="/jquery-1.11.3.min.js"></script>
<script>
for(var i=0;i<100000;i++)
{
if(i%4==0)
setTimeout("$('#div1').css({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'40px solid yellow','border-top':'40px solid blue'})",2000*i);
if(i%4==1)
setTimeout("$('#div1').css({'border-left':'40px solid blue','border-bottom':'40px solid red','border-right':'40px solid green','border-top':'40px solid yellow'})",2000*i);
if(i%4==2)
setTimeout("$('#div1').css({'border-left':'40px solid yellow','border-bottom':'40px solid blue','border-right':'40px solid red','border-top':'40px solid green'})",2000*i);
if(i%4==3)
setTimeout("$('#div1').css({'border-left':'40px solid green','border-bottom':'40px solid yellow','border-right':'40px solid blue','border-top':'40px solid red'})",2000*i);
}

</script>
<style>

#div2{
width: 100px;
  height: 100px;
   border-left: 40px solid red;
  border-right: 40px solid yellow;
  border-bottom: 40px solid green;
  border-top:40px solid blue;
  background-color:#FFFFFF;
  border-radius:900px/900px;
  display:none;
  top:0px;
  left:0px;
  position:relative;
  z-index:1;
}
#div1{
  width: 100px;
  height: 100px;
   border-left: 40px solid red;
  border-right: 40px solid yellow;
  border-bottom: 40px solid green;
  border-top:40px solid blue;
  background-color:#FFFFFF;
  border-radius:90px/90px;
}
</style>
</head>

<body>
<p style="color:#FF0000">ÐýתµÄȦ</p>
<div id="div1"></div>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • javascript结合canvas实现图片旋转效果

    我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果.本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果.我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转. HTML 我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转. <div id="tool">

  • 用javascript实现旋转图片效果的代码

    用javascript实现旋转图片效果的代码

    旋转图片 '); document.write(' '); for (n=0; n '); document.write(' '); document.write(' '); function FollowMouse(){ Xpos = document.body.scrollLeft+event.x+UpDown; Ypos = document.body.scrollTop+event.y+LeftRight; } document.onmousemove = FollowMouse; }

  • Javascript实现可旋转的圆圈实例代码

    Javascript实现可旋转的圆圈实例代码

    本文实例讲述了Javascript实现可旋转的圆圈.分享给大家供大家参考.具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例. 运行效果如下图所示: 具体代码如下: <html> <head> <title>旋转的圆圈</title> <meta http-equiv="Content-Type" content="

  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码 var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4) {i

  • javascript椭圆旋转相册实现代码

    javascript椭圆旋转相册实现代码

    功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢后快. 3.可自定义旋转轨迹的宽和高. 4.支持IE6 7 8 9 10 firefox chrome等浏览器. 效果预览: 实现原理: 根据对图片在椭圆轨迹上的运动,动态改变缩放大小,实现立体的视觉效果. 代码分析: 复制代码 代码如下: init:function(id,options){ va

  • javascript模拟地球旋转效果代码实例

    复制代码 代码如下: <!DOCTYPE html><html><head><title>JS模拟地球旋转-柯乐义</title></head><body><div><h2>JS模拟地球旋转·柯乐义</h2></div><div id="keleyi_com" style="width:300px;height:300px;"&g

  • 使用JavaScript实现旋转的彩圈特效

    使用JavaScript实现旋转的彩圈特效

    使用JavaScript写的一个旋转的彩圈 效果图 <!DOCTYPE html> <html> <head> <script src="/jquery-1.11.3.min.js"></script> <script> for(var i=0;i<100000;i++) { if(i%4==0) setTimeout("$('#div1').css({'border-left':'40px sol

  • 基于jQuery实现的旋转彩圈实例

    基于jQuery实现的旋转彩圈实例

    本文实例讲述了基于jQuery实现的旋转彩圈.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="jquery-1.7.1.min.js"></script> <script> for(var i=0;i<100000;i++) { if(i%4==0) setTimeout("$('#div1').css({'border

  • JavaScript Canvas编写炫彩的网页时钟

    JavaScript Canvas编写炫彩的网页时钟

    本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下 只是利用了Canvas制作的. 示意图如下: <!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网

  • JavaScript实现五种不同烟花特效

    JavaScript实现五种不同烟花特效

    目录 一.简单大气的烟花 二.在农村看到的烟花 三.可点击的烟花 四.3D旋转烟花 五.可拖动视角的自定义烟花 一.简单大气的烟花 演示地址:http://haiyong.site/fireworks1 HTML代码: 这里的HTML代码很简短 <div> <canvas id="canvas"></canvas> </div> CSS代码 css也只有这两段内容 body{ background:black; overflow:hidd

  • JavaScript实战(原生range和自定义特效)简单实例

    今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; ri

  • JavaScript实现垂直向上无缝滚动特效代码

    JavaScript实现垂直向上无缝滚动特效代码

    一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g

  • JavaScript实现带音效的烟花特效

    JavaScript实现带音效的烟花特效

    花了半个小时写的代码,这个html5 canvas新年烟花一定不会让大家失望! 首先我们看下静态的效果图: 文章末尾有动态的效果图,滑动即可看到!  JavaScript代码如下: $(function() { var canvas = $('#canvas')[0]; canvas.width = $(window).width(); canvas.height = $(window).height(); var ctx = canvas.getContext('2d'); // resize

  • JavaScript实现烟花和福字特效

    JavaScript实现烟花和福字特效

    目录 超能力一:放烟花 超能力二:写福字 隐藏能力:只有程序员能看懂的祝福 虎虎生威.虎年大吉. 事事都如意,虎虎有生气…… 都2022了你还在从网上复制粘贴这些2002年就烂大街的四句成语群发给你的亲朋好友? 不会吧不会吧,这也太敷衍了吧? 在这个辞旧迎新的美好时刻,一恩姐姐教你如何通过代码放烟花,写春联.用程序员特有的超能力 “卷死” 别人家的孩子们. 超能力一:放烟花 先带大家看看实现后超级酷炫的3D烟花效果图. 怎么样,是不是瞬间逼格暴涨?话不多说,着手整活: 在电脑上创建一个文本文档,

  • JavaScript利用canvas实现鼠标跟随特效

    目录 前言 创建canvas画布 定义鼠标 x / y 初始化canvas 画箭头 循环动画 鼠标事件 前言 canvas是一个很神奇的玩意儿,比如画表格.画海报图都要用canvas去做,前几天有用css去做一个鼠标跟随的恶魔之眼的动画效果,想着能不能用canvas也做一个鼠标跟随的效果呢? 创建canvas画布 canvas画布创建可以直接用canvas标签即可 <canvas></canvas> 也没有过多的样式,基本都是用js去完成画布中的内容的 const canvas =

  • 原生javascript实现分享到朋友圈功能 支持ios和android

    原生javascript实现分享到朋友圈功能 支持ios和android

    现在主流的分享工具也有很多,例如JiaThis.bShare分享,甚至一些大公司的如百度分享,但是他们依旧停留在只是在PC端的分享,对手机端的支持不是太好. 大家都知道现在很多手机端浏览器都内置了一些分享组件,像UC浏览器.QQ浏览器,内置的组件分享可以直接启动相应的APP分享,要是一个JS能调用浏览器的内置分享组件,那是多么酷啊. 高手在民间啊,下面我们的小编就带你来看看这位兄弟的编写的JS库. 一.工具介绍 nativeShare.js 一个可以通过javascript直接调用原生分享的工具

随机推荐