<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
$(function(){
var $car = $('.car')
var $bt = $('#btn')
var $em = $('em')
var $point = $('.point')
$bt.click(function(){
var $pos = $bt.offset()
var $carpos = $car.offset()
$point.css({'left':$pos.left+$bt.outerWidth()/2-5,'top':$pos.top+$bt.outerHeight()/2-5})
$point.show()
$point.stop().animate({'left':$carpos.left+$car.outerWidth()/2-5,'top':$carpos.top+$car.outerHeight()/2-5},1000,function(){
$point.hide()
$eNum = $em.html()
$em.html(parseInt($eNum)+1)
})
})
})
</script>
<style>
.ca
jQuery加入购物车特效
最新推荐文章于 2024-07-16 21:37:23 发布
该博客介绍了如何利用jQuery创建一个购物车添加特效。通过编写HTML和CSS基础,结合JavaScript事件监听,当触发点击事件时,小红点首先出现在按钮中央,随后使用jQuery的animate方法平滑移动至购物车图标的位置,实现动态效果。
摘要由CSDN通过智能技术生成