JQuery实现网站首页及商品展示页

最新推荐文章于 2022-06-23 16:36:46 发布

ning9777

最新推荐文章于 2022-06-23 16:36:46 发布

阅读量2.8k

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/ning9777/article/details/104483742

版权

该博客分享了一个练习项目，利用JQuery实现了一个类似淘宝的商品展示页面，包括皮肤风格切换、产品图放大镜、轮播、遮罩、颜色切换以及尺寸价格计算等功能。

摘要由CSDN通过智能技术生成

练习项目，主要用JQuery实现类似淘宝商品展示，实现了网站皮肤风格修改效果，产品图放大镜效果，轮播效果，遮罩效果，产品颜色切换效果，产品尺寸和价格自动计算效果等。

主要jquery代码

//商品详情页
/* 搜索文本框效果 */
$(function(){
   
    $("#inputSearch").focus(function () {
    //focus获取焦点事件
        $(this).addClass("focus");  //蓝色细边框样式
        //清空原始值
        if($(this).val()== this.defaultValue){
   
            $(this).val("");
        }
    }).blur(function () {
     //blur失去焦点事件
        $(this).removeClass("focus");
        if($(this).val()== ""){
   
            $(this).val(this.defaultValue);
        }
    }).keyup(function (e) {
     //keyup回车触发事件
        if(e.which == 13){
     //13就是回车编码
            alert("开始检索商品........")
        }
    });
})
/*皮肤切换效果*/
$(document).ready(function () {
   
    var $li_ = $("#skin li"); //找到skin的所有li标签
    $li_.click(function (