jquery,css3,会动的小圆圈
web前端-js教程
亿乐社区系统源码下载,ubuntu中的tmp,tomcat本地域名绑定,爬虫托管服务,新型php漏洞技术学习,seo餐饮lzw
运行效果截图如下：ecshop 多商户 源码,vscode设置多少列换行,ubuntu进入目录,设置tomcat随机启动,崇明爬虫展馆,php 获取cpu使用率,银川seo优化最好的地方,免费php网站分享,手机卡模板lzw
具体代码如下：三级微信分销系统源码,ubuntu下载软件源码,为tomcat设置多个端口,煎蛋爬虫网,php水印代码,浦城一般seo费用是多少lzw
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》那些变换颜色的小豆豆 h1{font-size:16px;} .circle { position:absolute; width:100px; height:100px; border-radius: 50px; -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; -ms-border-radius:50px; border:1px solid #ddd; background-color:#eee; text-align:center; -moz-transition:background-color .5s ease-in; -webkit-transition:background-color .5s ease-in; -o-transition:background-color .5s ease-in; -ms-transition:background-color .5s ease-in; transition:background-color .5s ease-in; } var colorArray = "ABCDEFabcdef1234567890".split(''); function createCircle(position, size){ var html = []; var radius = size.height > size.width ? size.height/2 : size.width / 2; var opacity = Math.random(); opacity = opacity < 0.3 ? opacity = 0.3 : opacity; html.push(''); return html.join(''); } function createColor(){ var color = ""; for(var i=0; i<6; i++) { color += colorArray[Math.ceil(Math.random()*21)]; } return "#"+color; } function animate(obj){ setInterval(function(){ var position = obj.position(); var left = parseInt(position.left); var top = parseInt(position.top); obj.css('background-color', createColor()); obj.animate({'left': left + 5}, 250); obj.animate({'left': left - 5, 'top': top + 5}, 250); obj.animate({'top': top}, 250); obj.animate({'left': left, 'top': top}, 250); }, 1000); } $(document).ready(function(){ var wrapper = $("#wrapper"); var height = parseInt(document.documentElement.clientHeight || 500); var width = parseInt(wrapper.width()); for(var i=0; i<200; i++) { var position = { left: Math.round(Math.random()*(width - 50)), top: Math.round(Math.random()*(height - 100)) }; var _size = 50 - Math.round(Math.random()*40); var size = { height: _size, width: _size }; var circle = $(createCircle(position, size)); circle.appendTo(wrapper); circle.mouseover(function(){ var color = createColor(); $(this).css('background-color', color); }).mouseout(function(){ var color = createColor(); $(this).css('background-color', color); }); animate(circle); } });