首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【javaScript案例】之类似购物车的效果实现

    这次的效果如下图: 购物车2.gif 实现的效果是在购物车界面选择想要选购的商品,提交后转到支付界面确认支付,最后支付成功后返回选购页面。...重点其实在于js的部分: 这个效果实现的基本功能如下: 勾选/不勾选第一列的框,对应第五列的小计中的价格会改变,下方的合计价格会改变 选择第一行第一列的全选按钮,下方所有的复选框都会被选中,对应的小计和合计中的价格都会发生改变...parentNode来选出复选框对应的父节点,再在该父节点中选出对应小计中的innerText,修改其内容(要对应前面的单价)=======这样第一点就完成啦,其实还要多研究细节,有很多需要在注意的细节 关于全选实现的效果

    1.4K10

    移动端页面按手机屏幕分辨率自动缩放的js

    ,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6...来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。...试想,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机端横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如...; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条...(所以现在不建议写该属性了) 想实现target-densitydpi=device-dpi的效果有什么方法?

    7.2K80

    移动端效果之CellSwiper

    写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中又是使用的React,之前使用的React...所有组件都是自己一个字母一个字母码起来的(想来也是辛酸),所以结合之前的swiper,道理类似,实现了类似微信端的抽拉效果。...代码看这里:github 移动端效果之Swiper 移动端效果之Picker 移动端效果之IndexList 移动端效果之scrollList 1....做一个效果之前,我们先需要分析一下我们应该怎么做,这样才能有的放矢。...重点在于拿到一个效果之后如何分析,只有有清晰的分析思路才能针对这个分析来给出合理的解决方案。这里仅仅记录自己做这个效果的历程,拿出来共享,希望对大家有所帮助。

    1.6K60

    移动端效果之Picker

    写在前面 接着前面的移动端效果的研究,这次来看看picker选择器的实现原理 移动端效果之Swiper 移动端效果之CellSwiper 移动端效果之IndexList 移动端效果之scrollList...因为毕竟是移动端,滑动不可避免。这次,源码中的对滑动事件进行了封装,兼容了PC端以及排除了拖动和选择造成的影响,具体看一下分析。...` /** * draggable.js * 只是起到一定的兼容性 * 实质和直接调用 el.addEventListener('touchstart', startFn); 并没有多大差别...event.changedTouches[0] || event.touches[0] : event); } } 要是DOM跟随自己在手机屏幕上的滑动而滑动,方法大同小异,无非就是在开始滑动记录开始位置...这点可以参看前面一篇文章移动端效果之Swiper,这篇文章中有着相同的方法。

    2.4K40
    领券