网页特效之鼠标展示
程序员文章站
2022-05-11 09:12:15
...
效果:每当鼠标移动到该图片,展示该图片的大图
效果图:
思路:
给div的padding-top值和大图高度一样,并以大图做该div背景
使用onmouseover事件使鼠标移动到图片上时更换div背景
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标展示</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img{
border:0;
vertical-align:middle;
}
ul {
list-style: none;
}
#box {
width:360px;
height: 70px;
padding-top: 360px;
border: 1px solid #ccc;
margin: 100px auto;
background: url(images/01big.jpg);
}
#box ul li {
float: left;
cursor: pointer;
border-left: 2px solid #fff;
}
li{
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="li01"><img src="images/01.jpg" alt=""></li>
<li id="li02"><img src="images/02.jpg" alt=""></li>
<li id="li03"><img src="images/03.jpg" alt=""></li>
<li id="li04"><img src="images/04.jpg" alt=""></li>
<li id="li05"><img src="images/05.jpg" alt=""></li>
</ul>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box);
function fn(li_id,bg_num){
var obj = document.getElementById(li_id);
console.log(obj);
obj.onmouseover = function(){
box.style.backgroundImage = bg_num;
}
}
fn('li01','url(images/01big.jpg)');
fn('li02','url(images/02big.jpg)');
fn('li03','url(images/03big.jpg)');
fn('li04','url(images/04big.jpg)');
fn('li05','url(images/05big.jpg)');
</script>
</html>
使用for循环改进后的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标展示</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img{
border:0;
vertical-align:middle;
}
ul {
list-style: none;
}
#box {
width:360px;
height: 70px;
padding-top: 360px;
border: 1px solid #ccc;
margin: 100px auto;
background: url(images/01big.jpg);
}
#box ul li {
float: left;
cursor: pointer;
border-left: 2px solid #fff;
}
li{
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/05.jpg" alt=""></li>
</ul>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
var lis = document.getElementsByTagName('li');
function fn(li_id,bg_num){
var obj = document.getElementById(li_id);
// console.log(obj);
obj.onmouseover = function(){
box.style.backgroundImage = bg_num;
}
}
for(var i=1;i<=lis.length;i++){
// console.log(i);
lis[i-1].id = 'li0'+i;//给各项li添加id
fn('li0'+i,'url(images/0'+i+'big.jpg)');
}
</script>
</html>
具体效果图可见:鼠标展示
上一篇: ubuntu 16.04修改用户名密码&忘了密码如何进系统
下一篇: HTML5 基本结构