jquery 购物车飞入特效--全网最简单

2023-10-31

有个插件,jquery.fly.js,可以搞定,好象特点之一是有抛物线效果,如果要求不高,可以看看我这个,其实也是在网上看到的,作了些改进。

三个元素:被点击的div,飞翔的小红点,装小红点的div(购物车);

<div id="beidianji">被点击的</div>

 <div class="point"></div><!--购物车红点 --> 

<div class="car">装小红点的购物车</div>

这里的关键是小红点的定位必须是 position:fixed;

样式:

.point{
position:fixed;
z-index:9999;
height: 10px;
width: 10px;
background-color: red; 
border-radius: 50%;
}

js代码:

 $('#beidianji').click(function(){   
        /*先计算 被点击的元素距window窗口的上、左距离 */
      var    ckTop =  $(this).offset().top - $(window).scrollTop();
      var     ckLeft =  $(this).offset().left - $(window).scrollLeft();
        $('.point').css({'left':ckLeft,  'top':c

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jquery 购物车飞入特效--全网最简单 的相关文章

随机推荐

  • websphere6.x 调用集群EJB的Context.PROVIDER_URL写法

    import java util Hashtable import javax naming Context import javax naming InitialContext Hashtable env new Hashtable en
  • caffe源码解析 — net.cpp

    Net类是Solve类的一个成员 在net cpp中定义了对Net的所有操作 其中包括 Init GetLearningRateAndWeightDecay ForwardPrefilled Backward ShareTrainedLay
  • 计算机数值转换教案,计算机数值方法教案.doc

    第O章 绪论 一 教学设计 1 教学内容 数值计算方法这门课程的形成背景及主要研究内容 研究方法 主要特点 算法的有关概念及要求 误差的来源 意义 及其有关概念 数值计算中应注意的一些问题 2 重点难点 算法设计及其表达法 误差的基本概念
  • 数据结构——快速排序

    1 原理及代码实现 快速排序 快速排序也是一种分治的排序算法 快速排序和归并排序是互补的 归并排序将数组分成两个子数组分别排序 并将有序的子数组归并以将整个数组排序 会需要一个额外的数组 而快速排序的排序方式是当两个子数组都有序时 整个数组
  • @Async注解线程池

    在启动类上添加 EnableAsync配合该注解使用 自定义线程池方法 implements AsyncConfigurer extends AsyncSupportConfigurer Bean 注入线程池 public interfac
  • Shell中表示数字跨度的几种方式

    在Shell脚本中 如果要输出数字为0 20中3的倍数 可以使用下面三种方式来完成 方式一 i 0 i lt 20 i 3 for i 0 i lt 20 i 3 do echo i done 方式二 0 20 3 for i in 0 2
  • ElasticSearch 评分排序

    背景 通过脚本改变评分 背景 近期有一个需求 需要对优惠券可用商品列表加个排序 只针对面值类的券不包括折扣券 需求是这样的 假设有一张面值券 50 块钱 可用商品列表 A 100 B 40 C 10 当用户查询当前券可用商品列表的时候优先将
  • RuntimeError: expected dtype Double but got dtype Float 损失求导出错

    求导出现问题 源代码 修改为 把损失修改为loss clone detach requires grad
  • 卫星通信的资源调度 vs 地面无线通信的资源调度

    以OFDM系统为例 考虑多个用户共用多个子载波的场景 一 两类资源 调整时频资源 即基站或卫星决定给各个用户在哪些时隙分配多少子载波 调整发射功率 即基站或卫星决定给每个用户在每个子信道上的功率是多大 用字母 P n k P n k Pn
  • 【TestNG】TestNG使用教程详解

    一 TestNG介绍 TestNG是Java中的一个测试框架 类似于JUnit 和NUnit 功能都差不多 只是功能更加强大 使用也更方便 详细使用说明请参考官方链接 https testng org doc index html 二 Te
  • anaconda 创建虚拟环境、激活及使用的基本方法

    1 查看当前存在的虚拟环境 conda env list 2 创建虚拟环境 环境名 conda create n 环境名 python X X 3 激活指定虚拟环境 activate 环境名 4 删除虚拟环境 conda remove n
  • c++ 鼠标控制

    windows下获得鼠标位置和控制鼠标 include
  • 使用nodejs开发一个markdown文档管理小系统(一)Using Nodejs to quickly develop a markdown management system...

    好多年没碰过前端jquery了 用一两天时间重温一下 刚好写个小工具 不递归取文件夹和文件 只写一层 保持足够简单 验证和参数判断暂不写 毕竟只写了几个小时而已 功能算完备了 添加一个简单的管理员权限管理修改的所有功能即可放出去了 看来还不
  • LaTeX各种算法排版

    1 首先在导言区加入语句 usepackage algorithm usepackage algorithmic 2 例1 begin algorithm caption A label alg A begin algorithmic ST
  • AUTOSEMO“恒以致远,共创共赢”主题研讨会圆满落幕

    2023年8月31日 中国汽车工业协会软件分会中国汽车基础软件生态标委会 简称 AUTOSEMO 与天津市西青区人民政府联合主办 北京经纬恒润科技股份有限公司承办的 恒以致远 共创共赢 主题研讨会在天津隆重召开 本次研讨会是AUTOSEMO
  • vue2.0使用less 创建全局的颜色变量,配置主题色

    1 使用场景 项目中需要统一配置前端的主题样式 我们可以使用less创建 theme colors rgba 54 174 149 1 变量 供全局调用 2 安装依赖 cnpm install less less loader save 安
  • 【Android】WebView控件最全使用解析

    WebView控件最全使用解析 一 WebView 概述 二 WebView使用基础篇 2 1添加方式 2 2 加载远程网页 2 3 加载本地网页 2 4 加载HTML片段 2 5 WebView 常用方法 三 WebView 进阶篇 3
  • Android--Recovery模块之恢复出厂设置

    一 在进行详细流程分析之前 先看一下几个重要概念 一 Recovery的工作需要整个软件平台的配合 从架构角度看 有三个部分 1 Main system 用boot img启动的Linux系统 Android的正常工作模式 2 Recove
  • 【MyBatis】自定义resultMap三种映射关系

    目录 一 一对一映射 One to One 1 1 表关系 1 2 resultMap设置自定义映射 二 一对多映射 One to Many 2 1 创建实体 2 2 级联方式处理映射关系 2 3 定义SQL 2 4 OrderMapper
  • jquery 购物车飞入特效--全网最简单

    有个插件 jquery fly js 可以搞定 好象特点之一是有抛物线效果 如果要求不高 可以看看我这个 其实也是在网上看到的 作了些改进 三个元素 被点击的div 飞翔的小红点 装小红点的div 购物车 div 被点击的 div div