2. 程式人生 > 實用技巧 >jquer專案總結

jquer專案總結

阿新 • • 發佈：2020-10-09

服裝商城專案

1: 頭部換膚

$(function(){

$("#skin li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var cssName = $(this).attr("id");
//alert(cssName)
$("#cssfile").attr("href","styles/skin/"+cssName+".css")

})
})

給商品評分

$(function() {
$(".rating li a").click(function() {
var title = $(this).attr("title");
alert("你給出的評分是" + title);
var cl = $(this).parent().attr("class");
$(this).parent().parent().removeClass().addClass("rating " + cl + "star")

})
})

產品簡介切換

$(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //當前<li>元素高亮
.siblings().removeClass("selected"); //去掉其他同輩<li>元素的高亮
var index = $div_li.index(this); // 獲取當前點選的<li>元素 在 全部li元素中的索引。

$("div.tab_box > div") //選取子節點。不選取子節點的話，會引起錯誤。如果裡面還有div
.eq(index).show() //顯示 <li>元素對應的<div>元素
.siblings().hide(); //隱藏其他幾個同輩的<div>元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})


})
$(function(){
$(".imgList img").click(function(){
var img=$(this).attr("src");
var arr=img.split(".jpg");
var newsrc=arr.join("_small.jpg");
var src=arr.join("_big.jpg")
$(".jqzoom img").attr("src",newsrc).attr("jqimg",src);
$("#thickImg").attr("href",src)
})
})

衣服換色

$(function() {
$(".color_change>ul>li>img").click(function() {
var a = $(this).attr("src");
var color = $(this).attr("alt");
/*alert(color);*/
var src = a.split("img/");
/*alert(src[1]);*/
var b = src[1].split(".jpg");
/*alert(b[0]);*/

//更換大圖
$(".jqzoom>img").attr("src", "images/pro_img/" + b[0] + "_one_small.jpg");
$(".jqzoom>img").attr("jqimg", "images/pro_img/" + b[0] + "_one_big.jpg");
//更換字型
$(".color_change:first strong").html(color);

//更換下面三張圖片
$(".imgList li img:eq(0)").attr("src", "images/pro_img/" + b[0] + "_one.jpg");
$(".imgList li img:eq(1)").attr("src", "images/pro_img/" + b[0] + "_two.jpg");
$(".imgList li img:eq(2)").attr("src", "images/pro_img/" + b[0] + "_three.jpg");

//綠色只有兩張 如果綠色 把第三個隱藏掉
if (b[0] == "green") {
$(".imgList li img:eq(2)").hide();
} else {
$(".imgList li img:eq(2)").show();
}

})
})

尺寸的選擇

$(function(){
$(".pro_size li span").click(function(){
$(this).parents("ul").siblings("strong").text( $(this).text() );
})
})

購物車

$(function(){
var $product = $(".pro_detail_right");
$("#cart a").click(function(){
var pro_name = $product.find("h4:first").text();
var pro_size = $product.find(".pro_size strong").text();
var pro_color = $(".color_change strong").text();
var pro_num = $product.find("#num_sort").val();
var pro_price = $product.find(".pro_price span").text();
var dialog = " 感謝您的購買。\n您購買的\n"+
"產品是："+pro_name+"；\n"+
"尺寸是："+pro_size+"；\n"+
"顏色是："+pro_color+"；\n"+
"數量是："+pro_num+"；\n"+
"總價是："+pro_price +"元。";
if( confirm(dialog) ){
alert("您已經下單!");
}
return false;//避免頁面跳轉
})
})

$(function() {
var index = 0;
var timeId;
//獲取圖片滾動的高度
var height = $(".ad").height();
//頁面載入完畢讓其下標為1的li高亮顯示
$(".num li:first").addClass("on");
//當滑鼠移動到li元素上時，當前li元素高亮顯示
$(".num li").mouseover(function() {
//獲取當前滑鼠放入的li元素所在的索引位置
index = $(".num li").index($(this));
//執行滾動方法，傳index進來就是當用戶滑到第幾張的時候就顯示第幾張
showImg(index);
});

//輪播圖

//當滑鼠放入圖片上時，停止滾動（清除定時器），滑鼠離開，開始滾動（啟動定時器）
$(".ad").hover(function() {
//清除定時器
clearInterval(timeId);
}, function() {
//啟動定時器
timeId = setInterval(function() {
index++;
if (index == 5) {
index = 0;
}
showImg(index);
}, 2000);
}).trigger("mouseout");

function showImg(index) {
//獲取圖片滾動高度
var height = $(".ad").height();
//根據當前索引使圖片移動到對應的距離高度
$(".slider").animate({
top: -index * height
}, 1000);
$(".num li").eq(index).addClass("on").siblings().removeClass("on");
}

//頭部顏色切換


$(function(){

$("#skin li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var cssName = $(this).attr("id");
//alert(cssName)
$("#cssfile").attr("href","styles/skin/"+cssName+".css")
})
})
/* $(function () {
//給頭部顏色的方塊進行打勾，當前打勾，其餘項打勾移除
$("#skin li").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");

var cssName = $(this).attr("id");
//$("#cssfile").attr("href", "style/skin/" + cssName + ".css");
changeSkin(cssName);

});
if ($.cookie("MyCookie")) {
var cssName = $.cookie("MyCookie");
changeSkin(cssName);
$("#" + cssName).addClass("selected").siblings().removeClass("selected");
}
function changeSkin(cssName) {
$("#cssfile").attr("href", "styles/skin/" + cssName + ".css");
$.cookie("MyCookie", cssName, { expires: 7, path: '/' });
}
}) */

//最新動態 新聞滾動
$(function() {
var $this = $(".scrollNews");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 1000);
}).trigger("mouseleave");
});

function scrollNews(obj) {
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height(); //獲取行高
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self); //appendTo能直接移動元素
})
}

function sp() {
scroolNews($this);
}

/* //導航選單收起
$(function(){
$(".module_up_down").toggle(function(){
var $self = $(this);
$self.prev().slideToggle(600,function(){
$("img",$self).attr("src","img/up.gif");
});
},function(){
var $self = $(this);
$self.prev().slideToggle(600,function(){
$("img",$self).attr("src","img/down.gif");
});
})
}) */

//列表收起
$(function(){
//新聞最新動態
$(".module_up_down img").click(function(){
var $this=$(this);
$(".scrollNews").slideToggle(1000,function(){
var img =$this.attr("src")
console.log(img);
if (img=="images/up.gif") {
img="images/down.gif";
}
else{
img="images/up.gif";
}

$this.attr("src",img);
})
})


})

//產品分類
$(function(){


$(".procatalog img").click(function(){
var $this=$(this)
$(".m-treeview").slideToggle(1000,function(){
var img =$this.attr("src")
console.log(img);
if (img=="images/up.gif") {
img="images/down.gif";
}
else{
img="images/up.gif";
}
$this.attr("src",img)
})
})

})
//寸衫
/* $(function () {
$("#laqi").click(function () {
$("#laqi ul").slideToggle(1000);

})
})
//衛衣
$(function () {
$("#wy").click(function () {
$("#wy ul").slideToggle(1000);
})
})
//褲子

$(function () {
$("#kz").click(function () {
$("#kz ul").slideToggle(1000);
})
}) */
$(function() {
$(".m-treeview > li").click(function() {
var c = $(this).attr("class");
if (c == "m-collapsed")
$(this).attr("class", "m-expanded");
else if (c == "m-expanded")
$(this).attr("class", "m-collapsed");
})
})
//新款上市
$(function(){
var page = 1;
var i = 4; //每版放4個圖片
var len = $(".prolist_content ul li").length;
var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數
var none_unit_width = $(".prolist").width(); //獲取框架內容的寬度,不帶單位
var $parent = $(".prolist_content");
//向右 按鈕
$(".goRight").click(function(){
if( !$parent.is(":animated") ){
if( page == page_count ){ //已經到最後一個版面了,如果再向後，必須跳轉到第一個版面。
$parent.animate({ left : 0}, 800); //通過改變left值，跳轉到第一個版面
page = 1;
}else{
$parent.animate({ left : '-='+none_unit_width}, 800); //通過改變left值，達到每次換一個版面
page++;
}
}
});
//往左 按鈕
$(".goLeft").click(function(){
if( !$parent.is(":animated") ){
if( page == 1 ){ //已經到第一個版面了,如果再向前，必須跳轉到最後一個版面。
$parent.animate({ left : '-='+none_unit_width*(page_count-1)}, 800); //通過改變left值，跳轉到最後一個版面
page = page_count;
}else{
$parent.animate({ left : '+='+none_unit_width }, 800); //通過改變left值，達到每次換一個版面
page--;
}
}
});
});

})

相關推薦

jquer專案總結

服裝商城專案 1: 頭部換膚 $(function(){$("#skin li").click(function(){$(this).addClass("selected").siblings().removeClass("selected");var cssName = $(this).attr(&

中型WPF客戶端開發專案總結 - 談談MVVM框架

MVVM介紹 mvvm的歷史已經很久了，現在前端3大框架也都是遵照這個模式設計，相信大家也都清楚。

專案總結，徹底掌握NodeJS中如何使用Sequelize

前言 sequelize是什麼？ sequelize是基於NodeJs的ORM框架，它適用於不同的資料庫，如：Postgres、MySQL、SQLite、MariaDB，我們可以通過sequelize對資料庫進行一系列的操作。通常我用它與MySQL一起使用。該文是我在使

專案總結67：Springboot中使用JWT+Token鑑權示例

專案總結67：Springboot中使用JWT+Token鑑權示例 START 程式碼示例 　　pom檔案 <dependency>

專案總結68：Springboot整合動態資料來源示例

專案總結68：Springboot整合動態資料來源示例 START 程式碼示例 　　POM檔案 <dependency>

介面實戰專案總結上

目錄1. 前程貸業務分析1.1 平臺介紹1.2 資料庫1.3 介面資訊2. 測試用例編寫3. 冒煙測試4.分層設計理念+資料驅動思想搭建測試框架5. 介面自動化測試框架的技術點6.封裝—requests介面請求7. 封裝—excel資料讀寫8. 封

專案總結71：Caffeine的基本概念和使用

專案總結71：Caffeine的基本概念和使用 start pom引用 <!-- Spring boot Cache--> <dependency>

結對程式設計專案總結

前言 本部落格對在個人程式設計的基礎上進行的結對程式設計進行總結，主要包括程式碼的複用和結對程式設計中學到的經驗教訓。

結對程式設計專案總結—帶UI的小初高數學學習軟體

一、專案需求 使用者：小學、初中和高中學生。 功能： 1、所有功能通過圖形化介面操作，可以是桌面應用，可以是網站（程式語言和技術不限）；

結對專案總結 -- 基於Qt開發的win10桌面應用

擔任角色 在這次結對專案中，由於採用了我的個人專案作為參考，所以我繼續擔任後端開發的角色。

結對程式設計程式碼專案總結

結對程式設計專案總結 1. 負責的模組 這次專案的分工，我們小組採用了前後端分離的開發模式，前端即網頁顯示，後端由我負責，採用了spring和spring-MVC框架進行開發。後端的工作主要分為以下幾大模組：驗證登入模組、

軟體測試之專案總結全攻略

在我們測試工作過程中，由於公司業務發展，快速迭代等原因，我們遇到的專案以小專案居多。更新介面元素，上個活動頁，優化一下原有的功能等等，加上事情繁瑣，任務多，通常情況下一個專案結束之後就開始了下

Idea使用Gradle專案總結

文章目錄 建議使用自定義GRADLE倉庫解決main方法編譯整個專案的問題解決jsp等靜態檔案不能更新問題解決每次開啟專案，都會Bulid Task問題

貴美商城專案總結 10.14

div中放入a標籤和img標籤 連結時用iframe標籤 連結頭部時放入上面，連結底部時放入下面 在標籤中一定要有src=" xx.html "

軟體工程Test1專案總結

1.主要功能 在正確輸入所需資訊的前提下，本程式提供某地區地鐵路線的線路詳情與最短線路查詢功能

node xiaou專案總結

第一步 生成沒有前端的node專案 1, 用 express --no-view 專案名 快速生成node專案,生成的是沒有view,也就是沒有前端的專案,因為要做前後端分離,先做後端

docker部署vue專案總結

1、安裝docker desktop win10 2、安裝docker machine及配置 https://blog.csdn.net/acherson/article/details/101441753

css專案總結

技術標籤：csscss3 少用的css程式碼 盒子陰影 語法 box-shadow: h-shadow v-shadow blur spread color inset;

小程式專案總結

專案快做完了，做下總結： 需求：登入模組、裝置列表展示模組、個人中心模組、詳情模組,總共分為這四個模組內容。

移動端vue專案總結（Echarts折線圖+熱力圖）

移動端vue專案總結 一、日期資料處理 需求：把資料按天作為分類，父集為當天日期（如果是日期是當天，就顯示今天），子集為時間。