简单js特效制作-学习
制作之前,我们先了解一下一些基础知识
offset
自己的,js中获取元素尺寸的api,通常使用的就是offset家族,先简单介绍一下这个家族,关于offset详细知识点大家可以自行百度。
转载的一张图,基本所有的页面获取尺寸的api都包含了,下面我们详细说一下这张图
offsetWidth, offsetHeight
得到对象自己的高度和宽度,是指元素对象自己的,与其他元素和页面无关,举个例子
div { width:100px; border-left:1px solid red; padding:10px;}
div.offsetWidth = 100+1+10 ,也就是说offsetWidth = width+border+padding,offsetHeight同理
offsetLeft, offsetRight
距离父级元素左边或者右边的距离,父级元素是指带有定位的元素,如果没有上级元素,或者上级元素都没有定位,则以body为准
要注意一点的是,是offsetLeft是从父级的padding开始算,border不算,就是说子元素,到定位父元素,,他们两边框到边框的距离
offsetParent返回父元素,不一定上一级,可能是爷爷,太爷爷,反正直到有定义的父级,如果父级都没定位,则返回body
对比区别我就不列举,要学习这个,可以去详细百度
event
事件对象,
属性 | 作用 |
data | 返回拖拽对象的URL字符串(dragDrop) |
width | 该窗口或框架的高度 |
height | 该窗口或框架的高度 |
pageX | 光标相对于该网页的水平位置(ie无) |
pageY | 光标相对于该网页的垂直位置(ie无) |
screenX | 光标相对于该屏幕的水平位置 |
screenY | 光标相对于该屏幕的垂直位置 |
target | 该事件被传送到的对象 |
type | 事件的类型 |
clientX | 光标相对于该网页的水平位置 (当前可见区域) |
clientY | 光标相对于该网页的水平位置 |
需要注意的是pageX,screenX,clientX,的区别
screenX是以电脑屏幕为基准,
pageX是以文档为基准,ie6,7,8版本不兼容,绝对定位
clientX以可见区域为基准,相当于固定定位
废话了那么多 ,了解了这些之后,我们就可以开始做一些简单特效了:
首先任何js的特效在实现的时候,都需要一个良好的css布局,本人也是一个java程序员,css了解不深,也才开始学。
导航小特效
可以根据自己的需求,改变样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0;}
ul{
list-style: none;
}
body{background-color: #000;}
.nav{
width: 800px;
height: 42px;
background: url(img/rss.png) no-repeat right center #fff;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.cloud{
width: 83px;
height: 42px;
position: absolute;
top: 0;
left: 0;
background: url(img/cloud.gif) no-repeat;
}
.nav ul{
position: absolute;
top: 0;
left: 0;
}
.nav li{
float: left;
width: 83px;
height: 42px;
line-height: 42px;
text-align: center;
color: #000;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav" id="nav">
<span class="cloud" id="cloud"></span>
<ul>
<li>首页</li>
<li>贵州</li>
<li>深圳</li>
<li>重庆</li>
<li>北京</li>
<li>杭州</li>
</ul>
</div>
</body>
</html>
<script>
/**
* 思路:当鼠标移动到某个li上的时候,就要改变云所在的位置,当鼠标离开的时候,云回到原来的位置,当鼠标点击的时候,云固定在当前的位置
* 而位置的获取,就是利用offsetLeft
*/
var cloud = document.getElementById("cloud");//获取云
var lis = document.getElementById("nav").children[1].children;
for (var i=0;i<lis.length;i++) {
//鼠标进去区域事件
lis[i].onmouseover = function(){
target = this.offsetLeft;
}
//鼠标离开事件
lis[i].onmouseout =function(){
target = current;
}
//单击事件
lis[i].onclick = function(){
current = this.offsetLeft;
}
}
//缓动公式
var leader = 0;
var target = 0;//移动的目标位置
var current = 0;//用于存放点击的位置
setInterval(function(){
leader = leader + (target - leader) /10;
cloud.style.left = leader + "px";
},10)
</script>
效果图:
电商网站,放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 450px;
height: 450px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<!--
描述:小盒子
-->
<div class="small">
<img src="img/iu300.jpeg" alt="" />
<!--
描述:鼠标盒子
-->
<div class="mask"></div>
</div>
<!--
描述:显示的大盒子
-->
<div class="big">
<img src="img/iu.jpeg" alt="" />
</div>
</div>
</body>
</html>
<script>
var box = document.getElementById("box");
var small = box.children[0];
var big = box.children[1];
var mask = small.children[1];
var bigImage = big.children[0];
small.onmouseover =function(){
mask.style.display="block";
big.style.display="block";
}
small.οnmοuseοut=function(){
mask.style.display="none";
big.style.display="none";
}
var x = 0;
var y = 0;
small.onmousemove = function(event){
var event = event || window.event;
x = event.clientX - box.offsetLeft - mask.offsetWidth / 2;
y = event.clientY - box.offsetTop - mask.offsetHeight /2;
if(x<0) {
x = 0;
}
else if(x > small.offsetWidth - mask.offsetWidth) {
x = small.offsetWidth - mask.offsetWidth;
}
if(y<0) {
y=0;
} else if(y > small.offsetHeight - mask.offsetHeight) {
y = small.offsetHeight - mask.offsetHeight;
}
mask.style.left = x +"px";
mask.style.top = y+"px";
bigImage.style.left = -x * 450 / 350 + "px";//大图与小图移动方向相反
bigImage.style.top = -y * 450 / 350 + "px";
}
</script>
效果图:
滑动条选择效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin:0;padding:0;}
.scroll {
width: 400px;
height: 8px;
background-color: #ccc;
margin: 100px;
position: relative;
}
.bar {
width: 10px;
height: 22px;
background-color: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask {
width: 0;
height: 100%;
background-color: #369;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="scroll" id="scrollBar">
<div class="bar"></div>
<div class="mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script>
/**
* 拖拽效果的实现,主要是利用,鼠标按下不起来的事件中加入鼠标的移动事件来实现,
* 所以当鼠标按下的时候,记录位置,然后移动鼠标,改变位置,
* window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();代码的作用清楚所选的内容
* 然后当鼠标弹起的时候,不做操作
*/
var scrollBar = document.getElementById("scrollBar");
var bar = scrollBar.children[0];
var mask = scrollBar.children[1];
var demo = document.getElementById("demo");
/* document.onmousedown = function() {
alert(11);
}*/
bar.onmousedown = function(event) {
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
// alert(11);
// 拖动一定写到 down 里面才可以
var that = this;
document.onmousemove = function(event) {
var event = event || window.event;
that.style.left = event.clientX - leftVal + 'px';
//alert(that.style.left);
var val = parseInt(that.style.left);
if (val < 0) {
that.style.left = 0;
} else if (val > 390) {
that.style.left = "390px";
}
mask.style.width = that.style.left; // 遮罩盒子的宽度
//计算百分比
demo.innerHTML = "已经走了:" + parseInt(parseInt(that.style.left) / 390 * 100) + "%";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function() {
document.onmousemove = null; // 弹起鼠标不做任何操作
}
}
</script>
功能不难,很简单的东西,在许多特效素材网站上都能搜到很多,,比这个炫很多的,不过学习就是另一回事了!