<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/quick_links.js"></script>
<script type="text/javascript" src="js/parabola.js"></script>
<script type="text/javascript">
    $(".quick_links_panel li").mouseenter(function(){
        $(this).children(".mp_tooltip").animate({left:-92,queue:true});
        $(this).children(".mp_tooltip").css("visibility","visible");
        $(this).children(".ibar_login_box").css("display","block");
    });
    $(".quick_links_panel li").mouseleave(function(){
        $(this).children(".mp_tooltip").css("visibility","hidden");
        $(this).children(".mp_tooltip").animate({left:-121,queue:true});
        $(this).children(".ibar_login_box").css("display","none");
    });
    $(".quick_toggle li").mouseover(function(){
        $(this).children(".mp_qrcode").show();
    });
    $(".quick_toggle li").mouseleave(function(){
        $(this).children(".mp_qrcode").hide();
    });
// 元素以及其他一些变量
var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");
var numberItem = 0;
// 抛物线运动
var myParabola = funParabola(eleFlyElement, eleShopCart, {
    speed: 400, //抛物线速度
    curvature: 0.0008, //控制抛物线弧度
    complete: function() {
        eleFlyElement.style.visibility = "hidden";
        eleShopCart.querySelector("span").innerHTML = ++numberItem;
    }
});
// 绑定点击事件
if (eleFlyElement && eleShopCart) {
    [].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) {
        button.addEventListener("click"function(event) {
            // 滚动大小
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
                scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
            eleFlyElement.style.left = event.clientX + scrollLeft + "px";
            eleFlyElement.style.top = event.clientY + scrollTop + "px";
            eleFlyElement.style.visibility = "visible";
            // 需要重定位
            myParabola.position().move();          
        });
    });
}
</script>

jquery商城购物车右侧悬浮加入购物车动画效果的更多相关文章

  1. 基于jquery右侧悬浮加入购物车代码

    分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制 ...

  2. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  3. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  4. jQuery 特效:盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  5. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  6. jquery为表格行添加上下移动画效果

    为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations ar ...

  7. jquery 显示弹出层可利用动画效果

    1 show()方法和hide()方法 $("selector").show()  从display:none还原元素默认或已设置的display属性$("selecto ...

  8. 关于Android WindowManager显示悬浮窗的动画效果

    要实现WindowManager添加的窗口,实现动画显示,就需要添加如下红色的属性,其他的添加View只要设置其Animations属性也会实现动画,当然自己实现也可,但是能直接用系统的已经实现好的, ...

  9. jQuery选择器、事件、节点、动画效果

    一.选择器  基本选择器:    标签选择器:  $("h1").css()    类选择器:  $(".c").css()    id选择器:  $(&quo ...

随机推荐

  1. 使用read write 读写socket

    一旦,我们建立好了tcp连接之后,我们就可以把得到的fd当作文件描述符来使用. 由此网络程序里最基本的函数就是read和write函数了. 写函数: ssize_t write(int fd, con ...

  2. 如何禁止在DBGRID末位自动添加一行记录

    http://www.tc5u.com/cpp/xg-1730729.htm 用DBGridEh吧,只要设置属性alopAppendEh为false即可 最简单将DBGrid的option属性中goE ...

  3. wp8.1 Study6: App的生命周期管理

    一.概述 应用程序的生命周期详解可以参照Windows8.1开发中msdn文档http://msdn.microsoft.com/library/windows/apps/hh464925.aspx ...

  4. Session初识

    web服务器没有短期记忆,所以需要使用session来跟踪用户的整个会话活动.会话管理有3种解决方案: 1)使用隐藏域(很少使用) 在显示页面中使用隐藏域来保存会话ID.例如,在JSP中将input标 ...

  5. android webview实战

    webSettings = wvShowProduce.getSettings();//设置WebView属性,能够执行Javascript脚本webSettings.setJavaScriptEna ...

  6. Core Animation系列之CADisplayLink

    一直以来都想好好学习下CoreAnimation,奈何涉及的东西太多,想要一次性全部搞定时间上不允许,以后会断断续续的补全.最近项目里用到了CADisplayLink,就顺便花点时间看了看. 一.简介 ...

  7. iOS 中 #import同@class之间的区别

    很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...

  8. 转:Java面试题集(1-50)

    Java程序员面试题集(1-50) http://blog.csdn.net/jackfrued/article/details/17403101 一.Java基础部分 1.面向对象的特征有哪些方面? ...

  9. <em>标签

    <em> 标签告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用斜体来显示.

  10. pl/sql Developer 9注册码

    Product Code:46jw8l8ymfmp2twwbuur8j9gv978m2q2duserial Number:307254password:xs374ca