一个有意思的图片鼠标切换

做淘宝活动页面的时候，用到最多的就是锚点，一个图片标签，然后不断地在上面画热区。不过我想问的是有多少人研究过，用矩形画热点，四个坐标值各自表示的含义，还有它和background-position有什么相同或相似的地方吗？

我们都知道 map 的代码大概是这样的：

 <area shape="rect" coords="17,66,243,355" href="#" />

这四个坐标值，前两个值分别表示左上角的点相对图片的坐标点，简单可以理解成background-position，后两个值分别表示右下角的点相对图片的坐标点。小张画了一个简单的图，大家可以理解下。

画的比较丑，请大家见谅。图中的黑框区域是一张图片，红框表示画的热区。coords 的数值从左往右分别表示 A1，B1，A2，B2 的长度。根据这四个值，我们可以求出这个热区的长度是 A2-A1，高度是 B2-B1。OK，那让我来分析这样一个效果，照理先贴代码：

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"><title>图片切换</title><style type="text/css">html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td{margin:0;padding:0;}.wq_page{ width:100%; font:normal 12px/1.5 Arial, Helvetica,
sans-serif; overflow:hidden; zoom:1; background:#000}.wq_page img{ vertical-align:top;border: none;}.wq_tab{ width:990px; margin:0px auto; overflow:hidden;
display:block;}.tab_left{ width:370px; height:860px; float:left;}.tab3 .tab_left{
background:url(http://img03.taobaocdn.com/tps/i3/T17kWGXcdvXXXXXXXX-370-860.jpg)no-repeat;}.tab_right{ width:620px; height:860px; float:left;
overflow:hidden;}.tab_right{ position:relative;}.tab_right .tab_on{ display:none; position:absolute;
overflow:hidden; background:#191919;}.tab_on span{ display:block; position:absolute; width:100%;
height:100%;}.tab3 .tab_on span{
background-image:url(http://img04.taobaocdn.com/tps/i4/T1wMWIXkVcXXXXXXXX-620-860.jpg);background-repeat:no-repeat;}.tab_on em{ display:block; width:100%; height:100%;
margin-left:100%;}.tab3 .tab_on em{
background-image:url(http://img01.taobaocdn.com/tps/i1/T1sgGIXX8dXXXXXXXX-620-860.jpg);background-repeat:no-repeat;}</style>
</head>
<body>
<div class="wq_page" id="wq_page"><div class="wq_tab tab3" id="tab1"><div class="tab_left"></div><div class="tab_right"><img
src="http://img01.taobaocdn.com/tps/i1/T1sgGIXX8dXXXXXXXX-620-860.jpg"
alt=""usemap="#Maptab3"/><map name="Maptab3" id="Maptab3"><area shape="rect" coords="408,651,613,860"href="http://www.taobao.com/go/act/new/binfenshengdan10.php"/><area shape="rect" coords="408,446,613,651"href="http://www.taobao.com/go/act/new/binfenshengdan2.php"/><area shape="rect" coords="408,223,613,446"href="http://www.taobao.com/go/act/new/binfenshengdan5.php"/><area shape="rect" coords="408,8,613,224"
href="http://www.taobao.com/go/act/new/binfenshengdan6.php"/><area shape="rect" coords="204,8,409,276"
href="http://lelo2.xin.taobao.com/"/><area shape="rect" coords="204,276,409,437"
href="http://mayday.xin.taobao.com/"/><area shape="rect" coords="204,437,409,704"href="http://www.taobao.com/go/act/new/binfenshengdan4.php"/><area shape="rect" coords="204,704,409,860"
href="http://adidas.xin.taobao.com/"/><area shape="rect" coords="0,734,205,860"
href="http://www.taobao.com/go/act/new/binfenshengdan7.php"/><area shape="rect" coords="0,486,205,733"
href="http://www.taobao.com/go/act/new/binfenshengdan1.php"/><area shape="rect" coords="0,176,205,486"
href="http://www.taobao.com/go/act/new/binfenshengdan9.php"/><area shape="rect" coords="0,6,205,175"
href="http://vivian.xin.taobao.com/"/></map></div></div>
</div>
<script type="text/javascript">function getTag(id, tag) {if (tag) {return
document.getElementById(id).getElementsByTagName(tag);}else {return document.getElementById(id);}}//校验根据area取到的元素的父节点的name是否匹配正则function getChild(tags, re) {var tag = [];for (var i = 0,j = 0; i < tags.length; i++) {if (tags[i].parentNode.name.match(re)) {tag[j] = tags[i];j++;}}return tag;}(function() {var subarea = getChild(getTag("wq_page", "area"), /(
|^)(Maptab)(\d)( |$)/);var coords;function autoMove(tag, flag) {tag.style.marginLeft = (parseInt(tag.style.marginLeft) +
flag) + '%';var time = setTimeout(function() {autoMove(tag, flag)}, 20)if (parseInt(tag.style.marginLeft) * flag >= 0) {clearTimeout(time);autoborder(tag, -1);}}function autoborder(tag, flag) {tag.style.top = (parseInt(tag.style.top) + flag) + 'px';tag.style.left = (parseInt(tag.style.left) + flag) + 'px';var t1 = setTimeout(function() {autoborder(tag, flag)}, 20)if (parseInt(tag.style.top) * flag >= 0)
clearTimeout(t1);}function stopCount() {if (t)clearTimeout(t)}for (var i = 0; i < subarea.length; i++) {(function(i) {subarea[i].onmouseover = function() {var tab_on = document.getElementById("tab_on");if (tab_on) {tab_on.parentNode.removeChild(tab_on);}var _div = document.createElement("div");_div.className = 'tab_on';_div.id = 'tab_on';_div.innerHTML = '<a href="#"
target="_blank"><span><em></em></span></a>';subarea[i].parentNode.parentNode.appendChild(_div);var _span = _div.getElementsByTagName("span")[0],_em = _span.getElementsByTagName("em")[0],_a = _div.getElementsByTagName("a")[0];coords =
subarea[i].getAttribute('coords').split(",");var _h = coords[3] - coords[1];//高度var _w = coords[2] - coords[0];//宽度_a.setAttribute('href',
subarea[i].getAttribute('href'));_div.style.display = "block";_div.style.left = coords[0] + "px";_div.style.top = coords[1] + "px";_div.style.width = _w + "px";_div.style.height = _h + "px";_span.style.top = "8px";_span.style.left = "8px";_span.style.marginLeft = "-100%";_span.style.backgroundPosition = "-" + coords[0] +
"px -" + coords[1] + "px";_em.style.backgroundPosition = "-" + coords[0] + "px-" + coords[1] + "px";autoMove(_span, 10)}})(i);}})();
</script>
</div>
</body>
</html>

还是简单说一下代码：先去取 area 元素，通过ID把所有的 area 元素取到，再通过正则表达式，把符合条件的给筛选出来（这里是判断它的父级元素即 map 标签的 name，因为考虑到一个页面中也许会有多个 map）。遍历 area 元素，给它加上鼠标移入事件。

图片切换，必然是新建一个层，覆盖掉原先的图片层，所以在移入事件中，如果层存在，即删除掉，创建一个层出来（这一步个人觉得处理的不是太好，如果层存在，也可以不用删除层，当然也不需要再创建层出来，即可对当前层做修改即可，这个大家可以对代码做优化，小张就不做处理了），宽度和高度是热区的宽度和高度。这里的创建的层的innerHTML还是有必要讲一下的：

<a href="#" target="_blank"><span><em></em></span></a>

span 值是用新图片的 background 来做定位，他一开始的位置出现在相对父级 -100% 的位置，因为要做运动，em 标签是用来存放老图片的 background 来做定位。假如去掉 em，即开始做运动时，那一块底是黑色背景的，css 代码在这里：

.tab_right .tab_on{ display:none; position:absolute; overflow:hidden; background:#191919;
}

整个运动还有上下的运动，所以一开始可以给top和left设定一个值，然后在运动中慢慢地让他们的值回归到0。

再来分析下autoMove，它先将 span 的 margin-left 值慢慢地拉回 0，因为一开始的值为 -100%，每次 +10，是加10个百分点，当值变成0时，停止运动，开启一个新的运动(如果不开启，那么此时的span的left和top值为8)，就是将left值和top值重新回归到0。

一个有意思的图片鼠标切换相关推荐

html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果
在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换.于是想要动手实践一下,并且添加上自己的想法.于是就有了下面的图片和代码. ...
HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...
一个小程序:图片代替鼠标移动
一个小程序:图片代替鼠标移动程序的运行效果: 当鼠标移动到窗口内,鼠标不见了,取而代之的是图片..... ============================================== ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
html5鼠标移过切换图片,鼠标移动到图片上切换到另一张图片，移出时又切默认图片...
HTML写法: JS写法:var img = document.createElement("img"); img.setAttribute("src",&qu ...
切换图片尝试写第一个js插件图片轮播
新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正最近在看怎么写js插件,实验写了一个简单的图片轮播插件 jqury.picPlay.js . 基本html框架为<div cl ...
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
#vue3-cli4.5项目技巧1 router-link导航鼠标切换样式 vue3中.router-link-exact-active失效 vue3exact-active-classs失效 vue ...
JQuery实现移动9宫格图片自由切换移动
这篇文章主要介绍了通过JQuery实现移动9宫格的前端页面特效,用户可以自由选择1张图片,并移动此图片,松开鼠标后,会自动交换2张图片的位置. 实现方法:html和css在页面上静态地实现9宫格,用9 ...
jq实现背景图片动态切换
在很多需求中都用到了利用jquery实现背景图片的动画效果,接下来我们将实现点击ul中的li实现背景图片的动态切换. 思路和实现步骤: 1.先建立静态页面.其中box盒子用来动态生成ul,li,a和i ...

一个有意思的图片鼠标切换

一个有意思的图片鼠标切换相关推荐

最新文章

热门文章