html+jquery制作网页地图

http://jvectormap.com/

<!--StartFragment -->

JVectorMap 是一个显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 or 4, Safari, Chrome, Opera, IE9, 同时也支持老的ie浏览器ie6到ie8.使用 jVectorMap也很简单,和其他的jQuery方法相同。

在初始话地图的时候你也可以提供参数去改变地图的样式。

制作工具:Illustrator 

制作教程:http://www.jaffredo.com/2012/tutoriel-jquery-creer-ses-propres-cartes-pour-jvectormap-et-jqvmap/

并使用官方提供的转换工具 讲 svg 格式转换为相应可使用的 javascript code 代码

html+jquery制作网页地图

时间: 2024-10-10 04:12:07

html+jquery制作网页地图的相关文章

利用jquery制作网页导航定位

我们在日常浏览网站中,由于网站包含信息量大,例如购物网站中会有许多商品.那么对于这样的情况,往往会有导航栏来帮助我们迅速的找到自己想要的信息.例如图中所示,左侧是商品列表,右侧是商品分类导航栏. 我们现在需要做到的效果是: 1.点击某个商品分类,自动跳转至具体的商品列表. 2.在鼠标滚动浏览商品的同时,根据左侧的商品信息的变化情况,右侧的分类名称会自动标红.表示现在浏览的商品正是该分类下的商品. 实现的基本思路: 1.设置锚点.在导航栏的<a>标签中,设置"href"属性为

20+个很有用的 jQuery 的 Google 地图插件

Google 地图在寻找我们想要了解的商店或者其它有趣的地方这种用途方面很流行和实用. 地图被一些商店特地集成到了它们的网站上面,这样就可以让人们容易找到它们的所在. 尽管其并不容易被集成,Google 地图使用起来还是简单且引人注目的. 在你的站点上集成它需要一个漫长且复杂的过程. 但多亏了拥有一个许多实用Google地图插件资源库的jQuery. 你只需要将jQeury地图插件安装到你的站点上,然后就可以开始根据你的业务需要来设计简单但能吸引人的地图了. 在本文中,我会列出一堆实用的jQue

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

最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是Discuz右下角悬浮层提示的.运行效果如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

CSS3结合jQuery制作的冒泡工具图片提示效果

一款基于CSS3技术的冒泡提示效果,为了演示效果,生成了许多冒泡的提示,实际使用中,可能不需要这么多,结合jQuery和jquery UI共同实现的网页提示特效,挺不错.因CSS不支持IE8及以下低版本,所以请使用IE9.chrome或火狐测试. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

使用 CSS &amp; jQuery 制作一款漂亮的多彩时钟

大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮的多彩时钟效果大家不一定见过,赶紧来看看. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件 精心挑选的美轮美奂的 jQue

推荐几款制作网页滚动动画的 JavaScript 库

这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以让网站变得高大上起来. ScrollReveal.js ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画. 在线演示     立即下载 Sc

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

pc端对制作网页动画一些心得

最近做了一些pc端的页面,用了一些动画效果,总的来说感觉还不错,大概记录下一些体会 首先,我们把pc端的动画类型分三类: javascript和jQuery直接控制dom属性 css3的属性transition css3的animation 这三类是我目前主要使用的动画效果制作来源 javascript和jQuery直接控制dom属性 这种模式就是我们传统的js模式,或者在jquery上进行一些包装.主要是直接变化dom节点的普通属性,left,top,width,height之类的: 优点:

使用 CSS3 &amp; jQuery 制作漂亮的书签动画

今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件