Current position: home page > Site Template >A nice tag cloud js code

A nice tag cloud js code

Author: blueleaf Classification: Site Template Time: January 16, 2021 Browse: 2463
  • Applicable version: EMLOG5.3. X
  • Template category: html template
  • Applicable site: tab effect
  • Template nature: free template
  • Copyright: Internet
  • Template preview: preview the drawing or contact the author
  • Template price: ¥0 element
  • Online consultation: Click Contact
  •  A nice tag cloud js code
    A nice tag cloud js code
  •  A nice tag cloud js code 2
    A nice tag cloud js code 2
  •  Contact the Blue Leaf webmaster for more demos

A nice tag cloud Js code The style is similar to the metro interface style of the Windows system, which looks very good. Blueleaf took a little time to find the code, modify it manually, and put it on your website for use. Copy the code below to the new html file, and open the browser to see the effect as shown in the figure.

 <! doctype html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Label Cloud Effect</title> <style> *{margin:0; padding:0;border:0;} .wordbox{position:relative;} .box{position: absolute;text-align: center;word-wrap: break-word;overflow: hidden;border: 1px solid rgb(255 255 255 / 0.6); transition-duration: .6s,.6s;transition-property: background-color,color;transition-timing-function: ease,ease;} .box:hover{ opacity:0.6} .box a {color: #fff; text-decoration: none;display: inline-block;width: 100%;height:100%;} </style> <script type="text/ javascript " src=" https://cdn.staticfile.org/ jquery /1.10.2/jquery.min.js"></script> <script type="text/javascript" src=" https://cdn.jsdelivr.net/npm/wordbox @1.3.1/dist/wordbox.min.js"></script> </head> <body> <div id="wordbox"></div> <script type="text/javascript"> var titles = ['JavaScript', 'CSS', 'HTML', ' HTML5 ', 'SVG', 'PHP', 'Python', 'Shell', 'WebGL']; var words = []; for(var i = 0;  i < titles.length; i++) { words[i] = { "title" : titles[i], "url" : "" } } var colors = ['#cc5b34', '#ff9800','#00aff0','#09c','#8bc34a','#136486']; $("#wordbox").wordbox({ isLead: false,           LeadWord: {'title': 'All', 'url': ''}, words: words, colors: colors, isFixedWidth: true, width: window.innerWidth - 2, height: 160 }); </script> </body> </html>

Disclaimer:

Website: Click Copy to share with friends!

All content resources shared by this website, if not noted, are original by Blueleaf. If you need to reprint, please indicate the source; Please contact us in case of infringement Contact handling Please understand!

Comment List
 blink the eyes kiss Growl happy think poor It's embarrassing Grievance ha-ha hush Right hum Zuo Hum Hum doubt A bad laugh Make money Sadness Be cool Seduce fierce handshake yeah Hee hee Shyness applause greedy Madness Embrace gather and watch Mighty awesome
Submit comments

Clear information
Close Comment
music appreciation
Back to top