在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效,看一看放大镜效果是如何实现的。
1.首先我们还是先把div布局写出来。
<div class="bfdj">
<div id="box">
<div id="bug1">
<img src="../img/b2.jpg" alt="" id="bug">
<div id="ball"></div>
<div id="mask"></div>
</div>
<div id="bug2">
<img src="../img/b2.jpg" id="pic">
</div>
</div>
<!--小图片五张-->
<div id="bimg">
<div id="imgs">
<img src="../img/b2.jpg" alt="" id="img1">
<img src="../img/bbbb.jpg" alt="" id="img2">
<img src="../img/bbbb1.jpg" alt="" id="img3">
<img src="../img/bbbb2.jpg" alt="" id="img4">
<img src="../img/bbbb3.jpg" alt="" id="img5">
</div>
</div>
</div>
<script src="../js/bf.js"></script>
2.其次是css部分
/*放大镜*/
*{
margin: 0;
padding: 0;
}
.bfdj{
width: 100%;
height: 570px;
/**/
}
#box{
width: 375px;
height: 350px;
position: relative;
margin-left: 300px;
top:100px;
/*right: ;*/
/**/
}
#bug1{
width: 376px;
height: 350px;
border: 1px solid gainsboro;
position: relative;
display: inline-block;
/*margin-left: 200px;*/
/**/
}
/*.box-right{*/
/*position: absolute;*/
/*float: right;*/
/**/
/*margin-left: 680px;*/
/*margin-top: -250px;*/
/*width: 600px;*/
/*height: 425px;*/
/*font-size: 16px;*/
/*font-family: 微软雅黑;*/
/*border: 1px solid lightgrey;*/
/*background-image: url("../img/bhh.jpg");*/
/*}*/
#bug1 img{
width: 100%;
height: 100%;
display: block;
}
#ball{
width: 150px;
height: 150px;
position: absolute;
top:0;
left: 0;
background-color: navajowhite;
opacity: 0.3;
/*display: none;*/
}
#mask{
width:100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: 5;
cursor: pointer;
}
#bimg{
position: relative;
margin-left: 300px;
margin-top: 100px;
}
#imgs img{
width: 70px;
height: 70px;
float: left;
border: 2px solid transparent;
margin-left: 2px;
margin-top: 2px;
position: relative;
/*margin-left: 400px;*/
}
#imgs img:first-child{
margin-left: 0;
}
#imgs img:hover{
border: 2px solid gray;
}
#bug2{
/**/
width: 376px;
height: 350px;
position: relative;
top:-355px;
left: 1px;
overflow: hidden;
display: none;
z-index: 4;
}
#bug2 img{
width: 400%;
height: 400%;
display: block;
border: none;
position: absolute;
z-index: 2;
}
3.最后是js部分代码
//放大镜
var bug = document.getElementById("bug");
var img1 = document.getElementById("img1")
var img2 = document.getElementById("img2")
var img3 = document.getElementById("img3")
var img4 = document.getElementById("img4")
var img5 = document.getElementById("img5")
img1.addEventListener("mousemove", function() {
bug.src = "../img/b2.jpg"
})
img2.addEventListener("mousemove", function() {
bug.src = "../img/bbbb.jpg"
})
img3.addEventListener("mousemove", function() {
bug.src = "../img/bbbb1.jpg"
})
img4.addEventListener("mousemove", function() {
bug.src = "../img/bbbb2.jpg"
})
img5.addEventListener("mousemove", function() {
bug.src = "../img/bbbb3.jpg"
})
var bug1 = document.getElementById("bug1");
var ball = document.getElementById("ball");
var bug2 = document.getElementById("bug2");
var rightImg = document.getElementById("pic");
img1.addEventListener("mousemove", function() {
rightImg.src = "../img/b2.jpg"
})
img2.addEventListener("mousemove", function() {
rightImg.src = "../img/bbbb.jpg"
})
img3.addEventListener("mousemove", function() {
rightImg.src = "../img/bbbb1.jpg"
})
img4.addEventListener("mousemove", function() {
rightImg.src = "../img/bbbb2.jpg"
})
img5.addEventListener("mousemove", function() {
rightImg.src = "../img/bbbb3.jpg"
})
bug1.onmousemove = function(event) {
var e = event || window.event; //获取鼠标对象
ball.style.display = "block";
bug2.style.display = "block";
//鼠标居中
var x = (e.offsetX || e.layerX) - ball.offsetWidth / 2 //offsetWidth获取 ball的宽度
var y = (e.offsetY || e.layerY) - ball.offsetHeight / 2
if(x <= 0) {
x = 0;
} else if(x > box.clientWidth - ball.offsetWidth) {
x = box.clientWidth - ball.offsetWidth
}
if(y <= 0) {
y = 0;
} else if(y > box.clientHeight - ball.offsetHeight) {
y = box.clientHeight - ball.offsetHeight
}
ball.style.left = x + "px";
ball.style.top = y + "px";
//四倍大小
rightImg.style.left = x * -4 + "px"
rightImg.style.top = y * -4 + "px";
this.onmouseout = function() {
ball.style.display = "none";
bug2.style.display = "none";
}
}
关于vue+css3开发的特效,以及和javascript+css3的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用vue+css3开发特效的。
这里的波浪只是侧面的,利用几个平面一部分弧旋转得到。定义 dom,容器中包含一行文本和3条做海浪特效的 <span>,设置容器,文字样式,制作海浪动画效果
文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读
在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观。
今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了
当用户点击左右箭头时,让数组进行相应变化(如果点击右箭头,就删除数组最后那个元素,把它添加到最前边;如果点击左箭头,就删除数组最前边那个元素,把它添加到最后边),改变完数组再调用一下move()函数(让图片轮播)
第一步,实现网格背景:第二部实现扫码线以及渐变背景特效,四角特效就是四个宽高相等的正方形,分别设置边框即可。设置扫描动画
用dropLine这个列表来记录绘制过程,dropLine[i]的意义是表示在第i列,第dropLine[i]行绘制!filltext()是canvas中的方法,这里的三个参数分别对应:内容,横坐标,纵坐标。
电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。
本文给大家介绍几款按钮的鼠标悬停效果,是纯CSS实现的,鼠标移上按钮后,按钮会随之发生变化。这种效果使用非常广泛,非常多的网页都用上了这个效果。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!