放大镜,楼梯导航

一、商品放大镜

原理:设置两张图,展示区图片的放大效果是通过移动展示区图的位置实现的  

1. 设置css样式

2.   搭建事件结构 

  

 3.计算未展示的区域的比例:

 二.楼梯导航

  原理:点击侧边栏的按钮,跳转到相应的页面位置

1.设置好对应的样式;

2. 设置跳转

 3. 设置循环定时器,达到过渡切换的目的 

或者用ele.scrollIntoview();可以达到切换的目的。

4.添加切换变量布尔值让显示区域居中显示, 处理isTop的传参问题(不能用isTop||true进行处理传进的参数,因为传入false的时候,isTop会变为true),或者用??代替||

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值