昨天分享过一个js标签云代码的特效,今天这个标签云特效是在它的其他上改良了一下,修改了鼠标移上去当前标签固定不动不会在那跟着其他标签一起旋转,这样更加实用与方便。还加上了css3的样式效果也更加的美观。
标签云JS代码如下
var radius = 90; var d = 200; var dtr = Math.PI / 180; var mcList = []; var lasta = 1; var lastb = 1; var distr = true; var tspeed = 11; var size = 200; var mouseX = 0; var mouseY = 10; var howElliptical = 1; var aA = null; var oDiv = null; window.onload=function () { var i=0; var oTag=null; oDiv=document.getElementById('tagscloud'); aA=oDiv.getElementsByTagName('a'); for(i=0;i<aA.length;i++) { oTag={}; aA[i].onmouseover = (function (obj) { return function () { obj.on = true; this.style.zIndex = 9999; this.style.color = '#fff'; this.style.background = '#0099ff'; this.style.padding = '5px 5px'; this.style.filter = "alpha(opacity=100)"; this.style.opacity = 1; } })(oTag) aA[i].onmouseout = (function (obj) { return function () { obj.on = false; this.style.zIndex = obj.zIndex; this.style.color = '#fff'; this.style.background = '#9933FF'; this.style.padding = '5px'; this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")"; this.style.opacity = obj.alpha; this.style.zIndex = obj.zIndex; } })(oTag) oTag.offsetWidth = aA[i].offsetWidth; oTag.offsetHeight = aA[i].offsetHeight; mcList.push(oTag); } sineCosine( 0,0,0 ); positionAll(); (function () { update(); setTimeout(arguments.callee, 40); })(); }; function update() { var a, b, c = 0; a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed; b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed; lasta = a; lastb = b; if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return; } sineCosine(a, b, c); for (var i = 0; i < mcList.length; i++) { if (mcList[i].on) { continue; } var rx1 = mcList[i].cx; var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa); var rz1 = mcList[i].cy * sa + mcList[i].cz * ca; var rx2 = rx1 * cb + rz1 * sb; var ry2 = ry1; var rz2 = rx1 * (-sb) + rz1 * cb; var rx3 = rx2 * cc + ry2 * (-sc); var ry3 = rx2 * sc + ry2 * cc; var rz3 = rz2; mcList[i].cx = rx3; mcList[i].cy = ry3; mcList[i].cz = rz3; per = d / (d + rz3); mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2); mcList[i].y = ry3 * per; mcList[i].scale = per; var alpha = per; alpha = (alpha - 0.6) * (10 / 6); mcList[i].alpha = alpha * alpha * alpha - 0.2; mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz)); } doPosition(); } function depthSort() { var i=0; var aTmp=[]; for(i=0;i<aA.length;i++) { aTmp.push(aA[i]); } aTmp.sort ( function (vItem1, vItem2) { if(vItem1.cz>vItem2.cz) { return -1; } else if(vItem1.cz<vItem2.cz) { return 1; } else { return 0; } } ); for(i=0;i<aTmp.length;i++) { aTmp[i].style.zIndex=i; } } function positionAll() { var phi = 0; var theta = 0; var max = mcList.length; for (var i = 0; i < max; i++) { if (distr) { phi = Math.acos(-1 + (2 * (i + 1) - 1) / max); theta = Math.sqrt(max * Math.PI) * phi; } else { phi = Math.random() * (Math.PI); theta = Math.random() * (2 * Math.PI); } //坐标变换 mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi); mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi); mcList[i].cz = radius * Math.cos(phi); aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px'; aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px'; } } function doPosition() { var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHeight / 2; for (var i = 0; i < mcList.length; i++) { if (mcList[i].on) { continue; } var aAs = aA[i].style; if (mcList[i].alpha > 0.1) { if (aAs.display != '') aAs.display = ''; } else { if (aAs.display != 'none') aAs.display = 'none'; continue; } aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px'; aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'; //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px'; //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")"; aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")"; aAs.zIndex = mcList[i].zIndex; aAs.opacity = mcList[i].alpha; } } function sineCosine( a, b, c) { sa = Math.sin(a * dtr); ca = Math.cos(a * dtr); sb = Math.sin(b * dtr); cb = Math.cos(b * dtr); sc = Math.sin(c * dtr); cc = Math.cos(c * dtr); }
相关推荐
与Flash相比,JavaScript版标签云更适应当前的Web环境,支持跨平台,兼容性更好,并且更适合响应式设计。开发者同样可以获取到源码,对代码进行自定义,比如集成到现有的前端框架如React、Vue或Angular,或者添加...
在"JS特效-其它代码"这个标签中,我们可以推测这段代码可能包含了一些自定义的JavaScript功能,可能包括数据处理(如关键词的排序和随机化)、事件监听(如鼠标悬停或点击事件)以及与服务器的交互(如果需要实时...
【标题】"js鼠标滑过标签选项卡切换代码"是一个基于JavaScript实现的交互式网页设计元素,常用于网站导航或信息展示。这种效果允许用户通过鼠标悬停在不同的标签上,来切换显示不同的内容区域。在医院美容网站中,...
`tagcanvas.min.js`是专为实现标签云效果设计的JavaScript插件,它处理了复杂的3D渲染和动画逻辑。 在HTML5 Canvas中,我们通常通过`<canvas>`元素在文档中定义画布,并通过JavaScript的`CanvasRenderingContext2D`...
总之,3D球形云标签代码是一种利用JavaScript和CSS3实现的创新交互设计,它提升了用户浏览和交互关键词的体验。理解和掌握这项技术,对于提升前端开发技能和提供更优秀的用户体验有着积极的意义。
本项目“jQuery仿百度新闻标签云关键词代码”是利用jQuery实现的一个功能,旨在创建一种类似百度新闻的标签云效果,用于展示热门关键词或新闻主题。这个效果在网页设计中常用于增强用户体验,使用户能够快速浏览和...
综上所述,实现点击a标签变色并突出显示当前标签,同时让其他标签恢复原色的效果,我们可以通过以下几种方法来完成: - 利用JavaScript通过查询参数获取当前被点击的a标签,并改变其样式。 - 使用JavaScript遍历...
在网页设计中,JS(JavaScript)常常用于实现交互式的用户界面,其中标签页是一种常见的功能,它可以有效地组织和展示大量信息。本主题将探讨三种不同的JS实现标签页的方法,尽管它们的功能相同,但代码实现方式各有...
3. **处理事件**:当用户点击某个标签按钮时,JavaScript会执行相应的操作,比如切换显示的内容区域,更新当前活动标签的状态,或者关闭当前标签。 4. **动态添加和删除标签**:为了实现类似浏览器的灵活性,...
本文将深入探讨如何使用JavaScript实现一个可暂定滚动的TAB标签代码。 首先,我们需要理解什么是“可暂定滚动”。在一般的TAB标签切换中,当用户点击新的TAB时,内容会立即滚动到顶部。而“可暂定滚动”意味着用户...
2. 获取输入框的当前值,如果非空并且不包含已存在的标签,则创建一个新的标签元素。 3. 将新标签添加到`tagList`中,并清除输入框内容,以便用户继续输入。 4. 实现删除标签的功能,通常可以通过点击标签时触发删除...
在JavaScript的世界里,"js热门tab标签图片左右切换代码"是一种常见的交互设计,它结合了Tab标签和图片轮播的功能,为用户提供了一种简洁而直观的界面体验。这种设计广泛应用于网页、移动应用以及各种用户界面中,...
在IT行业中,"搜索风向标"是一种可视化工具,它能够展示用户在搜索引擎...在分析给定的压缩包文件"tagcloud"时,我们可以期待找到一个关于如何创建或应用标签云的示例,或者是一套用于生成动态标签云的Flash代码资源。
【JS触屏滑动选项卡标签切换代码】是一款利用JavaScript库Swiper.js设计的互动式网页组件,主要用于在触屏设备上实现流畅的标签页切换效果。Swiper.js是一个强大的移动触摸滑动插件,它支持多种设备,包括手机、平板...
《jQCloud热门城市文字标签云代码》是一个利用JavaScript库jQuery-2.1.0.min.js实现的互动式视觉效果,旨在展示城市热度并提供数据交互功能。此代码设计为一个文字标签云,其中的城市名以不同的大小和颜色呈现,以...
本资源"jQuery动态添加删除编辑标签代码.zip"提供了一种实现动态管理标签页的方法,尤其适用于需要用户交互性高的Web应用。下面将详细阐述这个代码实现的功能及其背后的编程原理。 首先,"jQuery动态添加删除编辑...
#### 自定义标签代码解析 ```javascript // 获取document对象 var d = document; // 定义一个数组存储自定义标签及其对应的HTML标签 var mk = new Array( '<red>', ';">', '</red>', '</span>', '<big>', ';">',...
// 隐藏当前活动的标签内容,取消其高亮 $('.tab-content').hide(); $('#tabs li.active').removeClass('active'); // 显示目标内容,高亮对应的标签 $(target).show(); $(this).parent().addClass('active'...
在本文中,我们将深入探讨如何利用JS来创建一个动态的TAG标签云文字动画特效。这个特效允许用户在鼠标悬停时,使当前选中的标签静止,而其他标签继续保持滚动效果,当鼠标移开时,所有标签恢复滚动。 首先,我们...