css代码:
注意设置show时,如果不写#right .show
,样式不生效,前置#right
,权重与前面的#right img
一致,就会生效
效果:
[](()2.在左半部分加一个外框的效果,点击到哪个小图,就会有一个外框图片
html代码:
css代码:
.box {
position: relative;
}
#pointer {
position: absolute;
top: 0;
left: 0;
margin-top: 4px;
}
效果:
(所以何时用position,何时用浮动呢?
需要依赖某个元素,并且需要用到像素做位置调整时,用position,通常是某个部分的左上角或右下角这样的位置
先记录一下,回去看之前的知识)
[](()3.鼠标移动时,切换右侧图片
js代码:
效果:第一张图被外框图片挡住了,只有鼠标在没有挡住的地方上空时,才会切换到第一张图
[](()4.鼠标移动时,外框图片也跟着移动
在console上试出外框图片可以通过修改top值来移动位置,控制top在0-165px即可
js代码:
var pointer = document.getElementById(‘pointer’);
[](()5.让外框图片自动从上往下移动
var pointer = document.getElementById(‘pointer’);
var Top = 165;
var nowTop = 0;
var speed = 4;
var moveLoop = setInterval(moveFunc, 100);
function moveFunc(){
if (nowTop < Top){
nowTop += speed;
if (nowTop >= Top){
nowTop = 165;
clearInterval(moveLoop);
}
pointer.style.top = nowTop + ‘px’;
}
if (nowTop == Top){
clearInterval(moveLoop);
pointer.style.top = nowTop + ‘px’;
}
}
效果:
[](()6.让外框图片自动从下往上移动
var pointer = document.getElementById(‘pointer’);
var Top = 0;
var nowTop = 165;
var speed = 4;
var moveLoop = setInterval(moveFunc, 100);
function moveFunc(){
if (nowTop < Top){
nowTop += speed;
if (nowTop >= Top){
nowTop = 165;
clearInterval(moveLoop);