jQuery实现的选择商品飞入文本框动画效果完整实例


Posted in Javascript onAugust 10, 2016

本文实例讲述了jQuery实现的选择商品飞入文本框动画效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <script>
    $(function() {
      initProListClick();
    });
    function initProListClick() {
      var brandUlObj = $('#brandListForOperate li');
      brandUlObj.unbind('click').on('click', function () {
        var thisLiObj = $(this);
        //获取商品的值和名称
        var thisProValue = thisLiObj.find('input').val(),
          thisProName = thisLiObj.find('.brand-text').text();
        //调用动画效果方法
        moveProEffect(thisLiObj, thisProValue, thisProName);
        brandUlObj.find('input').attr({ 'checked': false });
        brandUlObj.not(thisLiObj).removeClass('brand-selected');
        if (thisLiObj.hasClass('brand-selected')) {
          thisLiObj.find('input').attr({ 'checked': true });
          // thisLiObj.removeClass('brand-selected');
          // thisLiObj.find('input').attr({'checked':false});
        } else {
          thisLiObj.addClass('brand-selected');
          thisLiObj.find('input').attr({ 'checked': true });
        }
      });
    }
    //定义选择商品一共飞入的效果
    function moveProEffect(obj, brandVal, brandName) {
      //获取每一个LI标签的left top距离
      var divTop = $(obj).offset().top;
      var divLeft = $(obj).offset().left;
      //定义移动效果的div,并将点击的LI中的html内容放入此div中
      var thisEffectObj = $('#proEffectPanel');
      thisEffectObj.html(obj.html()).find('input').attr({ "checked": true });
      //初始化定义移动效果的div样式
      $(thisEffectObj).css({ "position": "static", "display": "none", "z-index": "auto", "left": "auto", "top": "auto", "opacity": "1", "border-radius": "0px" });
      //移动过程中div的样式
      $(thisEffectObj).css({ "position": "absolute", "display": "block", "z-index": "500", "left": divLeft + "px", "top": divTop + "px", "border-radius": "4px" });
      $(thisEffectObj).animate({
        "left": ($("#txtProName").offset().left - $("#txtProName").width()+165) + "px",
        "top": ($(document).scrollTop()) + "px",
        "width": "190px",
        "height": "30px"
      }, 500, function () {
        $(thisEffectObj).animate({
          "left": ($("#txtProName").offset().left -7) + "px",
          "top": ($("#txtProName").offset().top-5) + "px"
        }, 500, function () {
          $('#txtProName').val(brandName);
        }).fadeTo(0, 0.1).hide(0);
      });
    }
  </script>
</head>
<body>
  <style>
    html,body{font-size: 12px;color: #696969;font-family: 'Microsoft YaHei';}
    .txt-main { height: 30px; line-height: 30px; border: 1px solid #c3c3c3; border-radius: 4px; padding: 0 4px; width: 180px; background: #fff url(image/form/form-input-txt-bg.png) repeat-x; }
    .txt-main:focus { color: #2a6894; border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
    .pro-list-panel{ width: 330px;overflow: hidden;border: 1px solid #f3f3f3;padding-bottom: 10px;float: left;margin-left: 10px;}
    .pro-list-main{list-style-type: none;overflow: hidden;padding: 0;margin: 0;}
    .pro-list-main li, #proEffectPanel { border: 1px solid #95b8e7; width: 147px; overflow: hidden; float: left; margin-left: 5px; margin-top: 5px; height: 30px; line-height: 30px; }
    .pro-list-main li div, #proEffectPanel div { float: left; height: 30px; line-height: 30px; }
    .pro-list-main li div.brand-chk, #proEffectPanel div.brand-chk { width: 12px; padding: 5px 6px 0 5px; }
    .pro-list-main li div.brand-text, #proEffectPanel div.brand-text { width: 124px; }
    .pro-list-main li:hover, .pro-list-main li.brand-selected, #proEffectPanel { background-color: #ceebf4; }
  </style>
  <div class="pro-list-panel">
    <h2> 选择你的商品:</h2>
    <ul class="pro-list-main" id="brandListForOperate">
      <li title="康师傅">
        <div class="brand-chk"><input type="checkbox" id="Checkbox1" value="1" /></div>
        <div class="brand-text">康师傅</div>
      </li>
      <li title="鸿星尔克">
        <div class="brand-chk"><input type="checkbox" id="Checkbox2" value="2" /></div>
        <div class="brand-text">鸿星尔克</div>
      </li>
      <li title="程辉">
        <div class="brand-chk"><input type="checkbox" id="Checkbox3" value="2" /></div>
        <div class="brand-text">程辉</div>
      </li>
      <li title="士力架">
        <div class="brand-chk"><input type="checkbox" id="Checkbox4" value="2" /></div>
        <div class="brand-text">士力架</div>
      </li>
      <li title="三笑">
        <div class="brand-chk"><input type="checkbox" id="Checkbox5" value="2" /></div>
        <div class="brand-text">三笑</div>
      </li>
      <li title="椰牛">
        <div class="brand-chk"><input type="checkbox" id="Checkbox6" value="2" /></div>
        <div class="brand-text">椰牛</div>
      </li>
      <li title="飞科">
        <div class="brand-chk"><input type="checkbox" id="Checkbox7" value="2" /></div>
        <div class="brand-text">飞科</div>
      </li>
    </ul>
    <div id="proEffectPanel" style="display: none;">
    </div>
  </div>
  <div class="pro-list-panel">
    <h2> 你选择的商品·:</h2>
      <input type="text" name="txtProName" value="" id="txtProName" class="txt-main" />
  </div>
</body>
</html>

运行效果截图如下:

jQuery实现的选择商品飞入文本框动画效果完整实例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
php与js的区别是什么
Aug 05 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
学习javascript文件加载优化
Feb 19 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
vue如何进行动画的封装
Sep 26 Javascript
Vue数据绑定简析小结
May 07 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
react 路由Link配置详解
Nov 11 Javascript
最棒的Angular2表格控件
Aug 10 #Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 #Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 #Javascript
基于js中的原型、继承的一些想法
Aug 10 #Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 #Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 #Javascript
jquery实现拖动效果
Aug 10 #Javascript
You might like
PHP:风雨欲来 路在何方?
2006/10/09 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
JS简易计算器实例讲解
2020/06/30 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python实现通过shelve修改对象实例
2014/09/26 Python
python实现两个文件合并功能
2018/04/01 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python中有函数重载吗
2020/05/28 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
中学教师自我鉴定
2014/02/07 职场文书
毕业实习评语
2014/02/10 职场文书
老同学聚会感言
2014/02/23 职场文书
委托书模板
2014/04/04 职场文书
团队拓展活动总结
2014/08/27 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL