当前位置:千赢国际官网 > 千赢网页手机版登入 > jQuery实现购物车数字加减效果,解决Jquery向页面

jQuery实现购物车数字加减效果,解决Jquery向页面

文章作者:千赢网页手机版登入 上传时间:2019-07-21

  笔者先看jq api文书档案未有找到方法,无果只可以到网络找些资料,果然找到live方法。

大图全屏图片相册jQuery插件,帮助左右开关切换以及点击大图自动切换图片,基于jQuery插件jQuery.album.js,插件援救参数自定义功效,viewMode:0未有缩略图 1有缩略图  2缩略图。全显示屏。能够对图纸张开左右转,具体的参数大家能够查阅jQuery.album.js文件,综上可得功用很准确,喜欢的心上人可学习下

大家在互联网购物提交订单时,在网页上一般会有一个选用数据的控件,供给买家选拔购买商品的件数,开拓者会把该控件做成能够通过点击完毕加减等微调操作,当然也足以平素输入数字件数。本文将介绍常见的二种采用spinner数字微调器来完成数字加减的功力的章程。

  其实很简单:

复制代码 代码如下:

左右加减数字

图片 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" contect="zh-CN">
<title>特别科学的JS相册特效代码下载 </title>
<meta name="keywords" content="JS代码,JS特效,JS特效代码,JS相册特效,JS相册代码,jQuery相册特效,jQuery相册插件,jQuery相册图片轮播" />
<meta name="description" content="JS代码网提供高素质的JS相册特效代码,jQuery相册特效下载" />
<link rel="stylesheet" type="text/css" href="css/base.css?v=1409654123" />
<link rel="stylesheet" type="text/css" href="css/album.css?v=1409654123" media="all" />
<script type="text/javascript" src="js/jquery.js?v=1409654123"></script>
<script type="text/javascript">
var dxlCityId = 7;
var _current_num=0;
</script>
<!--[if IE]>
<style type="text/css">
.valin{ display:block;}
.valin i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
.valin img {
    vertical-align:middle
    }
</style>
<![endif]-->
</head>
<body>
<div class="album-box" id="album">
  <div h class="pre-btn" id="preBtn" title="上一张 "><i></i></div>
  <div class="next-btn" id="nextBtn" title="下一张 "><i></i></div>
  <div class="album-con">
    <div class="valin"> <i></i><img src="images/20140121161108.JPG" alt="" id="realImg" />
      <p class="pic-alt" id="txtDes"></p>
    </div>
    <div id="imgLoading"></div>
  </div>
  <div h class="thum-box" id="thumBox">
    <div class="thum-wrap" id="thumWrap">
      <ul class="imglist fix" id="photoList">
      </ul>
    </div>
    <i class="thum-pre-btn" id="thumPreBtn" title="上一页"></i> <i class="thum-next-btn" id="thumNextBtn" title="下一页"></i> </div>
</div>
<textarea class="dn" id="albumDataList">
            <li>
     <div> <img alt="JS相册特效" src="images/tiny/20140121161108.JPG" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121161108.JPG</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img src="images/tiny/20140121161130.jpg" onload="scaleImage(this,99,75)" alt=""></div>
      <p></p>
      <i class="dn">images/20140121161130.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img src="images/tiny/20140121161152.jpg" onload="scaleImage(this,99,75)" alt=""></div>
      <p></p>
      <i class="dn">images/20140121161152.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img src="images/tiny/20140121161231.JPG" onload="scaleImage(this,99,75)" alt=""></div>
      <p></p>
      <i class="dn">images/20140121161231.JPG</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相册特效" src="images/tiny/二零一四0126134637.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140126134637.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相册特效" src="images/tiny/20160121181959.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121181958.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相册特效" src="images/tiny/二〇一五0121182023.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121182023.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相册特效" src="images/tiny/二〇一四0121182118.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121182118.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
</textarea>
<div id="schedule-pop2" class="schedule-pop" style="display: none; top: 102px; left: 0px;">
                    <div id="inpForm2" class="formList formSmall">
                        <p class="hd clearfix">
                            <strong>花嫁丽舍私人婚典集会地方(世博店)</strong><i>档期查询</i><br> 
                        </p>
                        <p class="bd">
                            即将为您询问:<span><em id="year">二零一五</em>年<em id="mouth">01</em>月<em id="day">24</em>日</span>的喜酒档期情状<br>
                            请输动手提式有线电话机号码,便于接受酒馆实时档期音讯!
                        </p>
                        <div class="inputBox">
                            <div class="mbInp">
                                <label>请输入手提式有线话机号</label><input type="text" id="mobile614" class="txt" value="" name="mobile" maxlength="11"><span style="padding-left: 0px;" class="msg"><em></em></span>
                            </div>
                        </div>
                        <div class="inputBox clearfix"><input type="submit" id="btn614" class="btn mobile_submit fl mr10" value=""><i class="fl">您的首要音信不会被外泄  详见隐衷条目</i></div>
                        <div id="close614_2"></div>
                        <input type="hidden" name="act" value="do">
                        <input type="hidden" name="from" value="detail">
                        <input type="hidden" name="noalert" value="a">
                        <input type="hidden" name="schedule_hotel" value="schedule_hotel">
                        <input type="hidden" name="happyday" value="" id="happydayv1">
                        <input type="hidden" name="usertype" value="return" id="usertype">
                        <input type="hidden" name="order_from" value="sh_HotelDetail_Schedule_TopCenter">            
                    </div>
                   <input type="hidden" id="trackCitys" value="sh">
                   <input type="hidden" id="hotel_id" value="5499" />
                   <input type="hidden" id="hotel_name" value="花嫁丽舍私人婚典聚会场合(世博店)" />
</div>
<script type="text/javascript">
function scaleImage(o, w, h) {
    var img = new Image();
    img.src = o.src;
    if (img.width > 0 && img.height > 0) {
        if (img.width / img.height >= w / h) {
            if (img.width > w) {
                o.width = w;
                o.height = (img.height * w) / img.width;
            } else {
                o.width = img.width;
                o.height = img.height;
            }
           // o.alt = img.width "x" img.height;
        } else {
            if (img.height > h) {
                o.height = h;
                o.width = (img.width * h) / img.height;
            } else {
                o.width = img.width;
                o.height = img.height;
            }
            //o.alt = img.width "x" img.height;
        }
    }
}
</script>
<script type="text/javascript" src="js/jquery.album.js?v=1409654123"></script>
</body>
</html>

像京东交付订单时方今应用的是左右加减数字的功效,那些效果平昔精通,操作简捷。大家应用jquery.spinner.js插件实现左右加减数字,调用方法极度轻便,请看演示示例1。

  1.那是项目要求达到的成效,当自己没用live事件,只用了简要的hover事件时:hover事件未有加载进来,未有作者想要的边框效果,效果图如下

如上正是本文共享给我们的实例代码了,希望对我们学习jQuery能够享有帮衬。

复制代码 代码如下:

图片 2

你可能感兴趣的稿子:

  • jquery html仿翻页相册功效
  • jquery CSS3贯彻3D拖拽相册效果
  • 不行了不起的相册集 使用jquery制作相册集
  • Jquery全屏相册插件zoomvisualizer具备调度放大与降低效率
  • jQuery完成带滚动导航作用的全屏滚动相册实例
  • jquery完结相册一下滑动一遍的法子
  • 依附spring hibernate JQuery开拓之电子相册(附源码下载)
  • jQuery 和讯相册鼠标移动展现掩饰效果完成代码
  • 募集的十三个无需付费的jQuery相册
  • Html5 jQuery CSS制作相册小记录

<input type="text" class="spinner"/>

复制代码 代码如下:

调用也特别简单,先载入jquery库文件和jquery.spinner.js,然后使用以下代码:

  /*透过用户技巧标签扩充样式*/
    $(function(){   
      $(".s-edited").hover(function(){  
        $(this).toggleClass("borderd");
      })
    })  

复制代码 代码如下:

    2.当作者用了live之后,效果到达了,如下图:

$('.spinner').spinner();

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:jQuery实现购物车数字加减效果,解决Jquery向页面

关键词: 千赢国际官网