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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
手机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
PHP生成静态页面详解
2006/11/19 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
python列表与元组详解实例
2013/11/01 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Django 路由控制的实现代码
2018/11/08 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
土建专业大学生自荐信范文
2014/04/09 职场文书
119消防日活动总结
2014/08/29 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2015年入党决心书
2015/02/05 职场文书
小学教师教学反思
2016/02/24 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS