jQuery购物网页经典制作案例


Posted in Javascript onAugust 19, 2016

本文实例为大家分享了jQuery购物网页经典案例,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今日团购模块</title>
  <style type="text/css" rel="stylesheet">
    *{
      margin:0px ;
      padding:0px;
      font-size: 12px ;
    }
    #pruduce{
      width:948px ;
      background-color: darkgray;
    }
    .top{
      height:56px ;
      background: url("images/top.jpg") no-repeat 10px 10px ;
    }
    .main{
      text-align: center;
      height:308px ;
    }
    .box{
      width: 300px;
      height:280px;
      border:1px solid red;
      margin:0px 6px ;
      float: left;
      cursor:pointer;
    }
    dl{
      padding-top: 3px ;
 
    }
    dd{
      line-height: 30px ;
    }
    div.btprice_1{
      height:50px ;
      background: yellow url("images/bt1.jpg")no-repeat 5px 4px ;
    }
 
    div.btprice_2{
      height:50px ;
      background: yellow url("images/bt2.jpg")no-repeat 5px 4px ;
    }
    div.btprice_3{
      height:50px ;
      background: yellow url("images/bt3.jpg")no-repeat 5px 4px ;
    }
    .hoverstyle{
      background-color: darkblue;
      color: white;
    }
 
 
  </style>
  <script type="text/javascript " src="js/jquery-1.8.3.js"></script>
  <script language="JavaScript">
    $(document).ready(function () {
      $(".box dl").mouseover(function () {
        $(this).addClass('hoverstyle');
      });
      $(".box dl").mouseout(function () {
        $(this).removeClass('hoverstyle');
      });
 
    });
  </script>
</head>
<body>
<div id="pruduce">
   <div class="top"></div>
  <div class="main">
    <div class="box">
      <dl>
        <dt><img src="images/pic1.jpg" alt=""></dt>
        <dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)</dd>
      </dl>
      <div class="btprice_1"></div>
    </div>
    <div class="box">
      <dl>
        <dt><img src="images/pic2.jpg" alt=""></dt>
        <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd>
      </dl>
      <div class="btprice_2"></div>
    </div>
    <div class="box">
      <dl>
        <dt><img src="images/pic3.jpg" alt=""></dt>
        <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
      </dl>
      <div class="btprice_3"></div>
    </div>
  </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 #Javascript
js实现select选择框效果及美化
Aug 19 #Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
利用Python开发微信支付的注意事项
2016/08/19 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
python 魔法函数实例及解析
2019/09/25 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
django中嵌套的try-except实例
2020/05/21 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
华为python面试题
2016/05/03 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
工程类专业自荐信范文
2014/03/09 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
英语故事演讲稿
2014/04/29 职场文书
公证委托书格式
2014/09/13 职场文书
师德师风剖析材料
2014/09/30 职场文书
通知书大全
2015/04/27 职场文书
2015大学迎新标语
2015/07/16 职场文书
小学班级标语口号大全
2015/12/26 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python