Html .CSS JQUERY （magnifier）实现详情页面特效
生活随笔
收集整理的這篇文章主要介紹了
Html .CSS JQUERY （magnifier）实现详情页面特效
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、jquery使用技巧
1、jquery操作css
2、jquery hover()方法
3、輪播圖插件unslider
4、jqeury click()方法（擴(kuò)展：方法的重載overload）
5、圖片放大插件jQueryMagnifier
6、jquery設(shè)置內(nèi)容和屬性
7、jquery添加、刪除元素
二、任務(wù)
1、首頁(yè)（輪播圖、鼠標(biāo)懸停效果）
（1）讀一遍輪播圖的demo代碼（頁(yè)面標(biāo)簽元素、標(biāo)簽樣式效果、jquery代碼）
jquery輪播圖插件unslider
（2）準(zhǔn)備并配置好插件的相關(guān)文件（js文件、圖片）
（3）粘貼demo代碼
（4）修改屬性（高寬、顏色、形狀等CSS樣式）和參數(shù)（id名稱、class名稱、圖片路徑）
2、商品詳細(xì)頁(yè)面（商品重量樣式切換、圖片放大鏡）
（1）準(zhǔn)備并配置好插件相關(guān)文件（css、js、圖片）
（2）編寫html和js代碼
注意：修改css里的圖片路徑和html里的圖片路徑
（3）圖代碼，并修改相關(guān)屬性參數(shù)（高寬、顏色、形狀等CSS樣式）
擴(kuò)展作業(yè)：
（1）重載的定義：
概念： 在同一的類中，允許在一個(gè)以上的同名方法，只要他們的參數(shù)的個(gè)數(shù)或者參數(shù)類型不同即可 特點(diǎn)：與返回值類型無(wú)關(guān)，只看參數(shù)列表，切參數(shù)列表必須不同。（參數(shù)個(gè)數(shù)或參數(shù)類型）。調(diào)用時(shí)，根據(jù)方法參數(shù)列表的不同來(lái)區(qū)分；
（2）用重載實(shí)現(xiàn)：在js中用方法重載實(shí)現(xiàn)，設(shè)置邊框?qū)挾?#xff08;1個(gè)參數(shù)上下左右全一樣，2個(gè)參數(shù)先上下后左右，4個(gè)參數(shù)上右下左）
三、實(shí)現(xiàn)過程代碼
.html jquery
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>商品詳情(總)</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/detail1.css"><script src="js/jquery-3.6.0.min.js"></script><link rel="stylesheet" type="text/css" href="css/magnifier.css"><script src="js/jquery-3.6.0.min.js"></script><script src="js/magnifier.js"></script><style>.cl{color: #FF5722; background: #FFFFFF;border: 3px solid red;}</style></head><body><div id="all"><iframe class="iheader" src="header.html"></iframe><div style="clear: both;"></div><div id="content"><div class="a1"><!-- <img class="big" src="img/cake1_big.jpg"><div class="a11"><ul><li><img src="img/cake1_s1.jpg"></li><li><img src="img/cake1_s2.jpg"></li><li><img src="img/cake1_s3.jpg"></li><li><img src="img/cake1_s4.jpg"></li></ul></div> --><!-- <div class="left"> --><div class="magnifier" id="magnifier1"><div class="magnifier-container"><div class="images-cover"></div><!-- 當(dāng)前圖片顯示容器 --><div class="move-view"></div><!-- 跟隨鼠標(biāo)移動(dòng)的盒子 --></div><div class="magnifier-assembly"><div class="magnifier-btn"><span class="magnifier-btn-left"><</span><span class="magnifier-btn-right">></span></div><!-- 按鈕組 --><div class="magnifier-line"><ul class="clearfix animation03"><li><div class="small-img"><img src="img/cake1_s1.jpg"/></div></li><li><div class="small-img"><img src="img/cake1_s2.jpg"/></div></li><li><div class="small-img"><img src="img/cake1_s3.jpg"/></div></li><li><div class="small-img"><img src="img/cake1_s4.jpg"/></div></li></ul></div><!-- 縮略圖 --></div><div class="magnifier-view"><!-- 經(jīng)過放大的圖片顯示容器 --></div></div></div> <div class="a2"><h2>提拉米蘇(約2磅)</h2><div class="a21"><div class="a211"><span class="color">售價(jià)</span><span class="prices">￥198</span><span class="shic">市場(chǎng)價(jià)<span class="prices2">￥338</span></span><span class="yis">已售6264件</span></div><div class="a22"><p></p><span class="color">材料</span><span class="neir">雞蛋、奶油、小麥粉、芒果、榴蓮肉、巧克力、干酪</span><p></p><span class="color">包裝</span><span class="neir">一次性蛋糕用具一套</span><p></p><span class="color">備注</span><span class="neir">品牌:悅軒餅家</span></div><div class="a23"><p></p><span class="color">配送說(shuō)明</span><p>北京、上海、廣州、深圳、天津、重慶、南京、長(zhǎng)沙</p><span class="color">配送至</span><p>鄭州</p><span class="color">說(shuō)明</span><p>深圳大鵬新區(qū)暫不配送</p></div><div class="a24"><span class="color">選擇</span><p></p><span class="bang">2磅</span><span class="bang">3磅</span><span class="bang">4磅</span></div><div class="a25"><a href="#"><button class="a25color1">加入購(gòu)物車</button></a><a href="#"><button class="a25color2">加入購(gòu)物車</button></a></div></div></div></div><div style="clear: both;"></div><iframe class="ifooter" src="footer.html"></iframe></div></body><script type="text/javascript">$(function(){var magnifierConfig = {magnifier: "#magnifier1", //最外層的大容器width: 400, //承載容器寬height: 400, //承載容器高moveWidth: null, //如果設(shè)置了移動(dòng)盒子的寬度，則不計(jì)算縮放比例zoom: 5 //縮放比例};var _magnifier = magnifier(magnifierConfig);/*magnifier的內(nèi)置函數(shù)調(diào)用*//*//設(shè)置magnifier函數(shù)的index屬性_magnifier.setIndex(1);//重新載入主圖,根據(jù)magnifier函數(shù)的index屬性_magnifier.eqImg();*/});</script><link rel="stylesheet" href="css/detail1.css"><script src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">// 圖片外框停懸$(".bang").click(function(e){if(!$(this).hasClass("cl")){//$(this).addClass("active"); //多選$(this).addClass("cl").siblings("span").removeClass("cl"); //單選}else{$(this).removeClass("cl");}console.log('event', e.currentTarget.id);let targId= e.currentTarget.id;searchObj.tagCategoryIds = targId;});</script> </html>magnifier
/* 垂直居中 */ .small-img{display: flex;align-items:center;justify-content: center; } .clearfix:before, .clearfix:after{display: table;line-height: 0;content: ""; } .magnifier{position: relative; } .magnifier-container{width: 500px;height: 500px;overflow: hidden;position: relative;border: 1px solid #ddd; } .move-view{width: 100px;height: 100px;position: absolute;background-image: url("../img/move-box.png"); } .images-cover{height: 100%;width: 100%;position: relative; } .images-cover img{width: 100%;position: absolute; } .magnifier-assembly{height: 92px;overflow: hidden;position: relative;padding-left: 30px;padding-right: 30px; } .magnifier-btn{position: absolute;font-family: "宋體";width: 100%;top: 50%;left: 0;margin-top: -40px; } .magnifier-btn span{line-height: 60px;height: 60px;width: 20px;background-color: #6e6e6e;color: #fff;display: block;z-index: 9998;text-align: center;font-size: 20px;cursor: pointer;border-radius: 3px; } .magnifier-btn .magnifier-btn-left{float: left; } .magnifier-btn .magnifier-btn-right{float: right; } .magnifier-line{position: relative;overflow: hidden;height: 92px; } .magnifier-line ul{display: block;font-size: 0;width: 10000%;position: absolute;left: 0;z-index: 9997; } .magnifier-line li{float: left;width: 100px;cursor: pointer; } .magnifier-line ul > .active .small-img{border-color: #bbb; } .small-img{height: 60px;padding: 1px;margin: 5px;overflow: hidden;border: 1px solid #ddd;text-align: center; } .small-img img{max-width: 100%;max-height: 100%; } .magnifier-view{width: 100%;height: 100%;position: absolute;right: -105%;top: 0;z-index: 9999;background-color: #fff;display: none;overflow: hidden; } .magnifier-view img{display: block; } .animation03{transition: all 0.3s ease-in 0.1s;-ms-transition: all 0.3s ease-in 0.1s;-moz-transition: all 0.3s ease-in 0.1s;-webkit-transition: all 0.3s ease-in 0.1s;-o-transition: all 0.3s ease-in 0.1s; }總結(jié)
以上是生活随笔為你收集整理的Html .CSS JQUERY （magnifier）实现详情页面特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asdasd
- 下一篇： GNOME Shell加速演进：BoxP