小帽商城
第九章 放大镜鼠标移动实现蒙版元素的拖拽效果
// js\index.js
// 作用：需要将所有的DOM元素对象以及相关的资源全部都加载完毕之后，再来实现的事件函数
window.onload = function(){
// 路径导航的数据渲染
navPathDataBind();
function navPathDataBind() {
...
}
// 放大镜的移入、移出效果
bigClassBind();
function bigClassBind() {
/**
* 思路：
* 1.获取小图框元素对象，并且设置移入事件（onmouseenter）
* 2.动态的创建蒙版元素以及大图框和大图片元素
* 3.移出时（onmouseleave）需要移除蒙版元素和大图框
*/
// 1. 获取小图框元素
var smallPic = document.querySelector('#wrapper #content .contentMain #center #left #leftTop #smallPic')
// 获取leftTop元素
var leftTop = document.querySelector('#wrapper #content .contentMain #center #left #leftTop');
// 2. 设置移入事件
smallPic.onmouseenter = function() {
// 3. 创建蒙版元素
var maskDiv = document.createElement('div');
maskDiv.className = "mask";
// 4. 创建大图框元素
var BigPic = document.createElement('div');
BigPic.id = "bigPic";
// 5. 创建大图片元素
var BigImg = document.createElement('img');
BigImg.src = 'images/b1.png';
// 6. 大图框追加大图片
BigPic.appendChild(BigImg);
// 7. 让小图框来追加蒙版元素
smallPic.appendChild(maskDiv);
// 8. 让LeftTop元素追加大图框
leftTop.appendChild(BigPic);
// 设置移动事件☆
smallPic.onmousemove = function(event) {
// event.clientX：鼠标点距离浏览器左侧X轴的值
// getBoundingClientRect().left：小图框元素距离浏览器左侧可视left值
// offsetWidth：为元素的占位宽度
var left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
var top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;
// 设置left和top属性
maskDiv.style.left = left + "px";
maskDiv.style.top = top + "px";
}
// 设置移除事件
smallPic.onmouseleave = function() {
// 让小图框移除蒙版元素
smallPic.removeChild(maskDiv);
// 让LeftTop元素移除大图框
leftTop.removeChild(BigPic);
}
}
}
}
第十章 蒙版元素移动的边界控制
// js\index.js
// 作用：需要将所有的DOM元素对象以及相关的资源全部都加载完毕之后，再来实现的事件函数
window.onload = function(){
// 路径导航的数据渲染
navPathDataBind();
function navPathDataBind() {
/**
* 思路：
* 1.先获取路径导航的页面元素（navPath）
* 2.再来获取所需要的数据（data.js -> goodData.path）
* 3.由于数据是需要动态产生的，那么相应的DOM元素也应该是动态产生的，含义需要创建DOM元素，根据数据的数量来进行创建DOM元素
* 4.在遍历数据创建DOM元素的最后一条，只创建a标签，而不创建i标签
*/
// 1.获取页面导航的元素对象
var navPath = document.querySelector('#wrapper #content .contentMain #navPath');
// 2.获取数据
var path = goodData.path;
// 3.遍历数据
for(var i = 0; i < path.length; i++){
if(i == path.length - 1){
// 只需要创建a且没有href属性
var aNode = document.createElement("a");
aNode.innerText = path[i].title;
navPath.appendChild(aNode);
}else{
// 4.创建a标签
var aNode = document.createElement("a");
aNode.href = path[i].url;
aNode.innerText = path[i].title;
// 5.创建i标签
var iNode = document.createElement("i");
iNode.innerText = '/';
// 6.让navPath元素来追加a和i
navPath.appendChild(aNode);
navPath.appendChild(iNode);
}
}
}
// 放大镜的移入、移出效果
bigClassBind();
function bigClassBind() {
/**
* 思路：
* 1.获取小图框元素对象，并且设置移入事件（onmouseenter）
* 2.动态的创建蒙版元素以及大图框和大图片元素
* 3.移出时（onmouseleave）需要移除蒙版元素和大图框
*/
// 1. 获取小图框元素
var smallPic = document.querySelector('#wrapper #content .contentMain #center #left #leftTop #smallPic')
// 获取leftTop元素
var leftTop = document.querySelector('#wrapper #content .contentMain #center #left #leftTop');
// 2. 设置移入事件
smallPic.onmouseenter = function() {
// 3. 创建蒙版元素
var maskDiv = document.createElement('div');
maskDiv.className = "mask";
// 4. 创建大图框元素
var BigPic = document.createElement('div');
BigPic.id = "bigPic";
// 5. 创建大图片元素
var BigImg = document.createElement('img');
BigImg.src = 'images/b1.png';
// 6. 大图框追加大图片
BigPic.appendChild(BigImg);
// 7. 让小图框来追加蒙版元素
smallPic.appendChild(maskDiv);
// 8. 让LeftTop元素追加大图框
leftTop.appendChild(BigPic);
// 设置移动事件
smallPic.onmousemove = function(event) {
// event.clientX：鼠标点距离浏览器左侧X轴的值
// getBoundingClientRect().left：小图框元素距离浏览器左侧可视left值
// offsetWidth：为元素的占位宽度
var left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
var top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;
// 判断☆
// 让蒙版元素只能在小图框里移动
if(left < 0) {
left = 0;
}else if(left > smallPic.clientWidth - maskDiv.offsetWidth){
left = smallPic.clientWidth - maskDiv.offsetWidth
}
if(top < 0) {
top = 0;
}else if(top > smallPic.clientHeight - maskDiv.offsetHeight){
top = smallPic.clientHeight - maskDiv.offsetHeight
}
// 设置left和top属性
maskDiv.style.left = left + "px";
maskDiv.style.top = top + "px";
}
// 设置移除事件
smallPic.onmouseleave = function() {
// 让小图框移除蒙版元素
smallPic.removeChild(maskDiv);
// 让LeftTop元素移除大图框
leftTop.removeChild(BigPic);
}
}
}
}
第十一章 放大镜移动实现大图元素等比例移动效果
// js\index.js
// 作用：需要将所有的DOM元素对象以及相关的资源全部都加载完毕之后，再来实现的事件函数
window.onload = function(){
// 路径导航的数据渲染
navPathDataBind();
function navPathDataBind() {
/**
* 思路：
* 1.先获取路径导航的页面元素（navPath）
* 2.再来获取所需要的数据（data.js -> goodData.path）
* 3.由于数据是需要动态产生的，那么相应的DOM元素也应该是动态产生的，含义需要创建DOM元素，根据数据的数量来进行创建DOM元素
* 4.在遍历数据创建DOM元素的最后一条，只创建a标签，而不创建i标签
*/
// 1.获取页面导航的元素对象
var navPath = document.querySelector('#wrapper #content .contentMain #navPath');
// 2.获取数据
var path = goodData.path;
// 3.遍历数据
for(var i = 0; i < path.length; i++){
if(i == path.length - 1){
// 只需要创建a且没有href属性
var aNode = document.createElement("a");
aNode.innerText = path[i].title;
navPath.appendChild(aNode);
}else{
// 4.创建a标签
var aNode = document.createElement("a");
aNode.href = path[i].url;
aNode.innerText = path[i].title;
// 5.创建i标签
var iNode = document.createElement("i");
iNode.innerText = '/';
// 6.让navPath元素来追加a和i
navPath.appendChild(aNode);
navPath.appendChild(iNode);
}
}
}
// 放大镜的移入、移出效果
bigClassBind();
function bigClassBind() {
/**
* 思路：
* 1.获取小图框元素对象，并且设置移入事件（onmouseenter）
* 2.动态的创建蒙版元素以及大图框和大图片元素
* 3.移出时（onmouseleave）需要移除蒙版元素和大图框
*/
// 1. 获取小图框元素
var smallPic = document.querySelector('#wrapper #content .contentMain #center #left #leftTop #smallPic')
// 获取leftTop元素
var leftTop = document.querySelector('#wrapper #content .contentMain #center #left #leftTop');
// 2. 设置移入事件
smallPic.onmouseenter = function() {
// 3. 创建蒙版元素
var maskDiv = document.createElement('div');
maskDiv.className = "mask";
// 4. 创建大图框元素
var BigPic = document.createElement('div');
BigPic.id = "bigPic";
// 5. 创建大图片元素
var BigImg = document.createElement('img');
BigImg.src = 'images/b1.png';
// 6. 大图框追加大图片
BigPic.appendChild(BigImg);
// 7. 让小图框来追加蒙版元素
smallPic.appendChild(maskDiv);
// 8. 让LeftTop元素追加大图框
leftTop.appendChild(BigPic);
// 设置移动事件
smallPic.onmousemove = function(event) {
// event.clientX：鼠标点距离浏览器左侧X轴的值
// getBoundingClientRect().left：小图框元素距离浏览器左侧可视left值
// offsetWidth：为元素的占位宽度
var left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
var top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;
// 判断
// 让蒙版元素只能在小图框里移动
if(left < 0) {
left = 0;
}else if(left > smallPic.clientWidth - maskDiv.offsetWidth){
left = smallPic.clientWidth - maskDiv.offsetWidth
}
if(top < 0) {
top = 0;
}else if(top > smallPic.clientHeight - maskDiv.offsetHeight){
top = smallPic.clientHeight - maskDiv.offsetHeight
}
// 设置left和top属性
maskDiv.style.left = left + "px";
maskDiv.style.top = top + "px";
// 移动的比例关系 = 蒙版元素移动的距离 / 大图片元素移动的距离☆
// 蒙版元素移动的距离 = 小图框宽度 - 蒙版元素的宽度
// 大图片元素移动的距离 = 大图片宽度 - 大图框元素的宽度
var scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (BigImg.offsetWidth - BigPic.clientWidth);
console.log(scale); // 0.495
BigImg.style.left = -left / scale + "px";
BigImg.style.top = -top / scale + "px";
}
// 设置移除事件
smallPic.onmouseleave = function() {
// 让小图框移除蒙版元素
smallPic.removeChild(maskDiv);
// 让LeftTop元素移除大图框
leftTop.removeChild(BigPic);
}
}
}
}
// css\index.less
img{
width: 800px;
height: 800px;
position: absolute;
left: 0px;
top: 0px;
}
第十二章 放大镜缩略图布局搭建效果
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小帽商城项目详情页面</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 最外层的包裹元素 -->
<div id="wrapper">
<!-- 头部开始 -->
<header id="header">
<!-- 上面部分 -->
<div class="headTop">
<!-- 版心元素 -->
<div class="headTopMain">
<!-- 左侧 -->
<div class="left">
<h5>欢迎来到小帽商城！请</h5>
<p>
<a href="javasvript:;">登录</a>
<a href="javasvript:;">注册</a>
</p>
</div>
<!-- 右侧 -->
<div class="right">
<nav>
<a href="javascript:;">我的订单</a>
<a href="javascript:;">我的购物车</a>
<a href="javascript:;">我的小帽商城</a>
<a href="javascript:;">小帽商城会员</a>
<a href="javascript:;">企业采购</a>
<a href="javascript:;">关注小帽商城</a>
<a href="javascript:;">合作招商</a>
<a href="javascript:;">商家后台</a>
</nav>
</div>
</div>
</div>
<!-- 下面部分 -->
<div class="headBottom">
<!-- 版心元素 -->
<div class="headBottomMain">
<!-- logo -->
<h1 class="logo">
<a href="javascript:;">
<img src="image/lemonmall.png" alt="">
</a>
</h1>
<!-- 搜索框 -->
<div class="search">
<input type="text" placeholder="请输入搜索内容">
<input type="submit" value="搜索">
</div>
</div>
</div>
</header>
<!-- 头部结束 -->
<!-- 分类导航开始 -->
<div id="navWrap">
<!-- 版心元素 -->
<div class="navWrapMain">
<a href="javascript:;">全部商品分类</a>
<a href="javascript:;">服装城</a>
<a href="javascript:;">美妆馆</a>
<a href="javascript:;">小帽超市</a>
<a href="javascript:;">全球购</a>
<a href="javascript:;">闪购</a>
<a href="javascript:;">团购</a>
<a href="javascript:;">有趣</a>
<a href="javascript:;">秒杀</a>
</div>
</div>
<!-- 分类导航结束 -->
<!-- 内容区域开始 -->
<div id="content">
<!-- 版心元素 -->
<div class="contentMain">
<!-- 路径导航开始 -->
<div id="navPath">
</div>
<!-- 路径导航结束 -->
<!-- 中间区域开始 -->
<div id="center">
<!-- 左侧放大镜开始 -->
<div id="left">
<!-- 上边 -->
<div id="leftTop">
<!-- 小图框 -->
<div id="smallPic">
<!-- 小图片 -->
<img src="images/s1.png" alt="">
<!-- 蒙版元素 -->
</div>
<!-- 大图框 -->
</div>
<!-- 下边 -->
<div id="leftBottom">
<a href="javascript:;">< </a>
<div id="piclist">
<ul>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
<li>
<img src="images/s1.png" alt="">
</li>
</ul>
</div>
<a href="javascript:;"> > </a>
</div>
</div>
<!-- 左侧放大镜结束 -->
<!-- 右侧商品详情区域开始 -->
<!-- 右侧商品详情区域结束 -->
</div>
<!-- 中间区域结束 -->
</div>
</div>
<!-- 内容区域结束 -->
</div>
<script src="js/data.js"></script>
<script src="js/index.js"></script>
</body>
</html>
// css\index.less
@import 'mixins/clear.less';
// 最外层的包裹元素
#wrapper{
// 头部开始
#header{
...
}
// 头部结束
// 分类导航开始
#navWrap{
...
}
// 分类导航结束
// 内容区域开始
#content{
// 版心元素
.contentMain{
width: 1200px;
margin: 15px auto 0 auto;
font-size: 0px;
// 路径导航开始
#navPath{
padding: 9px 15px 9px 0;
// font-size: 0px;
a{
// 行标签和行标签之间会有小缝隙
// 处理方式就是给它们的直接父元素上面添加一个font-size为0
// 还得添加一下它们原本的字体大小
font-size: 12px;
}
i{
padding: 0 5px;
font-size: 12px;
}
}
// 路径导航结束
// 中间区域开始
#center{
margin: 5px 0 15px;
// 左侧放大镜开始
#left{
width: 400px;
float: left;
// 上边
#leftTop{
width: 400px;
position: relative;
// 小图框
#smallPic{
width: 400px;
height: 400px;
border: 1px solid #dfdfdf;
position: relative;
img{}
// 蒙版元素
.mask{
width: 200px;
height: 200px;
background: rgba(255, 255, 255, .5);
border: 1px solid #ddd;
position: absolute;
left: 0px;
top: 0px;
}
}
// 大图框
#bigPic{
width: 400px;
height: 400px;
border: 1px solid #ddd;
left: 420px;
top: 0px;
position: absolute;
// 原图太大，溢出隐藏
overflow: hidden;
// 大图片
img{
width: 800px;
height: 800px;
position: absolute;
left: 0px;
top: 0px;
}
}
}
// 下边
#leftBottom{
width: 400px;
margin-top: 5px;
.clearfix();
a{
width: 10px;
height: 54px;
border: 1px solid #ccc;
background: #ebebeb;
text-align: center;
line-height: 54px;
float: left;
&:first-child {
margin-right: 4px;
}
}
#piclist{
width: 372px;
height: 56px;
float: left;
overflow: hidden;
ul{
// 强制不换行
white-space: nowrap;
font-size: 0px;
li{
width: 50px;
height: 50px;
border: 1px solid #ccc;
padding: 2px;
margin-right: 20px;
display: inline-block;
img{
width: 50px;
height: 50px;
}
}
}
}
}
}
}
}
}
// 内容区域结束
}
版权声明：本文为sgsgkxkx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。