Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >Python jquery标签云

Python jquery标签云

作者头像

py3study

发布于 2020-01-09 07:31:27

发布于 2020-01-09 07:31:27

1.5K00

代码可运行

举报

文章被收录于专栏：python3python3

运行总次数：0

代码可运行

很多知名博主都喜欢弄个标签云。今天特地看了下源码。把标签云的方法单独扣了出来。这里做一下记录

html页面代码

<!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=utf-8" />
<title>js标签云</title>
<meta name="description" content="js代码制作标签云球状3D旋转展示，通过鼠标滑过标签感应来进行3D旋转效果."/>
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#09c;}
/* rotate */
#rotate{height:400px;width:450px;position:relative;margin:10px auto;}
#rotate a{position:absolute;top:0px;left:0px;color:#fff;font-weight:bold;padding:3px 6px;font-size:14px;}
#rotate a:hover{border:1px solid #eee;background:#000;border-radius:5px;}
</style>

<script type="text/javascript" src="C:\Users\fujinzhou\Downloads\rotate.js"></script>

<!-- 标签内容 --> 
<div id="rotate">
	<a href="http://www.17sucai.com" target="_blank">php</a>
	<a href="http://www.17sucai.com" target="_blank">python</a>
	<a href="http://www.17sucai.com" target="_blank">java</a>
	<a href="http://www.17sucai.com" target="_blank">c</a>
	<a href="http://www.17sucai.com" target="_blank">lua</a>
	<a href="http://www.17sucai.com" target="_blank">linux</a>
	<a href="http://www.17sucai.com" target="_blank">apache</a>
	<a href="http://www.17sucai.com" target="_blank">Mysql</a>

</div>
<!-- 结束 -->

</body>
</html>

效果图

js上传在了附件

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/08/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

常用的AJAX弹出层代码

Code <!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" /> <titl

菩提树下的杨过

2018/01/22

1.4K0

用jQuery模拟select下拉框

很多时候，美工会觉得默认的select下拉框很难看（特别是右侧的下拉箭头按钮），他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找，又重新发明轮子鸟:)

菩提树下的杨过

2019/09/12

3.7K0

jQuery实现网页右下角悬浮层提示

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子，很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理，整体上给你的感觉还是太丑，今天为大家带来一个新的例子。是Discuz右下角悬浮层提示的。运行效果如下：

业余草

2019/01/21

3.4K0

jQuery实现网页右下角悬浮层提示

左下角悬浮广告代码_右下角浮动广告代码

http https 网络安全 html

<!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=utf-8″ /> <title>右下角广告代码-web前端开发</title> <script type=”text/javascript”> window.onload = getMsg; window.onresize = resizeDiv; window.onerror = function(){} function $(id) {return document.getElementById(id);} //短信提示使用(asilas添加) var divT,divL,divW,divH,docH,docW,docST,docSL,objTimer,i = 0; function getMsg() { try{ divT = parseInt($(“eMeng”).style.top,10); //层top位置 divL = parseInt($(“eMeng”).style.left,10); //层left位置 divH = parseInt($(“eMeng”).offsetHeight,10);//层宽 divW = parseInt($(“eMeng”).offsetWidth,10);//层高 docW = document.documentElement.clientWidth;//窗口宽 docH = document.documentElement.clientHeight;//窗口高 docST=document.documentElement.scrollTop; docSL=document.documentElement.scrollLeft; $(“eMeng”).style.top = parseInt(docST,10) + docH + 10+”px”; $(“eMeng”).style.left = parseInt(docSL,10) + docW – divW+”px”; $(“eMeng”).style.visibility=”visible”; objTimer = setInterval(“moveDiv()”,10); } catch(e){} } function resizeDiv() { try{ divH = parseInt($(“eMeng”).offsetHeight,10); divW = parseInt($(“eMeng”).offsetWidth,10); docW = document.documentElement.clientWidth; docH = document.documentElement.clientHeight; $(“eMeng”).style.top = docH – divH + parseInt(document.documentElement.scrollTop,10)+”px”; $(“eMeng”).style.left = docW – divW + parseInt(document.documentElement.scrollLeft,10)+”px”; } catch(e){} } function moveDiv() { try{ if(parseInt($(“eMeng”).style.top,10) <= (docH – divH + parseInt(document.documentElement.scrollTop,10))) { window.clearInterval(objTimer) objTimer = setInterval(“resizeDiv()”,1) } divT = parseInt($(“eMeng”).style.top,10); $(“eMeng”).style.top = divT – 1+”px”; } catch(e){} } function closeDiv()

全栈程序员站长

2022/11/05

2.4K0

基于HTML旅游网站项目的设计与实现——千岛湖旅游景点网站模板(6个页面)HTML+CSS+JavaScript

javascript html css jquery java

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 @TOC <hr> 一、网站题目👨‍🎓 🚀 旅游景点介绍、旅游风景

IT司马青衫

2022/08/17

3.5K0

基于HTML旅游网站项目的设计与实现——千岛湖旅游景点网站模板(6个页面)HTML+CSS+JavaScript

用HTML5做一个个人网站，此文仅展示个人主页界面。内附源代码下载地址

java https http html 网络安全

源代码下载地址：https://download.csdn.net/download/weixin_39641975/10371468

全栈程序员站长

2022/07/25

5990

用HTML5做一个个人网站，此文仅展示个人主页界面。内附源代码下载地址

jquery实现tab切换完整代码

java https 网络安全 html

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/120769.html原文链接：https://javaforall.cn

全栈程序员站长

2022/07/15

5.2K0

jquery tab选型卡

html http javascript css

*{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} .tab { width:240px;margin:50px;} .tab_menu { clear:both;} .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;} .tab_menu li.hover { background:#DFDFDF;} .tab_menu li.selected { color:#FFF; background:#6D84B4;} .tab_box { clear:both; border:1px solid #898989; height:100px;} .hide{display:none}

用户5760343

2019/10/10

1.7K0

关于环境保护html网页设计完整版,5个以环境为主题的网页设计与实现

javascript html css jquery java

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师，技术

IT司马青衫

2022/08/15

8800

关于环境保护html网页设计完整版,5个以环境为主题的网页设计与实现

免插件实现WordPress的Sitemap功能

生成 Sitemap 的插件有很多，比较知名的有柳城的 Baidu Sitemap Generator 和 Google XML Sitemaps，感觉就为了生成个 Sitmap 多用插件有点点浪费，

张戈

2018/03/21

9580

一个CSS相册 BY子鼠

该文是关于介绍子鼠的CSS相册，包括样式、结构、以及示例代码。

练小习

2017/12/29

5930

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]

https 网络安全 jquery css

下载：https://files.cnblogs.com/files/xiaoxiao5016/font-awesome.min.css 或者官方下载：https://fontawesome.com/download

杨校

2019/06/14

8280

JQuery笔记（二） animate支持的属性

jquery html javascript

以常见的图片切换效果对animate的动画做了实验，用了两种方式，一种是修改相对位置，一个是修改背景的位置，结果第一种可以，第二种失败。 <!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-equ

用户1075292

2018/01/23

8910

JQuery笔记（二） animate支持的属性

CSS3学习3----举例

《2》。对于绝对定位：对于上面的浮动的div1,div2,div3，我们还可以通过绝对定位对其进行设置。如：

py3study

2020/01/07

7090

JavaScript事件（二）

例题顺序： 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta ht

二十三年蝉

2018/02/27

1.3K0

JavaScript事件与例子

事件，就是预先设置好的一段代码，等到用户触发的时候执行。一：常见的事件： 1.关于鼠标的事件　　onclick 鼠标单击触发　　ondblclick 鼠标双击触发　　onmouseover 鼠标移上触发　　onmouseout 鼠标离开触发　　onmousemove 鼠标移动触发 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

二十三年蝉

2018/02/27

8850

搭建一个VIP 视频解析网站

视频网站 http class 接口

</head><body><div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 center-block" style="float: none;">

用户6256742

2024/07/11

7250

CSS3绘图实战-Nut团队标志

css每一代都会有革命性的更新，尽管目前还有一部分浏览器没有支持CSS3，就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋，一些早期不敢想象的东西，如今都可以用CSS来实现，比如，变型，渐变，

练小习

2017/12/29

6510

CSS3绘图实战-Nut团队标志

W3C标准与规范「建议收藏」

xml javascript java css html

W3C标准，即一系列标准的集合，他的本质是结构标准语言。就像平时使用的HTML、CSS等都需要遵守这些标准。万维网联盟创建于1994年，是web技术领域最具权威和影响力的国际中立性技术标准机构。它有效促进了web技术相互之间的兼容。就像网页是由三部分组成：结构、表现和行为。那么他对应的标准也分三方面: 1.结构化标准语言：HTML。可扩展标记语言(XML) ：最初设计目的是弥补HTML的不足。 XML好处： XHTML：可扩展超文本标记语言:当初建立XHTML的目的就是实现HTML向XML的过渡。 2.表现标准语言：CSS3(层叠样式表)：有利于网站的维护。 3.行为标准：主要包括对象模型(DOM)、ECMAScript等。DOM是一种与浏览器呢、平台、语言的接口，是的可以访问页面的其他的标准组件。

全栈程序员站长

2022/09/30

1.4K0

利用了jQuery.ajax()函数实现头像裁剪，上传，预览

jquery ajax 函数

利用了jQuery.ajax()函数实现头像裁剪，上传，预览 <!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;

用户1503405

2021/10/07

6520

相关推荐

常用的AJAX弹出层代码

更多 >

LV.0

这个人很懒，什么都没有留下～

作者相关精选

换一批

加入讨论

的问答专区 >

1产品KOL擅长5个领域

相关课程

一站式学习中心 >

腾讯云向量数据库-RAG七天入门训练营

向量数据库

腾讯云安灯

Python教程-Django框架快速入门到实战