js砸碎笔记

1、有这么个问题:有个按钮使用jquery-1.3.2绑定了click事件,该按钮的父元素上阻止了事件冒泡,然后在document上使用jquery1.10.2也绑定了click事件 。按说我单击那个按钮,不会触发document绑定click事件,但是触发了。后来发现是版本问题,应该是jquery版本事件系统实现不一样导致的。如果用高级的版本( 比如1.4.2)来绑定按钮的click事件就正常了。

2、今天搞IE 11 遇到个问题,如果一个图片加载完,如果它不可见(display: none)或者他的父节点有隐藏的,那么直接读取 img.width 和img.height 都是0,如果借助jquery ,$(img).width() ,则可以读取到,还是jquery 高上大。

3、今天和开发同事(java)协同做项目,遇到中文编码问题。如果js 手动提交 (当然包括ajax提交),如果使用encodeURIComponent转码中文参数,得转2次,才能转正确。网上搜了搜原因吧,还是想不明白。如果使用jquery 提交,jquery 自动会帮你转好。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现一个被砸碎效果,可以使用一些动画和物理效果。以下是一个简单的示例代码: HTML: ```html <div class="car-container"> <div class="car"></div> </div> <button onclick="smash()">砸车</button> ``` CSS: ```css .car-container { position: relative; width: 400px; height: 400px; } .car { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('car.png'); background-size: cover; } ``` JavaScript: ```javascript function smash() { // 获取车元素 var car = document.querySelector('.car'); // 添加一个碎片元素 var fragment = document.createElement('div'); fragment.className = 'fragment'; fragment.style.backgroundImage = 'url("fragment.png")'; // 将碎片元素添加到车元素的父级元素中 car.parentNode.appendChild(fragment); // 计算碎片元素的位置和旋转角度 var rect = car.getBoundingClientRect(); var x = rect.left + rect.width / 2; var y = rect.top + rect.height / 2; var angle = Math.random() * 360; // 将碎片元素放置到车元素的位置,并让它飞出去 fragment.style.transform = 'translate(' + x + 'px, ' + y + 'px) rotate(' + angle + 'deg)'; fragment.style.opacity = 0; fragment.style.transition = 'transform 1s ease-out, opacity 0.5s linear'; setTimeout(function() { fragment.style.transform = 'translate(' + (x + Math.random() * 200 - 100) + 'px, ' + (y + Math.random() * 200 - 100) + 'px) rotate(' + (angle + Math.random() * 180 - 90) + 'deg)'; fragment.style.opacity = 1; }, 10); // 移除车元素 car.parentNode.removeChild(car); } ``` 这个示例代码会在页面中创建一个车元素和一个砸车按钮。当用户点击按钮时,会将车元素替换为若干个碎片元素,并让它们飞出去。你需要将`car.png`和`fragment.png`替换成你自己的图片。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值