<Meta charset="UTF-8">
26-电商放大镜
<script type="text/javascript">
window.onload = function(){
var left = document.getElementById("left");
var right = document.getElementById("right");
var rpic = document.getElementById("rpic");
var Box = document.getElementById("Box");
var cover = document.getElementById("cover");
// 给左侧加鼠标移动事件
cover.onmousemove = function(){
//获得事件对象
var ev = window.event;
var mouse_left = ev.offsetX || ev.layerX;
var mouse_top = ev.offsetY || ev.layerY;
// document.title = mouse_left + '|' + mouse_top;
//计算色块的位置
var <a href="/tag/Box/" target="_blank" class="keywords">Box</a>_left = mouse_left - 100;
var <a href="/tag/Box/" target="_blank" class="keywords">Box</a>_top = mouse_top - 100;
// 判断是否超出
if (<a href="/tag/Box/" target="_blank" class="keywords">Box</a>_left < 0) {
box_left = 0;
}
if (box_left > 200) {
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>_left = 200;
}
if (<a href="/tag/Box/" target="_blank" class="keywords">Box</a>_top < 0) {
box_top = 0;
}
if (box_top > 200) {
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>_top = 200;
}
// 让色块移动
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.style.left = <a href="/tag/Box/" target="_blank" class="keywords">Box</a>_left + 'px';
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.style.top = <a href="/tag/Box/" target="_blank" class="keywords">Box</a>_top + 'px';
//计算右侧<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>位置
var rpic_left = <a href="/tag/Box/" target="_blank" class="keywords">Box</a>_left*-2;
var rpic_top = <a href="/tag/Box/" target="_blank" class="keywords">Box</a>_top*-2;
// 让右侧移动
rpic.style.left = rpic_left + 'px';
rpic.style.top = rpic_top + 'px';
}
//给左侧加鼠标移入事件
cover.onmou<a href="/tag/SEO/" title="SEO">SEO</a>ver = function(){
// 让左侧色块和右侧隐藏
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.style.display = 'block';
right.style.display = 'block';
}
// 给左侧加鼠标移出事件
cover.onmou<a href="/tag/SEO/" title="SEO">SEO</a>ut = function(){
// 让左侧色块和右侧隐藏
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.style.display = 'none';
right.style.display = 'none';
}
}
Box">