页面效果简单做（一）

最新推荐文章于 2023-04-11 23:00:00 发布

sp42a

最新推荐文章于 2023-04-11 23:00:00 发布

阅读量3.1k

点赞数 5

分类专栏： DHTML & H5

本文链接：https://blog.csdn.net/zhangxin09/article/details/48495063

版权

DHTML & H5 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

简介：有自己写的，也有网上看到的，即使是别人写的也会对其改动，或添加注释，并保持统一的编码风格，便于阅读。目标是不用第三方库即可完成（浏览器原生），简单做，能够阐述逻辑和原理清楚即可，因此可能考虑不是最周详的，包括跨浏览器的问题，如果你打算使用在项目中使用最好测试清楚，还可能要进一步修改之。

~~注意：打算提供在线例子的，但短时间内没有静态空间，所以例子的事情要稍等一阵子。~~已提供在线例子。

1、简易拖放效果

使用了 DOM 1 的方式登记事件，其实无必要 DOM Level 2 的 addEventListener，因为根据鼠标事件，同一时刻通常 document 只有一个 mousemove/mouseup 事件。点击查看例子。

<meta charset="utf-8" />  
<title>拖放 DD</title>  
<script>   
    SimpleDrag = function(el) {  
        this.el = el;  
        this._x = this._y = 0;  
        el.onmousedown = delegate(this, this.start);  
        this.move = delegate(this, this.move);  
          
        function delegate(object, fn){ // 绑定当前 this，并且修正浏览器兼容问题 e ||  window.event
            return function(e) {    
                return fn.call(object, (e || window.event));    
            }  
        }  
    };  
    SimpleDrag.prototype = {  
        start : function(e) {  
            this._x = e.clientX - this.el.offsetLeft;  
            this._y = e.clientY - this.el.offsetTop;  
            document.onmousemove = this.move;  
            document.onmouseup = this.stop;  
        },  
        // 拖动    
        move : function(e) {  
            this.el.style.left = e.clientX - this._x + "px";  
            this.el.style.top  = e.clientY - this._y + "px";  
        },  
        // 停止拖动    
        stop : function() {  
            document.onmousemove = document.onmouseup = null;  
        }  
    };  
</script>  
<style>  
    .dragable{  
        background-color:#C4E3FD;   
        width:50px; height:50px;  
        position:absolute;  
        left: 20px;  
        cursor:move;  
    }  
    .dragEl_1{  
        top : 10px;  
        border:5px solid blue;   
    }  
    .dragEl_2{  
        top : 80px;  
        border:5px solid red;   
    }  
</style>  
<div class="dragable dragEl_1">1</div>    
<div class="dragable dragEl_2">2</div>    
<script>  
    new SimpleDrag(document.querySelector(".dragEl_1"));    
    new SimpleDrag(document.querySelector(".dragEl_2"));    
</script>

2、上下滚动内容

原理是取出最尾元素放到前头。点击查看例子。

<html>  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
	<title>上下滚动内容</title>  
</head>  
<body>  
	<ul id="scroll">  
		<li>11111111111</li>  
		<li>22222222222</li>  
		<li>33333333333</li>  
		<li>44444444444</li>  
		<li>55555555555</li>  
		<li>66666666666</li>  
		<li>77777777777</li>  
		<li>88888888888</li>  
		<li>99999999999</li>  
		<li>00000000000</li>  
	</ul>  
	  
	  
	<ol id="scrollA">  
		<li>11111111111</li>  
		<li>22222222222</li>  
		<li>33333333333</li>  
		<li>44444444444</li>  
		<li>55555555555</li>  
		<li>66666666666</li>  
		<li>77777777777</li>  
		<li>88888888888</li>  
		<li>99999999999</li>  
		<li>00000000000</li>  
	</ol>  
	
	<script>
		/**
		 * @param {Element} el 列表元素
		 * @param {Number} interval 动画时间间隔
		 * @param {Boolean} canstop 是否可以鼠标移入时候暂停动画
		 */
		function ScrollContent(el, interval, canstop) {
			interval = interval || 3000;
			canstop  = canstop  || false;
			
			function scroll() {
				var lastEl = el.firstChild;
				while (lastEl.nodeType != 1)  // 找到最后一个元素
					lastEl = lastEl.nextSibling;
				
				el.appendChild(el.removeChild(lastEl)); // 把最后一个元素放到前头
			}

			var t = window.setInterval(scroll, interval);

			if (canstop) {
				el.onmouseover = function() {
					if (t) window.clearInterval(t);
				}
				el.onmouseout = function() {
					t = window.setInterval(scroll, interval);
				}
			}
		}
		
		new ScrollContent(document.getElementById('scroll'), 1000);
		new ScrollContent(document.getElementById('scrollA'), 500, true);
	</script>
</body>  
</html>

3、左右滚动内容

原理跟前者一样，只不过是把元素换为字符串，应该是更简单的了。点击查看在线例子。

<meta charset="utf-8" />
<title>水平字幕滚动</title>

<div class="content1">这是一段滚动的文字11111111</div>
<div class="content2">这是一段滚动的文字22222222</div>
<script>
	/**
	 * @param {Element} el 列表元素
	 * @param {Number} interval 动画时间间隔
	 * @param {Boolean} canstop 是否可以鼠标移入时候暂停动画
	 */
	function ScrollContent_Hoz(el, interval, canstop) {
		interval = interval || 500;
		canstop  = canstop  || false;
		var arr = el.innerHTML.split("");
		function scroll() {
			arr.push(arr.shift());
			el.innerHTML = arr.join("");
		}

		var t = window.setInterval(scroll, interval);

		if (canstop) {
			el.onmouseover = function() {
				if (t) window.clearInterval(t);
			}
			el.onmouseout = function() {
				t = window.setInterval(scroll, interval);
			}
		}
	}
	 
	new ScrollContent_Hoz(document.querySelector('.content1'));
	new ScrollContent_Hoz(document.querySelector('.content2'), null, true);
</script>

4、多级联动下拉菜单

联动本身并无多大难点，只是 onchange 事件的运用即可。值得一提的是这个演示了日历控件所涉及的日历生成算法——当然这是后话了。点击查看在线例子。

<meta charset="UTF-8">
<title>联动 Select 下拉</title>
<select id="year">
	<option value="0">--请选择--</option>
</select>年
<select id="month">
	<option value="0">--请选择--</option>
</select>月
<select id="day">
	<option value="0">--请选择--</option>
</select>日

<script>
	function initSelect(selectEl, i, end) {
		selectEl.length = 1;
		for (; i <= end; i++) {
			try {
				selectEl.add(new Option(i, i), null);
			} catch (e) {
				selectEl.add(new Option(i, i));
			}
		}
	}
	var year = document.getElementById("year");
	var month = document.getElementById("month");
	var day = document.getElementById("day");
	
	initSelect(year, 1970, 2012);
	
	year.onchange = function() {
		if (this.value != 0) {
			initSelect(month, 1, 12);
		} else {
			month.length = 1;
			day.length = 1;
		}
	}
	month.onchange = function() {
		if (this.value != 0) {
			var m30 = {
				2 : 1,
				4 : 1,
				6 : 1,
				9 : 1,
				11 : 1
			};
			if (this.value == 2) { // 二月份特别处理
				if (isLeapYear(year.value)) 
					 initSelect(day, 1, 29);
				else initSelect(day, 1, 28);
			} else if (this.value in m30) // 三十天的月份
			/*
			因为2、4、6、9、11月份都是30天，如果把它们放在一个数组中，那么还要遍历来判断是否相等，则比较麻烦了，于是在这里把这些都当成对象来处理，使用 in 判断即可
			*/
					 initSelect(day, 1, 30);
			else 	 initSelect(day, 1, 31);
		} else day.length = 1;
	}
	// 判断闰年的条件：能被4整除且不能被100整除 或 能被100整除且能被400整除
	function isLeapYear(y) {
		return (y % 4 == 0 && y % 100 != 0)
			|| (y % 100 == 0 && y % 400 == 0);
	}
</script>

5、Tab 多选项卡

主要控制 tab display:block/none 来显示与隐藏，原理比较简单。使用方法：new SimpleTab(document.querySelector('.tab2')).jump(0);。点击查看在线例子。

代码比较长，所以只贴 JS 部分。完整代码参见 HTML。

/--------------------公共方法 -------------START
var emptyStr = '';
// 允许用户输入 .abc/abc 的 CSS Selector，推荐 abc 即可
function removeFirstDot(str){
	if(str && str.charAt(0) === '.'){
		var arr = str.split(emptyStr);
		arr.shift();
		return arr.join(emptyStr);
	}
	
	return str;
}
	
/**
 * 增加元素样式。
 * @param {String} cls
 */
Element.prototype.addCls = function (cls) {
	cls = removeFirstDot(cls);

	var _cls = this.className;
	if (_cls.indexOf(cls) === -1) {
		// not found, so add it
		if (_cls === '')this.className = cls;
		else this.className += ' ' + cls;
	}
}

/**
 * 移除元素样式。
 * @param {String} cls
 */
Element.prototype.removeCls = function (cls) {
	cls = removeFirstDot(cls);
	var _cls = this.className;
	var reg = new RegExp('\\s?\\b' + cls + '\\b', 'ig');
	if (reg.test(_cls)) 
		this.className = _cls.replace(reg, '');// remove it
}
 
/--------------------公共方法 -------------END

SimpleTab = function(container) {
	this.el = container;
	var ul = container.querySelector('ul');
	this.buttons = ul.children, // tab候选栏strip
	this.tabs = container.querySelector('.content').children;
	ul.onclick = onTabChooserPressHandler.bind(this);
}

/**
 * 跳到指定的 tab，仿佛好象点击那样
 * @param {int} index
 */
SimpleTab.prototype.jump = function(index){
	var btn = this.buttons[index];
	onTabChooserPressHandler.call(this, {
		target : btn,
		currentTarget : this.el.querySelector('ul')
	});
}

var onPressed_ClassName = 'selected';
// 登记的单击事件是整个 tan panel
function onTabChooserPressHandler(e) {
	// 搜索 el 下的 li 元素，到容器为止
	var el = e.target;
	if (el.tagName != 'LI') return;

	var buttons = e.currentTarget.children, // tab候选栏strip
		tabs = e.currentTarget.parentNode.querySelector('.content').children;
	!buttons.length && console.log('该控件未发现任何 strip。');
	
	for (var nextIndex = 0, j = buttons.length; nextIndex < j; nextIndex++)
		if (buttons[nextIndex] == el)
			break; // 获取 nextIndex
			
	// 查找与 index 相等的 item 设置其高亮，否则移除样式。
	var btn, showTab;
	for (var i = 0, j = buttons.length; i < j; i++) {
		btn = buttons[i], showTab = tabs[i];
		// debugger;
		if (nextIndex == i && btn.className.indexOf(onPressed_ClassName) == -1) { // 找到目标项
			btn.addCls(onPressed_ClassName);
			showTab.addCls(onPressed_ClassName);
			this.currentIndex = i; // 保存当前游标

		
		} else if (btn == el && btn.className.indexOf(onPressed_ClassName) != -1) {
			// 已在当前项
		} else if (btn.className.indexOf(onPressed_ClassName) != -1) {
			btn.removeCls(onPressed_ClassName);
			showTab.removeCls(onPressed_ClassName);
		}
	}
}

new SimpleTab(document.querySelector('.tab2')).jump(0);

6、全屏幕遮罩及 ESC 键盘事件响应

一般这是全局性的组件，设置为“单例”即可。全屏幕基本是 CSS 还有一个 JS 的小尾巴，因为似乎用 CSS 不容易设置高度，用 JS 做还是比较可行的。点击查看在线例子。

<meta charset="UTF-8">
<title>全屏幕遮罩及 ESC 键盘事件响应</title>

<div class="mask"></div>

<style>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999999;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>

<script>
     // 获取页面内容高度赋予 mask
    document.querySelector('.mask').style.height = document.body.scrollHeight + 'px';
	
    // 键盘事件
    function onEnterAndEsc(e){
        e = e || event;
        var keycode = e.which || e.keyCode;
        switch(keycode){  
            case 13: //enter   
            	// 如果 form 里有 action，按下回车自动提交
     			// ...
            break;
            case 339: //exit   
            case 340: //back    
            case 27:
            	var mask = document.querySelector('.mask');
            	mask.parentNode.removeChild(mask);
        } 
    }
		
    document.onkeydown = onEnterAndEsc;
</script>

7、消息对话框

和这里其他的组件一样，对话框也是一个非常雏形的组件，仅仅完成了 fixed 定位、居中、关闭这几样功能，——可能样式方面的代码还着墨的比较多。至于背景遮罩，前面一个例子就有，有兴趣的童鞋可以看看怎么把两者组装起来。另外对话框拖放也是一个功能点，咱们在第一个例子的时候已经有介绍了。动手能力强的童鞋也可以试着自己把它们封装在一起，形成完整的对话框组件——这里就不再赘述了。点击查看在线例子。

<meta charset="UTF-8">
<title>MsgBox</title>

<div class="msgbox">
	<h1>确认</h1>
	<div class="topCloseBtn closeAction">×</div>
	<div class="inner">
		益力多，你今日饮左未？
	</div>
	<div class="btn">
 		<div class="closeAction">确认</div>
	</div>
</div>


<style>
	.msgbox {
		position: fixed;
		background-color: #ebebeb;
		border: 1px solid #d3d3d3;
		width: 50%;
		min-width: 300px;
		max-width: 400px;
		z-index: 99999999;
		margin: auto;
		min-height: 100px;
	}
	
	.msgbox h1 {
		font-size: .9rem;
		text-align: center;
		padding: 5px 0;
		letter-spacing: 3px;
	}
	
	.msgbox .topCloseBtn {
		position: absolute;
		text-align: center;
		top: 0;
		right: 10px;
		width: 16px;
		line-height: 16px;
		height: 16px;
		background-color: gray;
		color: white;
		cursor: pointer;
	}
	.msgbox .inner {
		margin: 5px;
		margin-top: 0;
		padding: 10px;
		overflow: hidden;
		background-color: #f7f7f7;
		text-align: center;
		border: 1px solid #dadada;
		min-height:50px;
		line-height:50px;
	}
	.msgbox .btn {
		margin: 5px auto;
		width: 70%;
		overflow: hidden;
		text-align: center;
	}
 
	.msgbox .btn > div {
		display: inline-block;
		max-width: 80px;
		cursor: pointer;
		text-align: center;
		border: 1px solid #d3d3d3;
		padding: 3px 10px;
		letter-spacing: 3px;
		box-sizing: border-box;
		background-color: #f7f7f7;
		font-size: .9rem; 
	}
</style>

<script>
function MsgBox(msgbox) {
	// 计算居中
	msgbox.style.left = (window.innerWidth / 2 - msgbox.clientWidth / 2) + 'px';
	msgbox.style.top = (window.innerHeight / 2 - msgbox.clientHeight / 2) + 'px';
	
	// 平均分按钮宽度
	var btn = msgbox.querySelector('.btn'), btns = msgbox.querySelectorAll('.btn>div');
	var j = btns.length, width = btn.clientWidth / j - 12; // 要减去间隙
 
	// 登记关闭事件
	[].forEach.call(msgbox.querySelectorAll('.closeAction'), function(closeBtn){
		closeBtn.onclick = function(){
			msgbox.parentNode.removeChild(msgbox);
		}
	});
}
	
new MsgBox(document.querySelector('.msgbox'));
</script>

8、跑马灯 Carousel 轮播

跑马灯是个经典的效果，几乎每个网站、APP 都会用到，我们应该要好好掌握跑马灯实现的算法。一种最普遍的思路：把图片们用 ul 之类（div 亦可）的包起来，并设置 float，然后设置这个 ul 本身为 absolute 定位，其父标签用 relative 定位。通过设置 ul 的 left 或 top 值，从而实现图片队列的滚动效果。点击查看在线例子。

<meta charset="UTF-8">
<title>carousel</title>

<div class="carousel">
	<div>
		<div>
			<a href="topic/?id=283">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150919114717260.jpg">
			</a>
		</div>
		<div>
			<a href="live/?id=3">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150918214948448.png">
			</a>
		</div>
		<div>
			<a href="topic/?id=346">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150910171423733.png">
			</a>
		</div>
		<div>
			<a href="topic/?id=345">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150909172539065.jpg">
			</a>
		</div>
		 
	</div>
</div>

<style>
	.carousel{
		height:250px;
		width:600px;
		overflow:hidden;
		position: relative;
	}
	
	.carousel > div{
		left:0;
		position:absolute;
		white-space: nowrap;
		transition: 200ms left linear;
		-moz-transition: 200ms left linear;
		-o-transition: 200ms left linear;
		-ie-transition: 200ms left linear;
		-webkit-transition: 200ms left linear;
	}
	
	.carousel > div > div{
		float: left;
	}
	.carousel > div > div img {
		width: 100%;
	}
</style>

<script>
function Carousel(el) {
	var containerWidth = el.clientWidth, 
		mover = el.querySelector('div'),
		items = mover.children, len = items.length;
	
    // 设置 mover 和 item 宽度。初始化时候运行。
    for (var i = 0; i < len; i++) {
        items[i].style.width = containerWidth + 'px'; // 设置item 宽度
    }
    mover.style.width = containerWidth * len  + 'px'; // 总宽度，也是容器中最宽的宽度。赋予给 mover。
    var count = 0;
    setInterval(function(){
    	if(++count == len)count = 0;
    	mover.style.left = -count * containerWidth + 'px';
    }, 2000);
}
	
new Carousel(document.querySelector('.carousel'));
</script>