模仿优酷首页的一些前端布局

发布时间：2018-06-20, 09:40:13 分类：HTML | 编辑 off 网址 | 辅助

图集1/4

正文 7496字数 1,715,488阅读

首页图片播放gif动图
在线生成合并图片图片宽度x高度建议比例 435:245

<style>
.p-thumb{
	position:relative;
	width: 192px;
    height: 108px;
	overflow:hidden;
	float:left;
}
.p-thumb img {
    width: 100%;
    height: 100%;
}
.quick-process {
    width: 95%;
    height: 5px;
    z-index: 10;
    position: absolute;
    margin: 5px auto 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.bg-process{
	position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 100%;
    background: #000;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
    opacity: .5;
}
.rate-process {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #FFF;
    display: block;
}
.quick-view-layer{display:none;width:100%;height:100%;}
.p-thumb .bg {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 46px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAYAAADp73NqAAAAAXNSR0IArs4c6QAAAC1JREFUCB1jYCAEWJiAKtAIZpAYKxYJsDqwBFgJmjacXDTz0Likm4ewCKyXCQBc7QDuqt9S0QAAAABJRU5ErkJggg==) repeat-x;
}
.p-thumb a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-decoration: none;
    color: #fff;
    z-index: 2;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAM1BMVEVHcEwgwf8fwf8ewP8kxf8ewf8hwf8ewP8rzf8fv/8gwf8ewP8ewP8ewP8fwP8ewP8ev/9RwZ8zAAAAEHRSTlMAOEzPFGkk+Ap4XefwtcHb4XOsowAAAFhJREFUGNN90dsSgCAIBFCspLSL+/9fWyNNZbPIG+eFBUREtOCqOUhTtw6tTlzHjmbrErDqo/jpclSNphHYgq971WSamTKMPfsMYpF4eLamfxB2OvXtfccJAmUJw6aLTA0AAAAASUVORK5CYII=) 8px 8px no-repeat;
}
</style>

<div class="p-thumb">
    <a href="javascript:void(0)" data-href="#">
		<img src="https://out.img.pan.lizhenqiu.com/Fqx-K2N299LjRzxdYoxC6BxgF_Pv" style="display:none;">
		<div class="quick-view-layer" style="background:url(https://out.img.pan.lizhenqiu.com/Fqx-K2N299LjRzxdYoxC6BxgF_Pv);background-size:576px;">
			<div class="quick-process">
				<i class="bg-process"></i>
				<span class="rate-process"></span>
			</div>
		</div>
	</a>
    <i class="bg"></i>
    <img class="quic" src="https://out.img.pan.lizhenqiu.com/ae19105067a753001e919dab9cccc4b3">
</div>

<div class="p-thumb" style="margin-left:20px;">
    <a href="javascript:void(0)" data-href="#">
		<img src="https://out.img.pan.lizhenqiu.com/Fp2-U7lhF2YjqXR0WZAyUdI2_RIc" style="display:none;">
		<div class="quick-view-layer" style="background:url(https://out.img.pan.lizhenqiu.com/Fp2-U7lhF2YjqXR0WZAyUdI2_RIc);background-size:576px;">
			<div class="quick-process">
				<i class="bg-process"></i>
				<span class="rate-process"></span>
			</div>
		</div>
	</a>
    <i class="bg"></i>
    <img class="quic" src="https://out.img.pan.lizhenqiu.com/FlwsHBYbBXFzfIXE6Pt2kWn5KcHT">
</div>

<script type="text/javascript">
	window.onload = function(){	
		var oZuolist=document.getElementsByClassName('p-thumb');
			for(var i=0;i<oZuolist.length;i++){
				oZuolist[i].onmousemove=function(ev){
					var imgcss=this.getElementsByClassName("quick-view-layer")['0'];
					imgcss.style.display='block';
					this.getElementsByClassName("quic")['0'].style.display='none';
					var pw=24;//每个区块宽度 192/8
					var pn=8;//总区块
					//console.log(ev.offsetX);//.path['0']['className']
					
					var lwnum=Math.abs((ev.offsetX)/pw);
					var lw=lwnum/pn;//当前进度%
					lw=lw || 0.03;
					
					this.getElementsByClassName("rate-process")['0'].style.width=lw*100+'%';
					
					var imgpw=Math.ceil(lwnum);
					var imgpwp=192;//背景每个区块宽度 576/3
					
					if(imgpw<3){
						//imgcss.style.backgroundPositionY='0px';
						//imgcss.style.backgroundPositionX='-'+imgpw*imgpwp+'px';
						imgcss.style.backgroundPosition='-'+imgpw*imgpwp+'px '+'0px';
					}else{
						imgcss.style.backgroundPosition='-'+(imgpw-3)*imgpwp+'px '+'-108px';;
					}
					
					//注意涉及到这个对象不能使用oZuolist[i],要用this代替
				}
				oZuolist[i].onmouseout=function(ev){
					this.getElementsByClassName("quick-view-layer")['0'].style.display='none';
					this.getElementsByClassName("quic")['0'].style.display='block';
				}
			
			}
	}
</script>

Run code

Cut to clipboard

<link href="//img.alicdn.com/tfs/TB1u5jLkMoQMeJjy0FpXXcTxpXa-200-200.jpg" rel="apple-touch-icon-precomposed" />

      <script type="text/javascript">
        // 去掉860的栅格 ipad
        (function(d) { 
            var isMobile = !!((navigator.userAgent.toLowerCase().match(/android/i) || [''])[0]);
            /*检查移动设备是否为移动设备*/
            if (navigator.userAgent.indexOf('iPad') > -1 || isMobile) {
                var m = d.createElement('meta');
                m.setAttribute('name', 'viewport');
                m.setAttribute('content', 'width=1210px');
                d.head.appendChild(m);
                d.body.className += ' w1058';
            }else{
                var b = d.body;
                var c = b.className || '';
                var w = (d.documentElement || b).clientWidth;

                if(w >= 1830){
                    c += 'w1740';
                }else if( w <= 1830 && w > 1580){
                    c += 'w1490 ';
                }else if( w <= 1580 && w > 1292){
                    c += ' w1202 ';
                }else if( w <= 1292 ){
                    c += 'w1058';
                }
                b.className = c;
            }
        })(document);
        var ykQHeader = {
          ltrim:function(s){ return s.replace( /^(\s*|　*)/, "") },
          rtrim:function(s){ return s.replace( /(\s*|　*)$/, "") },
          trim:function(s){ return this.ltrim(this.rtrim(s));},
          doSearch: function () {
            this.form = document.getElementById('qheader_search');
            if(!this.form){ return; }
            this.input = this.form.getElementsByTagName('input')[0];
            var q = this.trim(this.input.value), url = '',
                    stat = 'spm=a2hww.11359951.#qheader_search~10';
            if (window.logPvid) {
                stat += '&_rp=' + window.logPvid;
            }

            if (q == '') {
                url = '//www.soku.com?inner' + ('&' + stat);
            } else {
                if (this.form.action.indexOf('/q_') === -1) {
                    q = encodeURIComponent(q);
                    url = this.form.action + '/q_' + q + ('?' + stat);
                } else {
                    url = this.form.action + ('&' + stat);
                }
            }
            window.open(url);
            this.form.action = '//www.soku.com/search_video';
            return false;
          }
        }
      </script>

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

标签: 布局11 前端15 首页2 优酷2 模仿2

有过 11 条评论 »

广西河池市宜州市 2018-08-09, 11:08:14

模仿网易梦幻西游游戏西游记师徒四人行走动画css效果 gif背景动画图片唐僧孙悟空猪八戒沙和尚西天取经

<style>

.west-01 {
	position: absolute;
	width: 200px;
	height: 180px;
	left: 50%;
	margin-left: -398px;
	top: 352px;
	background-image: url(https://out.img.pan.lizhenqiu.com/FqDMTm_8I03UBd6Lx-cY9FaIB99m);
	background-repeat: no-repeat;
	-webkit-animation: play01 1.4s steps(8) infinite;
	-moz-animation: play01 1.4s steps(8) infinite;
	-ms-animation: play01 1.4s steps(8) infinite;
	animation: play01 1.4s steps(8) infinite
}

@-webkit-keyframes play01 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@-moz-keyframes play01 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@-o-keyframes play01 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@-ms-keyframes play01 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@keyframes play01 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

.west-02 {
	position: absolute;
	width: 200px;
	height: 180px;
	left: 50%;
	margin-left: -198px;
	top: 356px;
	background-image: url(https://out.img.pan.lizhenqiu.com/Fjr4nM2HtaFF-XM-oabkVJBL-U1z);
	background-repeat: no-repeat;
	-webkit-animation: play02 1.4s steps(8) infinite;
	-moz-animation: play02 1.4s steps(8) infinite;
	-ms-animation: play02 1.4s steps(8) infinite;
	animation: play02 1.4s steps(8) infinite
}

@-webkit-keyframes play02 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@-moz-keyframes play02 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@-o-keyframes play02 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@-ms-keyframes play02 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

@keyframes play02 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1600px 0
	}
}

.west-03 {
	position: absolute;
	width: 170px;
	height: 240px;
	left: 50%;
	margin-left: -11px;
	top: 326px;
	background-image: url(https://out.img.pan.lizhenqiu.com/Ft1ZQTkZbB535lBwZ4vjVhWU5ol6);
	background-repeat: no-repeat;
	-webkit-animation: play03 1.4s steps(8) infinite;
	-moz-animation: play03 1.4s steps(8) infinite;
	-ms-animation: play03 1.4s steps(8) infinite;
	animation: play03 1.4s steps(8) infinite
}

@-webkit-keyframes play03 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1360px 0
	}
}

@-moz-keyframes play03 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1360px 0
	}
}

@-o-keyframes play03 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1360px 0
	}
}

@-ms-keyframes play03 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1360px 0
	}
}

@keyframes play03 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1360px 0
	}
}

.west-04 {
	position: absolute;
	width: 210px;
	height: 200px;
	left: 50%;
	margin-left: 198px;
	top: 372px;
	background-image: url(https://out.img.pan.lizhenqiu.com/FjTycCEEtOfP7JYjlvAybcZVFYqh);
	background-repeat: no-repeat;
	-webkit-animation: play04 1.4s steps(8) infinite;
	-moz-animation: play04 1.4s steps(8) infinite;
	-ms-animation: play04 1.4s steps(8) infinite;
	animation: play04 1.4s steps(8) infinite
}

@-webkit-keyframes play04 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1680px 0
	}
}

@-moz-keyframes play04 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1680px 0
	}
}

@-o-keyframes play04 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1680px 0
	}
}

@-ms-keyframes play04 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1680px 0
	}
}

@keyframes play04 {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: -1680px 0
	}
}

</style>
<div class="west-01"></div>
<div class="west-02"></div>
<div class="west-03"></div>
<div class="west-04"></div>

Run code

Cut to clipboard

reply | quote | #¹

广西河池市宜州市 2018-06-20, 16:03:30

con.style.backgroundPosition=x+"px "+y+"px";
可以兼容所有的浏览器，但要注意第一个“px ”中有一个空格

Run code

Cut to clipboard

#,广西河池市宜州市,2018-06-20,16:03:54,

直接获取

document.querySelectorAll("div.aa")
类似属性选择器的写法

document.querySelectorAll("div[class='aa']")
补充一下还可以not选择器

document.querySelectorAll(".aa:not(ul)")

Run code

Cut to clipboard

#,广西河池市宜州市,2018-06-20,16:04:36,

//将NodeList转换成Array
    function transformList(list) {
        var arr = [];
        for(var i = 0; i < list.length; i++) {
            arr.push(list[i]);
        }
        return arr;
    }
    //查找一个父节点下指定类名的子节点
    function getParentdElement(parentNode, childName) {
        //如果父节点parentNode含有指定类名childName，这个节点就是目标节点
        if (parentNode.className.search(childName) !== -1) {
            console.log("if------");
            console.log(parentNode);
            return parentNode;
        } else {
            //父节点不含有指定类名childName，递归查找它的子节点。
            var nodes = parentNode.childNodes;
            //将子节点的list转换成标准数组并且过滤掉Text元素
            nodes = transformList(nodes).filter(function(item){
                if(item.nodeType !== 3) {
                    return item;
                } else{ }
            });
            //如果子节点数组中有值，则递归查找
            if(nodes.length) {
                nodes.forEach(function(item) {
                    getParentdElement(item, childName);
                });
            }
            console.log("else------");
            console.log(nodes);
        }
    }
    console.log(getParentdElement(document.querySelector(".parent"), "right"))

Run code

Cut to clipboard

reply | quote | #²

广西河池市宜州市 2018-06-20, 16:05:28

jq和js用mousemove获取鼠标当前位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jq获取鼠标的位置</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: #585858;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">

</div>
</body>
<script type="text/javascript">
    $('#d').mousemove(function(f){
       /* var xx = f.originalEvent.x|| f.originalEvent.layerX||0;
        var yy = f.originalEvent.y|| f.originalEvent.layerY||0;*/
        var xx = f.pageX;
        var yy = f.pageY;
        $(this).text(xx+','+yy);
    })
    /*根据出现的“originalEvent”一词可猜测题主的本意是比较jquery下
    e.pageX和e.originalEvent.x的区别（因为originalEvent是jq在对构造一个jq版e对象后引用的原始e对象）。

     根据jq源码，jq版e对象下的pageX和原生的pageX是一致的，但是增加了对旧版本IE的实现部分。

     于是题目可蜕化为原生e.pageX与e.x的区别，以及jq为IE8-浏览器实现的e.pageX与原生e.x的区别。
     考虑jq的跨平台特性，我们在不清楚具体情况的时候，直接通过其补丁的实现方式来猜测属性的定义。

     根据jq对无原生pageX的浏览器的补丁实现
     event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 )
     - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
     到这里我们已经基本清楚pageX的涵义，是包含了滚动条的计算的。

     实际上，e.pageX在各（支持的）浏览器下的表现都是一致的，都是表达点击位置相对于整个文档的位置，用题主的话说就是“计算了滚动条”。
     兼容性来说，e.pageX除了在IE系列中低于IE9的版本中是不支持的，IE9+和其它主流浏览器全部一致支持。

     可是e.x的情况很复杂……
     首先，fx不支持e.x。这没啥好说的。

     其次，除IE外的其它主流浏览器，opera、chrome（以及其它同内核的浏览器），都支持e.x属性,
     其值为“相对可视区域的坐标”——没错，对它们来说，e.x == e.clientX。用题主的话说就是“没有计算滚动条”。

     再来看看e.x属性的发明者IE。IE全系列支持e.x
     被点击对象所在的坐标系（即最近一个指定position: relative的tag的左上角的border外边界为原点）的坐标位置。
     如果自身及上层均没有指定position: relative属性，则蜕变为相对于“相对可视区域的坐标”。

     题外话，通过F12发现，IE一旦涉及滚动条后计算居然不是整像素数，而是会出现误差小数的！*/
</script>
</html>

<!--<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript获得鼠标位置</title>
</head>
<body>
<script>
function mouseMove(ev)
{
Ev= ev || window.event;
var mousePos = mouseCoords(ev);
document.getElementById("xxx").value = mousePos.x;
document.getElementById("yyy").value = mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
</script>
鼠标X轴:
<input id=xxx type=text>
鼠标Y轴:
<input id=yyy type=text>
</body> -->

Run code

Cut to clipboard

#,广西河池市宜州市,2018-06-20,16:07:00,
javascript判断鼠标移动的方向（左，上，右，下）

function(wrap){  
        var wrap = document.getElementById(wrap);  
        var hoverDir = function(e){  
            var w = wrap.offsetWidth,  
                h = wrap.offsetHeight,  
                x = ( e.clientX - wrap.offsetLeft - ( w / 2 ) ) * ( w > h ? ( h / w ) : 1 ),  
                y = (e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1),  
                // 上(0) 右(1) 下(2) 左(3)  
                direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3 ) % 4,  
                eventType = e.type,  
                dirName = new Array('上方','右侧','下方','左侧');  
            if( e.type == 'mouseover' || e.type == 'mouseenter' ){  
                wrap.innerHTML = dirName[direction] + '进入';  
            }else{  
                wrap.innerHTML = dirName[direction] + '离开';  
            }  
        }  
        if( window.addEventListener ){  
            wrap.addEventListener( 'mouseover',hoverDir,false );  
            wrap.addEventListener( 'mouseout',hoverDir,false );  
        }else if( window.attachEvent ){  
            wrap.attachEvent( 'onmouseenter',hoverDir );  
            wrap.attachEvent( 'onmouseleave',hoverDir );  
        }  
    }

Run code

Cut to clipboard

核心是 Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) 返回四个值

#,广西河池市宜州市,2018-06-20,16:07:23,@1,
左右还可用正负值判断方向

#,广西河池市宜州市,2018-06-20,16:07:57,

        n[0].onload = function() {
            n.data("loaded", true);
            r.on("mousemove",
            function(e) {
                if (!n.data("loaded")) return;
                var t, r, i, o, l, c;
                c = $(this).width();
                if (a.width != c) {
                    u.widthCover = c;
                    u.heightCover = c / u.scale;
                    r = $(this).offset().left;
                    n.css({
                        width: 3 * u.widthCover + "px",
                        height: 3 * u.heightCover + "px"
                    });
                    a.width != c
                }
                t = Math.abs(e.pageX - r + 5);
                f = t * 100 / u.widthCover;
                f = f > 100 ? 100 : f;
                s.css({
                    width: f + "%"
                });
                i = Math.floor(t * 7 / u.widthCover);
                o = -1 * (i % 3) * u.widthCover;
                l = -1 * Math.floor(i / 3) * u.heightCover;
                if (a.left == o && a.top == l) {
                    return
                } else {
                    a.left = o;
                    a.top = l
                }
                n.css({
                    left: o + "px",
                    top: l + "px"
                })
            });
            r.show()
        }

Run code

Cut to clipboard

reply | quote | #³

广西河池市宜州市 2018-06-20, 16:08:28

js取整数、取余数的方法

1.丢弃小数部分,保留整数部分

parseInt(5/2)

2.向上取整,有小数就整数部分加1

 Math.ceil(5/2)

3,四舍五入.

Math.round(5/2)

4,向下取整

 Math.floor(5/2)

Math 对象的方法
FF: Firefox, N: Netscape, IE: Internet Explorer

方法 描述 FF N IE
abs(x) 返回数的绝对值 1 2 3
acos(x) 返回数的反余弦值 1 2 3
asin(x) 返回数的反正弦值 1 2 3
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 1 2 3
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间） 1 2 3
ceil(x) 对一个数进行上舍入。 1 2 3
cos(x) 返回数的余弦 1 2 3
exp(x) 返回 e 的指数。 1 2 3
floor(x) 对一个数进行下舍入。 1 2 3
log(x) 返回数的自然对数（底为e） 1 2 3
max(x,y) 返回 x 和 y 中的最高值 1 2 3
min(x,y) 返回 x 和 y 中的最低值 1 2 3
pow(x,y) 返回 x 的 y 次幂 1 2 3
random() 返回 0 ~ 1 之间的随机数 1 2 3
round(x) 把一个数四舍五入为最接近的整数 1 2 3
sin(x) 返回数的正弦 1 2 3
sqrt(x) 返回数的平方根 1 2 3
tan(x) 返回一个角的正切 1 2 3
toSource() 代表对象的源代码 1 4 -
valueOf() 返回一个 Math 对象的原始值

Run code

Cut to clipboard

reply | quote | #⁴

广西河池市宜州市 2018-06-20, 16:10:13

 var oZuolist = document.getElementsByClassName('zuo2');
for(var i=0;i<oZuolist.length;i++){
oZuolist[i].onmouseover=function(){
//注意涉及到这个对象不能使用oZuolist[i],要用this代替
}
}

Run code

Cut to clipboard

var oZuo = document.getElementsByClassName('zuo2'); 获取的是一个dom集合 而不是一个dom 对象，你无法对js的集合绑定事件
var oZuo = document.getElementsByClassName('zuo2')[0]; 就可以

Run code

Cut to clipboard

reply | quote | #⁵

广西河池市宜州市 2018-06-20, 16:12:18

Jquery 兼容写法
jQuery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent

$(function(){  
    $("#box").mousedown(function(event){  
        console.log(event.offsetX, event.offsetY);  
        console.log(event.clientX, event.clientY);  
        console.log(event.pageX, event.pageY);  
        console.log(event.screenX, event.screenY);  
  
        /* firefox */  
        console.log(event.originalEvent.layerX, event.originalEvent.layerY);  
    });  
});

Run code

Cut to clipboard

reply | quote | #⁶

广西河池市宜州市 2018-06-20, 16:13:14

<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var nodes=obox.getElementsByTagName("*");
  oshow.innerHTML=nodes.length;
}
</script>

Run code

Cut to clipboard

reply | quote | #⁷

广西河池市宜州市 2018-06-21, 17:42:21

PHP判断文件是否为图片

<?php # Script -- isimg3.php

/* Author @ Huoty
 * Date @ 2015-11-25 16:53:04
 * Brief @ 
 */

$mimetype = exif_imagetype("1.jpg");
if ($mimetype == IMAGETYPE_GIF || $mimetype == IMAGETYPE_JPEG || $mimetype == IMAGETYPE_PNG || $mimetype == IMAGETYPE_BMP)
{
 echo "是图片";
}

Run code

Cut to clipboard

IMAGETYPE_GIF
IMAGETYPE_JPEG
IMAGETYPE_PNG
IMAGETYPE_SWF
IMAGETYPE_PSD
IMAGETYPE_BMP
IMAGETYPE_TIFF_II（Intel 字节顺序）
IMAGETYPE_TIFF_MM（Motorola 字节顺序）
IMAGETYPE_JPC
IMAGETYPE_JP2
IMAGETYPE_JPX
IMAGETYPE_JB2
IMAGETYPE_SWC
IMAGETYPE_IFF
IMAGETYPE_WBMP
IMAGETYPE_XBM

Run code

Cut to clipboard

reply | quote | #⁸

广西河池市 2018-06-23, 11:52:38

鼠标移动刻度线，刻度标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动刻度线</title>
</head>
<body onload="init()">
<div>
    <canvas id="scaleLine" width=450 height=60 style="border:1px solid grey;"></canvas>
</div>

<script>
    var myCanvas = document.getElementById("scaleLine"), ctx = myCanvas.getContext("2d");
    var w = 420, h = 60, x, y, ax, ay;

    //画刻度线,刻度值
    function draw() {
        ctx.clearRect(0, 0, 450, h);
        var max = parseInt(9), min = parseInt(1);
        var ratio = (max - min) / 400;    //0.02
        var tickSize = 50, tickCnt = 9;
        var unit = tickSize * ratio;    //1
        ctx.beginPath();
        ctx.moveTo(20, 30);
        ctx.lineTo(w, 30);
        for (var i = 0; i < tickCnt; i++) {
            ctx.moveTo(20 + tickSize * i, 35);
            ctx.lineTo(20 + tickSize * i, 25);
            ctx.textAlign = 'center';
            ctx.fillText((min + unit * i), 20 + tickSize * i, 20);
            ctx.fillStyle = 'green';
        }
        ctx.stroke();
        ctx.closePath();
    }

    //画标识圆圈
    function drawArc(x, y) {
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.arc(x, y, 5, 0 * Math.PI, 2 * Math.PI);
        ctx.fillStyle = "red"
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
    };

    //事件绑定，鼠标按下
    myCanvas.onmousedown = function (e) {
        //事件绑定，鼠标移动
        myCanvas.onmousemove = function (e) {
            x = e.offsetX;
            y = e.offsetY;
            if (x < 20) {   //限定X方向移动位置，只能在刻度线上移动
                ax = 20
            } else if (x > 420) {
                ax = 420
            }
            (x < 420 && x > 20) ? x = e.offsetX : x = ax;
            y = 30;     //Y方向坐标值限定，只能在刻度线上移动

            //先清除之前图像，然后重新绘制
            ctx.clearRect(0, 0, w, h);
            draw();
            drawArc(x, y);
        };
        //事件绑定，鼠标松开。同时清除myCanvas绑定事件
        myCanvas.onmouseup = function () {
            myCanvas.onmousemove = null;
            myCanvas.onmouseup = null;
        };
    }

    //页面加载完成，初始化方法
    function init() {
        draw()
        drawArc(20, 30);
    }
</script>
</body>
</html>

Run code

Cut to clipboard

reply | quote | #⁹

Records:11 1/2 «‹1 2 ›»

lizhenqiu blog

模仿优酷首页的一些前端布局

相关日志

有过 11 条评论 »

留下評論