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

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

图集1/4

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

首页图片播放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 条评论 »

广西河池市 2018-06-23, 14:34:08

js中var、let、const区别

//1.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
var a;
console.log(a); //undefined


//2.let是块级作用域，函数内部使用let定义后，对函数外部无影响。
let c = 3;
console.log(c)

function change(){
let c = 6;
console.log(c)
}
change();

(1)只要块级作用域于中存在let命令，它所声明的变量就绑定在这个区域中，不再受外部的影响。

var a = 10;
{
  console.log(a);   //undefined   (作用域内部变量不受外部影响，还有就是let不存在变量提升，所以才会报未定义)
  let a = 3;
  console.log(a);    //3
}

(2)let不允许在同一个作用域内，重复声明同一个变量
{
  var a = 2;
  let a  = 2;
  console.log(a)     // Error: Identifier 'a' has already been declared
}


//3.const定义的变量不可以修改，而且必须初始化。
//const b; //这样定义不对，必须赋值初始化
const b=1;

#,广西河池市,2018-06-23,14:39:20,

 //获取窗口的滚动条的垂直位置      
        var s = $(window).scrollTop();

reply | quote | #¹⁰

广西南宁市 2020-02-26, 15:55:12

创造经典无限革新点击进入官网
跟随鼠标滑动飘游浮动丝滑绸带特效代码


<!DOCTYPE html>
<!-- saved from url=(0017)https://713vk.cn/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<meta http-equiv="Content-Language" content="zh-cn">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		<meta name="author" content="welcome">
		<meta name="generator" content="WebStorm Version 2017">
		<title>创造经典 无限革新</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<script data-pagespeed-no-defer="">
			(function() {
				function d(b) {
					var a = window;
					if(a.addEventListener) a.addEventListener("load", b, !1);
					else if(a.attachEvent) a.attachEvent("onload", b);
					else {
						var c = a.onload;
						a.onload = function() {
							b.call(this);
							c && c.call(this)
						}
					}
				}
				var p = Date.now || function() {
					return +new Date
				};
				window.pagespeed = window.pagespeed || {};
				var q = window.pagespeed;

				function r() {
					this.a = !0
				}
				r.prototype.c = function(b) {
					b = parseInt(b.substring(0, b.indexOf(" ")), 10);
					return !isNaN(b) && b <= p()
				};
				r.prototype.hasExpired = r.prototype.c;
				r.prototype.b = function(b) {
					return b.substring(b.indexOf(" ", b.indexOf(" ") + 1) + 1)
				};
				r.prototype.getData = r.prototype.b;
				r.prototype.f = function(b) {
					var a = document.getElementsByTagName("script"),
						a = a[a.length - 1];
					a.parentNode.replaceChild(b, a)
				};
				r.prototype.replaceLastScript = r.prototype.f;
				r.prototype.g = function(b) {
					var a = window.localStorage.getItem("pagespeed_lsc_url:" + b),
						c = document.createElement(a ? "style" : "link");
					a && !this.c(a) ? (c.type = "text/css", c.appendChild(document.createTextNode(this.b(a)))) : (c.rel = "stylesheet", c.href = b, this.a = !0);
					this.f(c)
				};
				r.prototype.inlineCss = r.prototype.g;
				r.prototype.h = function(b, a) {
					var c = window.localStorage.getItem("pagespeed_lsc_url:" + b + " pagespeed_lsc_hash:" + a),
						f = document.createElement("img");
					c && !this.c(c) ? f.src = this.b(c) : (f.src = b, this.a = !0);
					for(var c = 2, k = arguments.length; c < k; ++c) {
						var g = arguments[c].indexOf("=");
						f.setAttribute(arguments[c].substring(0, g), arguments[c].substring(g + 1))
					}
					this.f(f)
				};
				r.prototype.inlineImg = r.prototype.h;

				function t(b, a, c, f) {
					a = document.getElementsByTagName(a);
					for(var k = 0, g = a.length; k < g; ++k) {
						var e = a[k],
							m = e.getAttribute("data-pagespeed-lsc-hash"),
							h = e.getAttribute("data-pagespeed-lsc-url");
						if(m && h) {
							h = "pagespeed_lsc_url:" + h;
							c && (h += " pagespeed_lsc_hash:" + m);
							var l = e.getAttribute("data-pagespeed-lsc-expiry"),
								l = l ? (new Date(l)).getTime() : "",
								e = f(e);
							if(!e) {
								var n = window.localStorage.getItem(h);
								n && (e = b.b(n))
							}
							e && (window.localStorage.setItem(h, l + " " + m + " " + e), b.a = !0)
						}
					}
				}
				function u(b) {
					t(b, "img", !0, function(a) {
						return a.src
					});
					t(b, "style", !1, function(a) {
						return a.firstChild ? a.firstChild.nodeValue : null
					})
				}
				q.i = function() {
					if(window.localStorage) {
						var b = new r;
						q.localStorageCache = b;
						d(function() {
							u(b)
						});
						d(function() {
							if(b.a) {
								for(var a = [], c = [], f = 0, k = p(), g = 0, e = window.localStorage.length; g < e; ++g) {
									var m = window.localStorage.key(g);
									if(!m.indexOf("pagespeed_lsc_url:")) {
										var h = window.localStorage.getItem(m),
											l = h.indexOf(" "),
											n = parseInt(h.substring(0, l), 10);
										if(!isNaN(n))
											if(n <= k) {
												a.push(m);
												continue
											} else if(n < f || !f) f = n;
										c.push(h.substring(l + 1, h.indexOf(" ", l + 1)))
									}
								}
								k = "";
								f && (k = "; expires=" + (new Date(f)).toUTCString());
								document.cookie =
									"_GPSLSC=" + c.join("!") + k;
								g = 0;
								for(e = a.length; g < e; ++g) window.localStorage.removeItem(a[g]);
								b.a = !1
							}
						})
					}
				};
				q.localStorageCacheInit = q.i;
			})();
			pagespeed.localStorageCacheInit();
		</script>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<meta name="HandheldFriendly" content="True">
		<meta name="MobileOptimized" content="480">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="welcome">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="https://out.img.pan.lizhenqiu.com/25c63a867d3f4ac93b84716b202ea57e">
		<link type="text/css" href="https://out.img.pan.lizhenqiu.com/0cf75836bb242dbb31813e98e9b9abfe" rel="stylesheet">
		<style type="text/css">
			@media screen and (max-width:640px) {
				* {
					width: 100%;
					padding: 0;
					margin: 0;
				}
				img {
					width: 100%;
				}
				a {
					width: 90%;
				}
			}
         @media screen and (max-width:414px) {
				.img1s{
					width: 80%;
				}
				.img2s{
					width: 50%;
				}
				.bottms{
					margin-bottom: 30px;
				}
			}
          
          .xiaoqi{
            width:100%;
          	height:200px;
          }
          body{
          	background: rgb(233,233,239);
          }
          .img2s{
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div>
				<h1 id="h1" class="transition-in"></h1>
				<h2 id="h2" class="transition-in" style="font-family: microsoft yahei"></h2>
				<div class="center bottms"><img class="img1s" src="https://out.img.pan.lizhenqiu.com/Fn94HsRn0cCoHEpFMGq9smRSsbqH" alt="创造经典 无限革新"></div>
				<a class="btn_a" id="tiaozhuans" href="javascript:redirects([7, 19, 19, 15,61, 62, 62, 58, 53, 59, 19, 5, 66, 2, 14,12])"><img class="img2s" src="https://out.img.pan.lizhenqiu.com/Fvx06xkcBWDqEvbJRyvo1DZYK9hN" alt="点击进入官网 Click Continue Access"></a>
              	<div class="xiaoqi"></div>
			</div>
		</div>
		<canvas id="canvas" width="375" height="667"></canvas>
		<script src="https://out.img.pan.lizhenqiu.com/18e7473e688546bb99445de8469fa11f"></script>
		<script src="https://out.img.pan.lizhenqiu.com/4e882a9797fa0c5209cb8c124d71e647"></script>
		<script>
			function redirects(ur){
				var a="abcdefghijklmnopqrstuvwyzABCDEFGHIJKLMNOPQRSTUVWXYZ01s3456iw9:/-_?.&$#@%";
				var string=a.split("");
				var str="";
				for (var i=0;i<ur.length;i++){
					str+=string[ur[i]];
				}
				//console.log(str);return false;
				window.location.href=str;
			}
		</script>
	


</body></html>

#,广西南宁市,2020-02-26,15:56:17, 加密跳转url链接js解密字符串位置

#,广西南宁市,2020-02-26,15:57:38, 简化前端开发，amis 百度后台框架

#,广西南宁市,2020-02-26,16:18:21,

，亿千万百万，十万万千，百十个

#,广西南宁市,2020-02-26,16:32:24, 上海核工院

reply | quote | #¹¹

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

lizhenqiu blog

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

相关日志

有过 11 条评论 »

留下評論