js实现模拟购物商城案例
学习HTML，css和js前端的小伙伴们，这次来分享购物商城案例的实现！
准备阶段：准备一些需要放到页面上的图片，小图和其对应的大图，博主这边举例为小图(40 x 40),大图(321 x 430)。
结构分析： 大图区域 小图区域 整体边框区域 效果分析： 鼠标放在小图片上大图会对应显示。 鼠标放在小图片上面会有对应效果。 鼠标移出时小边框对应效果消失。 使用css对边框进行设置：对div标签进行设置（对边框属性进行设置）：
#showdiv{ width: 342px; height: 505px; border: solid 1px ; border-radius: 10px; }
对table标签进行设置（不需要边框，且离顶部有一定的距离）：
#ta{ margin: auto; margin-top: 5px; }使用js对页面动态效果进行设置：
鼠标进入的函数：
function operInImg(img,src){ //设置图片的样式 img.style.border='solid 1px blue'; //设置大图的img路径 //获取大图路径 var big = document.getElementById('big'); //设置路径 big.src=src; } function operOutImg(img){ //设置图片的样式 img.style.border=''; }
鼠标移出函数：
function operOutImg(img){ //设置图片的样式 img.style.border=''; }整体代码实现：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <!--声明js代码域--> <script>//创建函数进行照片的联动和样式设置function operInImg(img,src){ //设置图片的样式 img.style.border='solid 1px blue'; //设置大图的img路径//获取大图路径var big = document.getElementById('big');//设置路径big.src=src; }function operOutImg(img){ //设置图片的样式 img.style.border='';} </script> <!---声明css代码域--> <style>/*设置div样式*/#showdiv{ width: 342px; height: 505px; border: solid 1px ; border-radius: 10px;}/*设置table样式*/#ta{ margin: auto; margin-top: 5px;} </style> <title>taobao</title></head><body> <div id='showdiv'> <table id='ta'> <tr height='300px'> <td colspan='5'><img src='https://www.haobala.com/bcjs/images/demo-big.jpg' alt='' id='big'></td> </tr> <tr height='40px'> <td><img src='https://www.haobala.com/bcjs/images/demo01.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big01.jpg’)' onmouseout='operOutImg(this)'></td> <td><img src='https://www.haobala.com/bcjs/images/demo02.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big02.jpg’)' onmouseout='operOutImg(this)'> </td> <td><img src='https://www.haobala.com/bcjs/images/demo03.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big03.jpg’)' onmouseout='operOutImg(this)'> </td> <td><img src='https://www.haobala.com/bcjs/images/demo04.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big04.jpg’)' onmouseout='operOutImg(this)'> </td> <td><img src='https://www.haobala.com/bcjs/images/demo05.jpg' alt='' onmouseover='operInImg(this,’./images/demo-big05.jpg’)' onmouseout='operOutImg(this)'> </td> </tr> </table> </div></body></html>
实现效果：
感谢您的阅读，不足之处欢迎指正！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. Intellij IDEA如何去掉@Autowired 注入警告的方法2. IntelliJ IDEA恢复删除文件的方法3. .NET的基元类型包括什么及Unmanaged和Blittable类型详解4. java编写一个花名随机抽取器的实现示例5. IntelliJ IDEA 下载安装超详细教程(推荐)6. IntelliJ IDEA设置背景图片的方法步骤7. SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解8. idea设置代码格式化的方法步骤9. python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例10. 关于html嵌入xml数据岛如何穿过树形结构关系的问题
网公网安备