评论 - lizhenqiu blog

#⁵⁹⁰

作者：广西河池市金城江区

文章：小火箭旋转翻动转动3D动画效果跟随返回顶部HTML 发表时间：2018-03-06, 16:20:47

展开↯

#⁵⁹¹

作者：广西南宁市

宁可我负天下人，不可天下人负我已经为曹操正名了，这个负是背负的意思，宁愿我背负这天下人过河，不让天下人背我过河。

#,广西河池市宜州市,2018-03-06,09:31:17, 每个人都是这个畸形心理的推波助澜者，用自己认为的好来代替爱，用未知的结果代替事实，哎，也只能在这打打嘴炮了。

#,广西河池市宜州市,2018-03-06,10:03:18, 中国电影缺少艺术精神，除了恋爱就剩抗日了

#,广西河池市宜州市,2018-03-06,10:04:52, 我向来是同情弱者的，因为群体的暴力往往不可估计，而且会对孤单的当事人造成无法逆转的心灵伤害，这种伤害要复原远远不能依靠这次我失败下次我东山再起的决心可以修复

#,广西河池市宜州市,2018-03-06,10:05:05,@2, 艺术这个东西不是说你努力就够了，甚至看起来和执行起来也不是一回事

#,广西河池市宜州市,2018-03-06,11:35:50, 理科男的心灵寄托

#,广西河池市金城江区,2018-03-06,16:11:02, 1979年1月，56岁的霍英东开始与广东省政府接触，他提出要在广州盖一家五星级宾馆——白天鹅宾馆。他投资1350万美元，由白天鹅宾馆再向银行贷款3631万美元，合作期为15年（以后又延长5年）。这是新中国成立后第一家中外合资的高级酒店，也是当时第一家五星级酒店。这期间还发生了一件“霍英东看裸画，辨政策风标”的小趣事。霍回忆说：“当时投资内地，就怕政策突变。那一年，首都机场出现了一幅体现少数民族节庆场面的壁画（指北京新机场落成时的大型壁画《泼水节——生命赞歌》，作者为画家袁运生），其中一个少女是裸体的，这在国内引起了很大一场争论。我每次到北京都要先看看这幅画还在不在，如果在，我的心就比较踏实。”

文章：如果你身陷地狱，那么就继续前行。——丘吉尔发表时间：2018-03-05, 21:30:10

展开↯

#⁵⁹²

作者：广西河池市宜州市

鼠标点击文字冒泡动画特效果

(function() {var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('click', function(e) {if (e.target.tagName == 'A') {return;}var x = e.pageX, y = e.pageY, span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top - i + 'px';el.style.opacity = (180 - i) / 180;}}}}());

Run code

Cut to clipboard

#,广西河池市宜州市,2018-02-24,15:53:08, dz论坛返回顶部的代码

_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();

Run code

Cut to clipboard

#,广西河池市宜州市,2018-02-24,16:34:45,
discuz论坛左边栏头像信息滚动自动固定js

function ctrlLeftInfo(sli_staticnum) {
    var sli = $('scrollleftinfo');
    var postlist_bottom = parseInt($('postlist').getBoundingClientRect().bottom);
    var sli_bottom = parseInt(sli.getBoundingClientRect().bottom);
    if (postlist_bottom < sli_staticnum && postlist_bottom != sli_bottom) {
        sli.style.top = (postlist_bottom - sli.offsetHeight - 5) + 'px';
    } else {
        sli.style.top = 'auto';
    }
}

function fixed_avatar(pids, fixednv) {
    var fixedtopnv = fixednv ? new fixed_top_nv('nv', true) : false;
    if (fixednv) {
        fixedtopnv.init();
    }

    function fixedavatar(e) {
        var avatartop = fixednv ? fixedtopnv.run() : 0;
        for (var i = 0; i < pids.length; i++) {
            var pid = pids[i];
            var posttable = $('pid' + pid);
            var postavatar = $('favatar' + pid);
            if (!$('favatar' + pid)) {
                return;
            }
            var nextpost = $('_postposition' + pid);
            if (!postavatar || !nextpost || posttable.offsetHeight - 100 < postavatar.offsetHeight) {
                if (postavatar.style.position == 'fixed') {
                    postavatar.style.position = '';
                }
                continue;
            }
            var avatarstyle = postavatar.style;
            posttabletop = parseInt(posttable.getBoundingClientRect().top);
            nextposttop = parseInt(nextpost.getBoundingClientRect().top);
            if (nextposttop > 0 && nextposttop <= postavatar.offsetHeight) {
                if (BROWSER.firefox) {
                    if (avatarstyle.position != 'fixed') {
                        avatarstyle.position = 'fixed';
                    }
                    avatarstyle.top = -(postavatar.offsetHeight - nextposttop) + 'px';
                } else {
                    postavatar.parentNode.style.position = 'relative';
                    avatarstyle.top = '';
                    avatarstyle.bottom = '0px';
                    avatarstyle.position = 'absolute';
                }
            } else if (posttabletop < 0 && nextposttop > 0) {
                if (postavatar.parentNode.style.position != '') {
                    postavatar.parentNode.style.position = '';
                }
                if (avatarstyle.position != 'fixed' || parseInt(avatarstyle.top) != avatartop) {
                    avatarstyle.bottom = '';
                    avatarstyle.top = avatartop + 'px';
                    avatarstyle.position = 'fixed';
                }
            } else if (avatarstyle.position != '') {
                avatarstyle.position = '';
            }
        }
    }
    if (!(BROWSER.ie && BROWSER.ie < 7)) {
        _attachEvent(window, 'load', function () {
            _attachEvent(window, 'scroll', fixedavatar);
        });
    }
}

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-05,16:47:35,
手机端无效解决办法

(function() {var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('<?php
			if($Applessss){
			echo 'touchstart';
			}else echo 'click';
			?>', function(e) {if (e.target.tagName == 'A') {return;}
			
			<?php
			if($Applessss){
			echo 'var x=e.targetTouches[0].pageX,y=e.targetTouches[0].pageY';
			}else echo 'var x = e.pageX, y = e.pageY;';
			?>;
var			span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top - i + 'px';el.style.opacity = (180 - i) / 180;}}}}());

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-05,16:48:44, 手机e.pageX和e.pageY无效的原因

手机端拖拽事件：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。

调用方法：
（1）jquery方法：$(document).bind("touchend", function(e){}）；
（2）javascript方法：document.addEventListener("touchend",function(e){});

手机端获取pageX和pageY:

touchstart事件下获取：e.originalEvent.targetTouches[0].pageX。
touchmove事件下获取：e.originalEvent.targetTouches[0].pageX。
touchend事件的下获取：e.originalEvent.changedTouches[0].pageX 。


每个Touch对象包含的属性如下。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-05,16:50:08, touch事件中的touches、targetTouches和changedTouches详解

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性：

1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。

2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，
targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因

3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值

4. 手指滑动时，三个值都会发生变化

5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。

6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。

2. 触点坐标选取

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

3.touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
　　var e=arguments[0]
　　e.preventDefault()
}

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-05,16:53:06, 巧用cssText属性批量操作样式
使用cssText时应该采用叠加的方式以保留原有的样式

function setStyle(el, strCss){
    var sty = el.style;
    sty.cssText = sty.cssText + strCss;
}

Run code

Cut to clipboard

使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题，但由于 IE6/7/8中cssText返回值少了分号会让你失望。
因此对IE6/7/8还需单独处理下，如果cssText返回值没";"则补上

function setStyle(el, strCss){
    function endsWith(str, suffix) {
        var l = str.length - suffix.length;
        return l >= 0 && str.indexOf(suffix, l) == l;
    }
    var sty = el.style,
        cssText = sty.cssText;
    if(!endsWith(cssText, ';')){
        cssText += ';';
    }
    sty.cssText = cssText + strCss;
}

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-05,16:55:07,
cssText
js pageX手机无效
js join

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join("."))
//输出：
//George.John.Thomas
</script>

Run code

Cut to clipboard

join() 方法用于把数组中的所有元素放入一个字符串
如果省略该参数，则使用逗号作为分隔符。

文章：常用html、demo代码发表时间：2018-02-24, 15:51:49

展开↯

#⁵⁹³

作者：广西南宁市

古代有一小姐，遇到一个上京赶考的穷书生避雨，发现其很有才华后以身相许。

次日小姐垂泪送书生：“君若高中莫负妾身。”

书生发誓后，带着姑娘给的银子走了。

小姐让丫环把书生的名字纪录在册，丫头说：“这已经是第五十个书生了！”

小姐说：“没办法，总有一个会真的考上的”。

——2017最佳小说《风投》

书生让书童把小姐的名字记下，感叹说：这是第一百个了啊。

——2017最佳小说《融资》

书生的伴读童子问书生:公子，自从三年前你离家，如今已经睡了九十余名女子了，我们在各大赴京路上往复，难道就不去赶考了吗？书生答:赶考当大官不也是为了钱和女人吗？既得痴情女子九十有余，还赶着考啥？

——2017最佳小说《泡沫》

丫环帮小姐把名字记下后，从贴身处掏出一个小本，记下了第五十个书童的名字!

一一2017最佳小说《跟投》

文章：成功的故事只能倒叙着讲发表时间：2018-03-05, 05:32:48

展开↯

#⁵⁹⁴

作者：Administrator

<a href="tel:400-888-6633">拨打电话<a>
<a href="sms:19956321564">发送短信<a>
<a href="mailto:mail@mail.com">发送邮件<a>

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-03,15:55:32,
IE edge浏览器强制修改了电话样式，办法解决

<meta content="telephone=no" name="format-detection">

Run code

Cut to clipboard

加个meta标签就可以
去掉Egde浏览器对电话号码的默认样式
win10 edge 关闭电话号码识别
Microsoft Edge 浏览器会把某些IP地址强制识别为电话号码

文章：常用html、demo代码发表时间：2017-10-19, 17:10:43

展开↯

#⁵⁹⁵

作者：广西河池市宜州市

CSS3实现图片循环旋转

@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-03-03, 11:51:59

展开↯

#⁵⁹⁶

作者：广西河池市宜州市

Chrome 谷歌浏览器清除 DNS 缓存；遇见有时候本应该打开的网页无法打开时使用
打开 Chrome 浏览器，在输入网址的地方输入

chrome://net-internals/#dns

Run code

Cut to clipboard

然后点击红色条右上角的下拉按键，点击 Clear cache 和 Flush sockets 两项即可清除

文章：程序员编程常用网页工具集[游戏] 发表时间：2018-03-03, 10:12:01

展开↯

#⁵⁹⁷

作者：广西河池市宜州市

7 阶层叠水平(stacking level)

#,广西河池市宜州市,2018-03-03,10:06:16, 3D 动画硬件加速

.item {
  transform: translateZ(0);      /* 或者 will-change: transform; */
}

Run code

Cut to clipboard

用CSS开启硬件加速来提高网站性能

文章：常用html、demo代码发表时间：2018-03-03, 10:04:51

展开↯

#⁵⁹⁸

作者：广西河池市宜州市

富二代明白，再穷些就一定找不到

#,广西河池市宜州市,2018-03-02,11:14:40,
一个渔夫抓到一只美人鱼，然后就把她放了，他的朋友问他
why
他说
how

#,广西河池市宜州市,2018-03-02,16:07:05, 你根本不在乎意大利面还够不够，也不在乎40米大刀抽出来再放回去有多难，更不在乎橘子树结果子要多久，你只在乎你自己。

#,广西河池市宜州市,2018-03-03,09:52:29,

文章：给未来年轻创业者们发表时间：2018-03-02, 09:59:34

展开↯

#⁵⁹⁹

作者：广西河池市宜州市

乌鸦、小火车、树为主角的故事

文章：给未来年轻创业者们发表时间：2018-03-02, 18:05:09

展开↯

#⁶⁰⁰

作者：广西河池市宜州市

使用JS判断用户操作系统是否安装某字体

<script>var isSupportFontFamily=function(f){if(typeof f!="string"){return false}var h="Arial";if(f.toLowerCase()==h.toLowerCase()){return true}var e="a";var d=100;var a=100,i=100;var c=document.createElement("canvas");var b=c.getContext("2d");c.width=a;c.height=i;b.textAlign="center";b.fillStyle="black";b.textBaseline="middle";var g=function(j){b.clearRect(0,0,a,i);b.font=d+"px "+j+", "+h;b.fillText(e,a/2,i/2);var k=b.getImageData(0,0,a,i).data;return[].slice.call(k).filter(function(l){return l!=0})};return g(h).join("")!==g(f).join("")};

// isSupportMicrosoftYahei为true或者false
var isSupportMicrosoftYahei = isSupportFontFamily('Microsoft Yahei');
alert(isSupportMicrosoftYahei);
</script>

Run code

Cut to clipboard

其中fontFamily参数是必须的，为CSS中font-family设置的web可识别的字体名称，例如宋体'simsun'，微软雅黑'Microsoft Yahei'等
如果用户的操作系统安装了微软雅黑，则isSupportMicrosoftYahei为true，否则为false。

由于本检测方法本质上是基于web检测，因此，fontFamily参数必须是web可识别的，因此，很多中文字体需要使用其英文名称如“思源黑体”， “兰亭黑体”等

原文：小tips: 使用JS检测用户是否安装某font-family字体

文章：常用html、demo代码发表时间：2018-03-02, 17:36:31

展开↯

#⁶⁰¹

作者：广西河池市宜州市

js bind 传递参数
Jquery之Bind方法参数传递与接收的三种方法
方法一、

function GetCode(event)
{
alert(event.data.foo);
}
$(document).ready(function()
{
$("#summary").bind("click", {foo:'abc'} ,GetCode);
});

Run code

Cut to clipboard

方法二、
函数句柄

$("#summary").bind("click", function()
{
GetCode("abc")
});
function GetCode(str)
{
}

Run code

Cut to clipboard

方法三、
函数闭包


function GetCode(str)
{
return function()
{
alert(str)
}}
$("#summary").bind("click", GetCode("abc"));

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-02,17:22:06,

<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>

Run code

Cut to clipboard

#,广西河池市宜州市,2018-03-02,17:22:35,

$(selector).bind(event,data,function)

Run code

Cut to clipboard

$(selector).bind({event:function, event:function, ...})

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-03-02, 17:20:54

展开↯

#⁶⁰²

作者：广西河池市宜州市

仿造张鑫旭-鑫空间-鑫生活博客回到相关文章按钮动画效果

<style>
#back{line-height:40px;position:absolute;right:20px;padding: 0 10px 0 13px;background-color: #000;animation:tada 1s 1s;color: #cd0000;font-size:12px;}
@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
</style>
<a href="http://www.zhangxinxu.com/" id="back" style="">回到相关文章 »</a>
<script>
var BAK = document.getElementById('back');
if (BAK){setInterval(function () {BAK.style.animation='none';BAK.offsetHeight;BAK.style.animation='';}, 3000);}
</script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-03-02, 16:54:12

展开↯

#⁶⁰³

作者：广西河池市宜州市

标记语句之前用过，san.js里解析模板的时候也有用到

文章：JS特性发表时间：2018-03-02, 16:43:57

展开↯

#⁶⁰⁴

作者：广西河池市宜州市

逗号运算符和reduce()相结合，简直不能太棒

文章：JS特性发表时间：2018-03-02, 16:43:30

展开↯

#⁶⁰⁵

作者：广西河池市宜州市

display: flex; 的兼容问题解决办法

.cardBagMxList {
height: 1.2rem;
display: -webkit-flex; 
display: flex;	
/* for uc */
display: -webkit-box; 
display: -ms-flexbox; /* TWEENER - IE 10 */
}
.cardBagMxList div {
text-align: center;
color: #888888;
font-size: 0.24rem;
padding-top: 0.25rem;
-ms-flex: 1; /* IE 10 */
-webkit-flex: 1; 
flex: 1; 
/* for uc */
-webkit-box-flex: 1; 
-moz-box-flex: 1; 
-ms-flex: 1;
}

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-03-02, 16:02:44

展开↯

#⁶⁰⁶

作者：广西河池市宜州市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-03-02, 12:06:16

展开↯

#⁶⁰⁷

作者：广西河池市宜州市

更多评论图标

文章：常用html、demo代码发表时间：2018-03-02, 09:25:14

展开↯

#⁶⁰⁸

作者：广西河池市宜州市

Div里超出部分，省略号显示

1.一行显示并出现省略号

1）三个属性：

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；

Run code

Cut to clipboard

2）网上张大神想出来的margin-top负值的办法：

<div class="box">
　　　　<div class="wz">文字内容</div>
　　　　<div class="dot">...</div>
</div>

Run code

Cut to clipboard

CSS:

.box{
　　　　width:设定宽度；
　　　　height:设定高度；
　　　　overflow:hidden;
　　}
.wz{
　　　　float:left;
　　　　height:设定同样的高度；
　　　　margin-right:这里的大小是给省略号留的空间；
　　}
.dot{
　　　　float:right;
　　　　width:刚才留的空间大小；
　　　　height：设定同样的高度；
　　　　margin-top:与高度一样的值的负数；
　　}

Run code

Cut to clipboard

　　这种方法应该是兼容所有的浏览器。

　　还有用js或者插件来解决的方法，感觉有点麻烦。

2.两行显示，第二行出现省略号

当文字强制两行显示，并且在第二行才出现省略号。解决办法：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Run code

Cut to clipboard

这个是使用的是-webkit-的私有属性，只有在谷歌浏览器上才能正确显示出来，其它浏览器无效果,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。

文章：常用html、demo代码发表时间：2018-03-01, 17:55:11

展开↯

Records:2796 32/148 «‹28 29 30 31 32 33 34 35 36 ›»