几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
商品浏览用JavaScript怎么写
来源：互联网
2023-03-16 23:59:46 版权归原作者所有，如有侵权，请联系我们
像淘宝一样的图片怎么写，鼠标滑过还会变换图片，请看接下来的步骤
工具/原料
- 电脑，
- Hbuilder,
方法/步骤
首先，打开电脑上的Hbuilder软件，创建一个项目，然后创建一个文件夹，用来存放图片与代码。
把需要用到的图片复制粘贴进img文件夹下，备用。如下图所示：
在html页面里编写代码，首先，先把静态样式写好，用div套img。先把图片固定好
编写静态页面的css样式，进行排版的调整
最后一步，编写JavaScript的代码
好啦，这样就轻松的编写好了整套的代码，马上运行试试吧
附代码：
html页：
div class="show">
div class="show_up">
/div>
div class="show_down">
img src="./img/01.jpg"/>
img src="./img/02.jpg"/>
img src="./img/03.jpg"/>
img src="./img/04.jpg"/>
img src="./img/05.jpg"/>
/div>
/div>
script type="text/javascript">
window.onload=function(){
var img=document.getElementsByTagName("img");
var show_up=document.getElementsByClassName("show_up")[0];
img[0].onmouseover=function(){
show_up.style.backgroundImage="url(img/01big.jpg)"
}
img[1].onmouseover=function(){
show_up.style.backgroundImage="url(img/02big.jpg)"
}
img[2].onmouseover=function(){
show_up.style.backgroundImage="url(img/03big.jpg)"
}
img[3].onmouseover=function(){
show_up.style.backgroundImage="url(img/04big.jpg)"
}
img[4].onmouseover=function(){
show_up.style.backgroundImage="url(img/05big.jpg)"
}
}
/script>
css页：
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
.show{
width:360px ;
height:430px ;
border:1px solid black ;
margin: 0px auto;
}
.show_up{
width:360px ;
height:360px ;
background-image: url(../img/01big.jpg);
}
.show_down{
width:360px;
height: 70px;
}
.show_down img{
float: left;
}
注意事项
- 注意细微的地方，例如标点符号的使用
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT商品
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 256 JAVASCRIPT
- 详细阅读