js图片上怎么设置热区

2023-03-04 03:32:01JavaScript013

js图片上怎么设置热区,第1张

// MAP1名称

var mapName1 = "Map1"

// MAP1ID

var mapId1 = "MapId1"

// 指定DIV名称

var divnId = "mask"

// 图片路径

var imgPath = ""

main = function(type) {

var obj

switch(type) {

case "aa" :

// 指定图片及热点对象取得

obj = imgMapList[0]

// 创建图片及热点

creatImpAndHot(obj)

break

}

creatImpAndHot = function(hotObj) {

// 创建热点MAP对象

var map = document.createElement_x("Map")

// 设置MAP名称

map.name = mapName1

// 设置MAPID

map.id = mapId1

// 热点列表取得

var length = hotObj.map.length

for (var i = 0 i < length i++) {

var tempMap = hotObj.map[i]

// 创建热区对象

area = document.createElement_x("area")

// 设置热区类型

area.shape = tempMap.shape

// 设置热区坐标

area.coords = tempMap.coords

// 设置热区对应链接

area.href = tempMap.href

// 设置热区对应事件

area.onclick = tempMap.onclick

// 设置热区id

area.id = tempMap.id

// 向MAP中追加热区对象

map.appendChild(area)

}

// 创建图片对象

var img = document.createElement_x("img")

// 图片ID

img.id = hotObj.img.id

// 设置图片链接

img.src = hotObj.img.imgName

// 设置图片对应热区MAP

img.useMap="#" + mapName1

// 设置图片尺寸

img.width = hotObj.img.width

img.height = hotObj.img.height

// 边框

img.border = "0"

// 设置图片ID

img.id = hotObj.id

// 清空指定DIV内容

document.getElementByIdx_x(divnId).innerHTML = ''

// 向DIV区添加MAP对象

document.getElementByIdx_x(divnId).appendChild(map)

// 向DIV区添加图片对象

document.getElementByIdx_x(divnId).appendChild(img)

}

testClick = function() {

alert()

}

creatImgAndMap = function(){

var tempArray = new Array()

var tempObj = new Object()

// 图片ID

tempObj.img = new Object()

tempObj.img.id = "test1"

// 图片名称（只要图片名称，路径由公共变量设置）

tempObj.img.imgName = "113.jpg"

// 设置图片尺寸

tempObj.img.width = "640"

tempObj.img.height = "200"

var tempMap

tempObj.map = new Array()

// 热点1

tempMap = new Object()

// 热区ID

tempMap.id = "test1_hot1"

// 类型

tempMap.shape = "rect"

// 热区坐标

tempMap.coords = "159,167,238,191"

// 链接

tempMap.href = "#"

// 单击事件

tempMap.onclick = testClick

// 添加到列表中

tempObj.map[0] = tempMap

// 热点2

tempMap = new Object()

// 热区ID

tempMap.id = "test1_hot2"

// 类型

tempMap.shape = "rect"

// 热区坐标

tempMap.coords = "147,7,286,33"

// 链接

tempMap.href = "#"

// 单击事件

tempMap.onclick = testClick

// 添加到列表中

tempObj.map[1] = tempMap

// 将图片及相应热区信息添加到列表中

tempArray[0] = tempObj

return tempArray

}

// 热点映射

var imgMapList = creatImgAndMap()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function abc(){

main("aa")

}

</script>

</head>

<body>

</div>

</body>

</html>

D3.js

D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM，然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的

HMTL 表格，或是利用它的流体过度和交互，用相似的数据创建惊人的 SVG 条形图。

ChartJS

Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas

基础上。目前，它支持6种图表类型(折线图，条形图，雷达图，饼图，柱状图和极地区域区)。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于

5KB。

Highcharts JS

Highcharts JS 是一个制作图表的纯 Javascript 类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE

和火狐等等对个人用户完全免费纯JS，无BS支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图跨语言：不管是

PHP、Asp.net 还是 Java 都可以使用。

Fusioncharts

FusionCharts Suite XT 是个专业的 JavaScript

图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可点击的

legend 关键字，还有 dril-down，缩放/滚动和单击打印图表功能。

Flot

Flot 是受 Plotr 和 PlotKit 的启发，Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为

flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+,

Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

Chartist.js

Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图，可以被控制，并通过对 CSS3 媒体查询和 SASS

定制。另外 Chartist.js 提供很酷的动画。

n3-charts

如果你是一个 AngularJS 开发者，你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上，提供了可定制的

AngularJS 指令的形式不同标准的图表。

Ember Charts

Ember Charts 是一个基于 Ember.js 和 D3.js

的图表库。它包括时间序列、柱状图、饼图、点图，很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践，是高度可定制和可扩展的。

Chartkick

Chartkick 是专为 Ruby 应用程序的 JavaScript

图表库。它提供了所有主要的图表类型，如饼图，柱形图，条形图，面积，地理，时间，以及多个系列。

MeteorCharts

它有一个很酷的图表生成器，为您提供选项来选择图表，选择主题，然后生成一个图表。

amCharts

amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5

Stock Chart、JavaScript Maps 三种图表组件。

EJS Chart

EJS图表声称自己是企业准备的图表库。图表看起来很干净，可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。

uvCharts

uvCharts 是一个开源的 JavaScript 图表库，号称有100多个自定义选项。它拥有12种不同的标准图表类型，开箱即用。

ECharts

基于 Canvas，纯 JavaScript

图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。

意思应该是延迟加载，延迟加载主要是因为一次加载图片过多会导致网络请求过多，性能下降。所以才有延迟加载这一说。

主要思路：

在HTML引入图片是，不要用src直接引入图片路径，

定一个_src私有属性存储图片路径。

当页面加载时，先加载可视区的图片，即将私有属性_src 修改为src。

下面是思路的代码实现：

<style>

* {margin:0px padding:0px}

ul {width:996px overflow:hidden border:1px solid #ccc margin:10px auto}

li {list-style:none float:left margin:10px width:300px border:1px solid yellow height:200px}

img {width:100% display:block height:100%}

</style>

window.onload=function(){

var aImg = document.getElementsByTagName('img')

timeOut()

window.onscroll = timeOut

function timeOut()

{

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

var clientHeight = document.documentElement.clientHeight

var top = scrollTop + clientHeight

for(var i=0i<aImg.lengthi++)

{

var oImgTop = getPos(aImg[i]).top

if(top > oImgTop)

{

aImg[i].src = aImg[i].getAttribute('_src')

}

function getPos(obj)

{

var left = 0

var top = 0

while(obj)

{

left += obj.offsetLeft

top += obj.offsetTop

obj = obj.offsetParent

}

return {'left':left,'top':top}

}

</script>

</head>

<body>

<ul>

</ul>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：前端开发是html+css,交互js传参用什么

# 下一篇：如何用电脑看快手

推荐阅读

热门文章

最新发布

标签列表

js图片上怎么设置热区

给您推荐相同类型的内容：