javascript简单特效，js学习

最新推荐文章于 2024-06-24 23:21:12 发布

BeArchitect

最新推荐文章于 2024-06-24 23:21:12 发布

阅读量1.5k

点赞数 4

分类专栏： js开发

本文链接：https://blog.csdn.net/s8460049/article/details/51757078

版权

js开发专栏收录该内容

28 篇文章 1 订阅

订阅专栏

简单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	光标相对于该网页的水平位置

一个api就可以看懂了，

需要注意的是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>

功能不难，很简单的东西，在许多特效素材网站上都能搜到很多，，比这个炫很多的，不过学习就是另一回事了！

BeArchitect

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
javascript简单特效，js学习

简单js特效制作-学习制作之前，我们先了解一下一些基础知识offset自己的，js中获取元素尺寸的api，通常使用的就是offset家族，先简单介绍一下这个家族，关于offset详细知识点大家可以自行百度。转载的一张图，基本所有的页面获取尺寸的api都包含了，下面我们详细说一下这张图offsetWidth, offsetHeight
复制链接

扫一扫

专栏目录