0
点赞
收藏
分享

微信扫一扫

面向对象案例二


面向对象案例二

放大镜

效果分析

组成结构分析
  1. 一个容器大盒子 - div.box
  2. 一个放中等图片的盒子 - div.middleBox
  • 一张中等图片
  • 一个遮罩 - div.shade
  1. 一个放小图片的盒子 - div.smallBox
  • 两张小图
  1. 一个放大图的盒子 - div.bigBox
布局分析
  1. 大盒子box设置相对定位
  2. 中等盒子middleBox设置相对定位
  3. 遮罩shade设置绝对定位在中等盒子中,隐藏
  4. 放大图的盒子bigBox设置绝对定位,定位到大盒子box的右边,大图作为放大图的盒子的背景
效果分析
  1. 点击小图片,大图随着小图更换
  2. 鼠标移动大中等盒子上
  • 遮罩出现,并可以在中等盒子上移动
  • 遮罩移动的过程中大盒子的背景图也跟随移动
  1. 鼠标离开大盒子
  • 遮罩隐藏,放大图的盒子也隐藏,并将移动事件注销
规律分析
  1. 中等盒子和遮罩的比例,是大图和放大图的盒子的比例
  2. 遮罩移动过的距离和中等盒子的比例,是大图移动的距离和大图的比例

代码实现

html结构

<div class="box">
    <div class="middleBox">
        <img src="./images/middle1.jpg">
        <div class="shade"></div>
    </div>
    <div class="smallBox">
        <img class="active" src="./images/small1.jpg" alt="">
        <img src="./images/small2.jpg" alt="">
    </div>
    <div class="bigBox"></div>
</div>

样式代码

.middleBox{
    width: 400px;
    height: 400px;
    border:1px solid #000;
    position: relative;
}
.shade{
    width: 100px;
    height: 100px;
    background:yellow;
    position: absolute;
    left:0;
    top:0;
    opacity:0.5;
    display:none;
}
.smallBox{
    margin-top:10px;

}
.smallBox img{
    border:1px solid #000;
    margin-left:5px;
}
.smallBox img.active{
    border-color:red;
}
.box{
    margin:50px;
    width: 402px;
    position: relative;
}
.bigBox{
    width: 400px;
    height: 400px;
    border:1px solid #000;
    position:absolute;
    top:0;
    left:105%;
    display:none;
    background-image:url(./images/big1.jpg);
    background-position:0 0;
    background-size:1600px 1600px;
    background-repeat:no-repeat;
}
.shade:hover{
    cursor:move;
}

js代码

// 定义一个空构造函数
function Enlarge(classname){
    this.box = document.querySelector("."+classname);
    // 把需要操作的所有的元素都获取到,并绑定到对象的属性上
    this.middleBox = this.box.querySelector(".middleBox");
    this.middleImg = this.box.querySelector(".middleBox img");
    this.shade = this.box.querySelector(".shade");
    this.smallImgs = this.box.querySelectorAll(".smallBox img");
    this.bigBox = this.box.querySelector(".bigBox");
    // 给需要操作的元素绑定事件
    var _this = this;
    for(var i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].onclick=function(){
            _this.tab(this);
        }
    }
    // 中等盒子鼠标放上去的事件
    this.middleBox.onmouseover=function(){
        _this.over();
    }
    // 中等盒子鼠标离开的事件
    this.middleBox.onmouseout=function(){
        _this.out();
    }
}
// 鼠标离开中盒子的事件
Enlarge.prototype.out=function(){
    this.shade.style.display = 'none';
    this.bigBox.style.display = 'none';
    this.middleBox.onmousemove=null;
}
// 鼠标放到中盒子上的事件
Enlarge.prototype.over=function(){
    this.shade.style.display = 'block';
    var _this = this;
    this.middleBox.onmousemove=function(){
        _this.move();
    }
}
// 鼠标在中盒子上移动的事件
Enlarge.prototype.move=function(e){
    var e = e || window.event;
    var x = e.clientX;
    var y = e.clientY;
    // 遮罩的宽高的一半
    var shadeWidthBan = this.shade.clientWidth/2;
    var shadeHeightBan = this.shade.clientHeight/2;
    // 限定x和y在左上角的最小位置
    if(x<this.box.offsetLeft+shadeWidthBan){
        x = this.box.offsetLeft+shadeWidthBan
    }
    if(y<this.box.offsetTop+shadeHeightBan){
        y = this.box.offsetTop+shadeHeightBan
    }
    // 限定x和y在右下角的最大值
    if(x>this.box.offsetLeft+this.middleBox.offsetWidth-shadeWidthBan){
        x = this.box.offsetLeft+this.middleBox.offsetWidth-shadeWidthBan;
    }
    if(y>this.box.offsetTop+this.middleBox.offsetHeight-shadeHeightBan){
        y = this.box.offsetTop+this.middleBox.offsetHeight-shadeHeightBan;
    }
    // console.log(y);
    // 给遮罩设置left和top,让遮罩移动起来
    this.shade.style.left = x - this.box.offsetLeft - shadeWidthBan + 'px';    
    this.shade.style.top = y - this.box.offsetTop - shadeHeightBan + 'px'; 
    this.bigImgMove();   
}
// 移动遮罩让大图移动
Enlarge.prototype.bigImgMove=function(){
    this.bigBox.style.display = 'block';
    /*
    遮罩移动的距离              大图移动距离
    ------------     ===        ---------
    中盒子的大小                 大图的大小
    */
    // 计算遮罩和中盒子的比例
    var xPercent = this.shade.offsetLeft/this.middleBox.clientWidth;
    var yPercent = this.shade.offsetTop/this.middleBox.clientHeight;
    // console.log(this.middleBox.clientWidth);
    // 计算大图的大小 - 大图是大盒子的背景图 - 获取背景图的大小
    var bigImgBgSize = getStyle(this.bigBox,"background-size");
    // 获取 单独的宽高的数字
    var bigImgBgWidth = parseInt(bigImgBgSize.split(" ")[0]);
    var bigImgBgHeight = parseInt(bigImgBgSize.split(" ")[1]);
    // 计算大图要移动的距离
    var xMove = bigImgBgWidth*xPercent;
    var yMove = bigImgBgHeight*yPercent;
    // 把大图要移动的距离赋值到大图的背景定位的left和top上
    this.bigBox.style.backgroundPosition = -xMove+'px '+-yMove+'px';
    // console.log(xMove,yMove);
    // console.log(this.shade.offsetLeft,this.shade.offsetTop);
}
// 点击小图换中图,并换大图
Enlarge.prototype.tab=function(smallImg){
    // 找到当前点击的小图的路径
    var smallImgSrc = smallImg.src;
    // 截取到 数字.jpg

    // 找到点的下标
    var dotIndex = smallImgSrc.lastIndexOf(".");
    // 截取到末尾
    var targetSuffix = smallImgSrc.substring(dotIndex-1);
    // 拼接成中等图片的路径
    var middleImgSrc = "./images/middle"+targetSuffix;
	// 拼接成大图的路径
	var bigImgSrc = "url(./images/middle"+targetSuffix+")";
    // 将中等图片的路径赋值到中等图的src属性上
    this.middleImg.src = middleImgSrc;
    // console.log(middleImgSrc);
	// 将大图的路径赋值到放大图的盒子的背景中
	this.bigBox.style.backgroundImage = bigImgSrc;
    // 将别人的active类名干掉,给自己添加active类名
    for(var i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].className = '';
    }
    smallImg.className = 'active';
	
}
// 实例化他
var enlarge = new Enlarge("box");
// console.log(enlarge);

function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}

烟花

效果分析

结构分析
  1. 大盒子做夜空
  2. 点击的时候生成一个小烟花
  3. 小烟花升空后生成很多小烟花
  4. 让很多小烟花移动到一个随机位置
效果分析
  1. 大盒子点击事件
  2. 生成小烟花,设置在大盒子最底部,横向位置是鼠标所点的位置。放到大盒子中,调用运动函数移动到鼠标所在高度
  3. 将小烟花删掉,并生成很多小烟花,设置成圆形,位置就是鼠标所点击的位置,随机颜色
  4. 让生成的很多小烟花移动到随机位置,移动后将很多小烟花从大盒子删除

代码实现:

<body>
<div class="box"></div>
</body>
<script src="./js/sport.js"></script>
<script type="text/javascript">
function Fire(classname){
    this.box = document.querySelector("."+classname);
    // 给元素设置样式
    setStyle(this.box,{
        width:"1000px",
        height:"600px",
        background:"#000",
        border:"10px solid pink",
        position:"relative"
    });
    // 给盒子注册点击事件
    this.box.onclick=()=>{
        this.click();
    }
}
// 盒子的点击事件
Fire.prototype.click=function(e){
    var e = e || window.event;
    var x = e.offsetX;
    var y = e.offsetY;
    // 生成一个小烟花
    var div = document.createElement("div");
    setStyle(div,{
        width:"10px",
        height:"10px",
        position:"absolute",
        left:x+'px',
        bottom:0,
        background:getColor()
    });
    this.box.appendChild(div);
    // 让小烟花升空
    this.toUp(div,x,y);
}
// 让小烟花升空
Fire.prototype.toUp=function(ele,x,y){
    var _this = this;
    sport(ele,{
        top:y
    },function(){
        _this.box.removeChild(ele);
        // 升空以后,在当前这个位置生成很多的小烟花
        _this.createManyFire(x,y);
    });
}
Fire.prototype.createManyFire=function(x,y){
    var num = getRondom(25,30);
    for(var i=0;i<num;i++){
        var div = document.createElement("div");
        setStyle(div,{
            width:"10px",
            height:"10px",
            position:"absolute",
            background:getColor(),
            borderRadius:"50%",
            left:x+'px',
            top:y+'px'
        });
        this.box.appendChild(div);
        // 让小烟花炸开
        this.boom(div);
    }
}
// 让很多小烟花炸开
Fire.prototype.boom=function(ele){
    var _this = this;
    sport(ele,{
        left:getRondom(0,_this.box.clientWidth-ele.clientWidth),
        top:getRondom(0,_this.box.clientHeight-ele.clientHeight),
    },function(){
        _this.box.removeChild(ele);
    });
}
var fire = new Fire("box");
console.log(fire);

// 设置样式
function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
}
// 生成随机颜色
function getColor(){
    var rgb1 = getRondom(0,255);
    var rgb2 = getRondom(0,255);
    var rgb3 = getRondom(0,255);
    return `rgb(${rgb1},${rgb2},${rgb3})`;
}
// 生成随机数
function getRondom(min,max){
    if(min>max){
        var tmp = min;
        min = max;
        max = tmp;
    }
    // 20~100之间的随机数   parseInt(Math.random()*(100-20))+20
    return parseInt(Math.random()*(max-min))+min;
}
</script>

举报

相关推荐

0 条评论