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 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery动态添加
Apr 07 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
javascript this指向相关问题及改变方法
Nov 19 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
header()函数使用说明
2006/11/23 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php中define用法实例
2015/07/30 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
php实现数字补零的方法总结
2018/09/12 PHP
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
wxPython学习之主框架实例
2014/09/28 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
python实现ping命令小程序
2020/12/28 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
.net面试题
2016/09/17 面试题
网络安全类面试题
2015/08/01 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
工程总经理工作职责
2013/12/09 职场文书
买房子个人收入证明
2014/01/16 职场文书
学校消防安全制度
2014/01/30 职场文书
环保倡议书500字
2014/05/15 职场文书
公司外出活动方案
2014/08/14 职场文书
华清池导游词
2015/02/02 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
男生贾里读书笔记
2015/06/30 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python