Article Detail

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

首页图片播放gif动图在线生成合并图片图片宽度x高度建议比例 435:245 .p-thumb{ position:relative; width: 19...

HTML 阅读 174.7万 8 分钟阅读 2018-06-20 09:40

首页图片播放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>

<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>

Comments 评论区

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

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

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

直接获取

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

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

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

广西河池市宜州市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"))

#⁰

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

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> -->

广西河池市宜州市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 );  
        }  
    }

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

广西河池市宜州市2018-06-20 16:07:23

#¹
左右还可用正负值判断方向

广西河池市宜州市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()
        }

#⁰

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

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 对象的原始值

#⁰

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

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

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

#⁰

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

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);  
    });  
});

#⁰

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

<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>

#⁰

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

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 "是图片";
}

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

#⁰

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

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

<!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>

#⁰

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

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();

#⁰

置顶 广西河池市宜州市 2018-08-09 11:08

模仿网易梦幻西游游戏西游记师徒四人行走动画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>

#⁰

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

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

<!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

上海核工院

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。