wordpress 的parallax is not a function?我来帮你

搜狗截图20160624224918
最新解决方法:

在模板head。php文件引入cdn

wordpress\wp-content\themes\主题名称\header.php

<script src="//cdn.bootcss.com/jquery-parallax/1.1.3/jquery-parallax-min.js"></script>

//--------------以下为过时答案

点这里看原文
请看Rikard 的回答:

Please try adding the following to your functions.php file to see if that helps:

function modify_jquery() {
if (!is_admin()) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', 'https://code.jquery.com/jquery-1.11.3.min.js');
	wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');

把以上代码丢到主题文件夹的functions.php里面,但经过我的实际操作,这样没有效果。于是我想办法找到wp的head引用文件wordpress\wp-includes\general-template.php ?添加进里面就可以了。

好好享受wordpress带来的方便与快捷吧!

获取当前url并判断

$("a[href='"+ window.location.pathname +"']").parent().attr("class","active");
/**/

设置或获取对象指定的文件名或路径。

alert(window.location.pathname)

 
设置或获取整个 URL 为字符串。

 
alert(window.location.href);

设置或获取与 URL 关联的端口号码。

alert(window.location.port)

 
设置或获取 URL 的协议部分。

alert(window.location.protocol)

 
设置或获取 href 属性中在井号“#”后面的分段。

alert(window.location.hash)

 
设置或获取 location 或 URL 的 hostname 和 port 号码。

alert(window.location.host)

 
设置或获取 href 属性中跟在问号后面的部分。

alert(window.location.search)

 

html 基础 绝对路径/相对路径

"." -- 代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a> 或 <img src="./abc" />
".." -- 代表上一层目录,相对路径。 如:<a href="../abc">文本</a> 或 <img src="../abc" />
"../../" -- 代表的是上一层目录的上一层目录,相对路径。 如:<img src="../../abc" />
"/" -- 代表根目录,绝对路径。 如:<a href="/abc">文本</a> 或 <img src="/abc" />
"http://localhost/abc/" -- 代表根目录,绝对路径。

关于微信上使用 requestAnimationFrame

2016-5-17 17:13:35-

在浏览器流畅运行的代码,在微信打开竟然卡到爆炸,十分不流畅

即使已经封装好了

(function() {
	    var lastTime = 0;
	    var vendors = ['webkit', 'moz'];
	    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
	        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
	        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
	                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
	    }

	    if (!window.requestAnimationFrame) {
	        window.requestAnimationFrame = function(callback, element) {
	            var currTime = new Date().getTime();
	            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
	            var id = window.setTimeout(function() {
	                callback(currTime + timeToCall);
	            }, timeToCall);
	            lastTime = currTime + timeToCall;
	            return id;
	        };
	    }
	    if (!window.cancelAnimationFrame) {
	        window.cancelAnimationFrame = function(id) {
	            clearTimeout(id);
	        };
	    }
	}());

出现该问题的代码,持续找原因ing

/*
*/
$("#start").click(function() {
		
		 var start = 0, during = 100;
		var _run = function() {
			start++;
			var the_top = Tween.Quad.easeOut(start, ball.x , -600, during);
	        $("#ball1").css({"top":the_top});
	        
	        if(start < during)requestAnimationFrame(_run);
	    };
	    _run();
	})

 

网页高度

原文地址

/*
*/
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth   (包括边线的宽);
网页可见区域高: document.body.offsetHeight  (包括边线的宽);
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

alert($(window).height()); //浏览器当前窗口可视区域高度 
alert($(document).height()); //浏览器当前窗口文档的高度 
alert($(document.body).height());//浏览器当前窗口文档body的高度 
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 
alert($(window).width()); //浏览器当前窗口可视区域宽度 
alert($(document).width());//浏览器当前窗口文档对象宽度 
alert($(document.body).width());//浏览器当前窗口文档body的高度 
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin?

 

修改 Apache配置允许局域网内所有访问

/*
*/
<Directory />
    Options FollowSymLinks
    AllowOverride All
    Order deny,allow
    Deny from all
</Directory>

//修改后
<Directory />
    Options FollowSymLinks
    AllowOverride All
    Order deny,allow
    Allow from all 
</Directory>
/*
*/
#   onlineoffline tag - don't remove
    Order Deny,Allow
    Deny from all
    Allow from 127.0.0.1

//修改后
#   onlineoffline tag - don't remove
    Order Deny,Allow
    Deny from none
    Allow from all

 

使用CSS3 animation实现gif动图的暂停和播放

源自原文:张鑫旭——鑫空间

要实现gif动画的暂停播放效果有很多方法,这里只写出我比较喜欢的一种。

animation模拟gif动画。

原理就是逐帧移动背景,以达到gif的播放效果

gun.jpg如下:

gun

CSS代码部分:

/*
css部分*/
.ball{display:block;
        width:40px;
        height:40px;
	border-radius:80px;
	background:url(../images/gun.jpg) center no-repeat ;
        background-size:auto 100%;
        animation: heart-burst steps(4) 0.4s infinite both;
}
@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

HTML代码部分:

/*
HTML代码部分*/
<div class="ball " id="ball" style="animation-play-state: paused;"></div>
<button type="button">点我开始</button>

js代码部分:

/*
js代码部分*/
$("button").click(function(){
    $(".ball").attr("style","");
})

 

实现 Bootstrap 多级菜单

资讯来源:http://blog.fens.me/bootstrap-multilevel-navbar/

此处截取自原文

HTML:

<ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a>
		<ul class="dropdown-menu menu-top">
			<li><a href="#">Level 1</a></li>
			<li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
				<ul class="dropdown-menu">
					<li><a tabindex="-1" href="#">Level 2</a></li>
					<li class="dropdown-submenu"> <a href="#">More..</a>
						<ul class="dropdown-menu">
							<li><a href="#">Level3</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

CSS:

.dropdown:hover .menu-top {
    display: block;
}

.dropdown-submenu{
    position:relative;
}

.dropdown-submenu > .dropdown-menu{
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu{
    display:block;
}

.dropdown-submenu > a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#666;
    margin-top:5px;
    margin-right:-10px;
}

.dropdown-submenu:hover > a:after{
    border-left-color:#ffffff;
}

.dropdown-submenu .pull-left{
    float:none;
}

.dropdown-submenu.pull-left > .dropdown-menu{
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

完整代码github:https://github.com/bsspirit/angular-navbar,同学可以根据需要自行下载。

关于原作者

  • 张丹(Conan), 程序员Java,R,PHP,Javascript
  • weibo:@Conan_Z
  • blog:?http://blog.fens.me
  • email: bsspirit@gmail.com

原作者二维码