Html .CSS JQUERY （magnifier）实现详情页面特效
生活随笔
收集整理的這篇文章主要介紹了
Html .CSS JQUERY （magnifier）实现详情页面特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、jquery使用技巧
1、jquery操作css
2、jquery hover()方法
3、輪播圖插件unslider
4、jqeury click()方法（擴展：方法的重載overload）
5、圖片放大插件jQueryMagnifier
6、jquery設置內容和屬性
7、jquery添加、刪除元素
二、任務
1、首頁（輪播圖、鼠標懸停效果）
（1）讀一遍輪播圖的demo代碼（頁面標簽元素、標簽樣式效果、jquery代碼）
jquery輪播圖插件unslider
（2）準備并配置好插件的相關文件（js文件、圖片）
（3）粘貼demo代碼
（4）修改屬性（高寬、顏色、形狀等CSS樣式）和參數（id名稱、class名稱、圖片路徑）
2、商品詳細頁面（商品重量樣式切換、圖片放大鏡）
（1）準備并配置好插件相關文件（css、js、圖片）
（2）編寫html和js代碼
注意：修改css里的圖片路徑和html里的圖片路徑
（3）圖代碼，并修改相關屬性參數（高寬、顏色、形狀等CSS樣式）
擴展作業：
（1）重載的定義：
概念： 在同一的類中，允許在一個以上的同名方法，只要他們的參數的個數或者參數類型不同即可 特點：與返回值類型無關，只看參數列表，切參數列表必須不同。（參數個數或參數類型）。調用時，根據方法參數列表的不同來區分；
（2）用重載實現：在js中用方法重載實現，設置邊框寬度（1個參數上下左右全一樣，2個參數先上下后左右，4個參數上右下左）
三、實現過程代碼
.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><!-- 當前圖片顯示容器 --><div class="move-view"></div><!-- 跟隨鼠標移動的盒子 --></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"><!-- 經過放大的圖片顯示容器 --></div></div></div> <div class="a2"><h2>提拉米蘇(約2磅)</h2><div class="a21"><div class="a211"><span class="color">售價</span><span class="prices">￥198</span><span class="shic">市場價<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">配送說明</span><p>北京、上海、廣州、深圳、天津、重慶、南京、長沙</p><span class="color">配送至</span><p>鄭州</p><span class="color">說明</span><p>深圳大鵬新區暫不配送</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">加入購物車</button></a><a href="#"><button class="a25color2">加入購物車</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, //如果設置了移動盒子的寬度，則不計算縮放比例zoom: 5 //縮放比例};var _magnifier = magnifier(magnifierConfig);/*magnifier的內置函數調用*//*//設置magnifier函數的index屬性_magnifier.setIndex(1);//重新載入主圖,根據magnifier函數的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; }總結
以上是生活随笔為你收集整理的Html .CSS JQUERY （magnifier）实现详情页面特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asdasd
- 下一篇： html果壳网文本框,打造你的个人网站：