<script src=”//libs.baidu.com/jquery/1.10.2/jquery.min.js”></script>
<video id=”video” controls=”controls”>
<source src=”https://www.w3cschool.cn/statics/demosource/movie.mp4″ />
</video>
<button id=”capture”>Capture</button>
<div id=”output”></div>
js部分:
(function() {
“use strict”;
var video, $output;
var scale = 0.25;
var initialize = function() {
$output = $(“#output”);
video = $(“#video”).get(0);
$(“#capture”).click(captureImage);
};
var captureImage = function() {
var canvas = document.createElement(“canvas”);
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext(’2d’)
.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement(“img”);
img.src = canvas.toDataURL();
$output.prepend(img);
};
$(initialize);
}());

上面是使用jq+html5来实现视频截图,可以一边播放一边截图都可以。

 

 

$(document).ready(function(){

$(‘#tabfirst li’).hover(function(){

$(this).addClass(“on_tab”).siblings().removeClass();

$(“#tab_box > div”).eq($(‘#tabfirst li’).index(this)).show().siblings().hide();

});

});

html部分

<ul id=”tabfirst”>
<li class=”on_tab”><a href=”/” >麻瓜程序员</a></li>
<li><a href=”/”>jquery切换效果</a></li>
<li><a href=”/”>jquery素材</a></li>
<li><a href=”/”>行业新闻</a></li>
</ul>

<div id=”tab_box”>
<div class=”tab_box2″>1</div>
<div class=”tab_box2″>2</div>
<div class=”tab_box2″>3</div>
<div class=”tab_box2″>4</div>
</div>

 

前几天 写一个字符串分割转换效果,当时输出的时候确出现了 undefined

<div class=”box_left_list_content”>
<ul>
<li >
<p class=”l”>111111111</p>
<div class=”l artid” id=”artid1″>乐天熊字饼,苹果,萝卜,咸鱼</div>
</li>
<li >
<p class=”l”>2222222222</p>
<div class=”l artid” id=”artid2″>乐天熊字饼,苹果、萝卜,咸鱼</div>
</li>
</ul>
</div>

js代码

<script type=”text/javascript”>
for(var i=1;i<=$(“.box_left_list_content ul li”).length;i++){
if($(“#artid”+i).html()){
var keywt=$(“#artid”+i).html().replace(/、/,’,').replace(/,/,’,').split(“,”);
$(“#artid”+i).html(
function (){
var keywts;
for(var n=0;n<keywt.length;n++){
keywts+=’<a href=”/plus/search.php?kwtype=0&q=’+encodeURI(keywt[n])+’”>’+keywt[n]+’</a>’;
}
return keywts;
}
);
}
}
</script>

执行结果会多出一个undefined。 后来问了一个大神朋友 才发现了问题

js声明变量没有赋值的时候是undefined类型,undefined类型遇到+号会被隐式转换为字符串,所以咯 就会多出了一个undefined了

所以在声明  var keywts=‘’  这样就可以了。

最终js

<script type=”text/javascript”>
for(var i=1;i<=$(“.box_left_list_content ul li”).length;i++){
if($(“#artid”+i).html()){
var keywt=$(“#artid”+i).html().replace(/、/,’,').replace(/,/,’,').split(“,”);
$(“#artid”+i).html(
function (){
var keywts=‘’;
for(var n=0;n<keywt.length;n++){
keywts+=’<a href=”/plus/search.php?kwtype=0&q=’+encodeURI(keywt[n])+’”>’+keywt[n]+’</a>’;
}
return keywts;
}
);
}
}
</script>

 

css和js部分,记得重新引用你自己的jquery库 我这个是本地的jquery库

<script src=”http://localhost:18111/templets/default/js/jQuery1_18.js” type=”text/javascript”></script>
<style type=”text/css”>
* {margin:0;padding:0;font-size:12px;font-family:Verdana;}
img {border:0}
#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}
#play{position:absolute;margin-left:200px;margin-top:-30px;}
#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}
</style>
<script type=”text/javascript”>
var _c = _h = 0;
$(function(){
$(‘#play > a’).click(function(){
var i = $(this).attr(‘alt’) – 1;
clearInterval(_h);
_c = i;
play();
change(i);
})
$(“#pic img”).hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval(“auto()”, 1000);
}
function change(i)
{
$(‘#play > a’).css(‘background-color’,'#E8FCEB’).eq(i).css(‘background-color’,'#C6FF5E’).blur();
$(“#pic img”).hide().eq(i).fadeIn(‘slow’);
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</script>

html部分

<div id=”pic”>
<img src=”img1.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img2.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img3.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img4.jpg” width=”300″ height=”200″ alt=”" />
</div>
<div id=”play”>
<a href=”###” alt=”1″ style=”background-color:#C6FF5E”>1</a>
<a href=”###” alt=”2″ >2</a>
<a href=”###” alt=”3″ >3</a>
<a href=”###” alt=”4″ >4</a>
</div>

 

 

如果一个项目接手的人比较多或者是以前的老项目,大家肯定碰到过用jquery会影响已有的页面效果,或者重复引用jquery库造成莫名其妙的bug,直接上代码,很简单一句话代码搞定:

<scripttype=”text/javascript”>window.jQuery || document.write(‘<scripttype=”text/javascript”src=”/js/jquery.min.js”></script>’);</script>

 

css部分

.swt_bo{background:#fff; position:fixed; bottom:2px; right:2px; z-index:99999; width:294px; height:169px; padding:3px; border:3px solid #b2b2b2; overflow:hidden; _position:absolute;_top:exprssion(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
.swt_top{ width:294px; height:29px; overflow:hidden; position:relative;}
.swt_top a,.swt_top span{ display:inline-block; float:left; overflow:hidden;}
.swt_top a.swt_on{ width:120px; height:29px; }
.swt_top span{ width:160px; height:28px; border-bottom:1px solid #ccc; line-height:29px; color:#e84040; font-size:12px; font-weight:bold; }
.swt_top span.swt_close{ cursor:pointer; border:none; width:16px; height:16px; background:url(/swt/swt_close.png) no-repeat top; clear:both; position:absolute; top:0px; right:0px; }
.swt_list{ height:103px; overflow:hidden; margin-bottom:10px;}
.swt_list li,.swt_list p{ border-bottom:1px dashed #ccc; overflow:hidden;}
.swt_list p{ height:33px; line-height:34px; font-size:13px;}
.swt_list p a{ float:right; color:#ff0000; margin-right:20px;}
.swt_list p strong a{ float:left; margin:0px; color:#000;}
.swt_list li{ height:22px; line-height:22px; background:url(/swt/fixedbox_arrow.png) no-repeat 3px center; text-indent:1em }
.swt_list li a{ color:#000; font-size:12px;}
.swt_list_w{ height:23px; line-height:23px; overflow:hidden;}
.swt_list_w ul{ width:225px; overflow:hidden;}
.swt_list_w ul li{ height:23px; line-height:23px; background:url(/swt/4.jpg) no-repeat 3px center; text-indent:1.3em;}
.swt_list_w ul li a{ font-size:12px; color:#000; }
.swt_list_w ul li a span{ color:#ff0000; font-size:16px;}
.swt_list_w .swt_ok{ float:right;}
.swt_bo a:hover{ color:#ff0000;}

html部分

<div class=”swt_bo” id=”swt_bos”>
<div class=”swt_top”><a href=”http://blog.aiwebcom.com” class=”swt_on”><img src=”/swt/swt_anl.gif” title=”在线免费咨询” alt=”在线免费咨询”></a><span>在南穗,找到最高的自己!</span><span class=”swt_close” target=”_parent”></span></div>
<div class=”swt_list”>
<ul>
<p><a href=”http://blog.aiwebcom.com”>更多详情</a><strong><a href=”http://blog.aiwebcom.com”>暑期增高好礼大放送</a></strong></p>
<li><a href=”http://blog.aiwebcom.com”>身高在线预测、把握未来</a></li>
<li><a href=”http://blog.aiwebcom.com”>长高6厘米,走向好人生</a></li>
<li><a href=”http://blog.aiwebcom.com”>母爱与正确的增高方法,助我远离“矮矬穷”</a></li>
</ul>
</div>
<div class=”swt_list_w”><a href=”http://blog.aiwebcom.com” class=”swt_ok”><img src=”/swt/5.jpg” alt=”马上预约” title=”马上预约”></a>
<ul class=”swt_ul”>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>21</span></a></li>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>22</span></a></li>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>23</span></a></li>
</ul>
</div>
</div>

js内容 记得要添加jquery库

$(function(){
var _wrap=$('ul.swt_ul');//定义滚动区域
var _interval=4000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
var swt_times=6000;
var swt_open=function(){
$(".swt_bo").animate({height:'169px'},"slow");
$(".swt_close").css("backgroundPosition","top");
}
var swt_close=function(){
$(".swt_close").css("backgroundPosition","bottom");
$(".swt_bo").animate({height:'30px'},"slow");
var timing = setTimeout(swt_open,swt_times);
}
$(".swt_close").toggle(swt_close,swt_open);

});
 

在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$(‘#msg’)等同于JQuery(‘#msg’)的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。
第一种情况:jquery.js在prototype.js之后进行引入,如:

<script src=”prototype.js” type=”text/javascript”/>
<script src=”jquery.js” type=”text/javascript”/>

在这种情况下,我们在自己的js代码中如下写的话:

$(‘#msg’).hide();

$永远代表的是jquery中定义的$符号,也可以写成JQuery(‘#msg’).hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。

第二种情况:jquery.js在prototype.js之前进行引入,如:

<script src=”jquery.js” type=”text/javascript”/>
<script src=”prototype.js” type=”text/javascript”/>

在这种情况下,我们在自己的js代码中如下写的话:

$(‘#msg’).hide();

$此时代表的prototype.js中定义的$符号,如果我们想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery(‘#msg’).hide().

下面先介绍在第一种引入js库文件顺序的情况下,如何正确的使用不同的js库中定义的$符号。

一.使用JQuery.noConflict()
该方法的作用就是让Jquery放弃对$的所有权,将$的控制权交还给prototype.js,因为jquery.js是后引入的,所以最后拥有$控制权的是jquery。它的返回值是JQuery。当在代码中调用了该 方法以后,我们就不可以使用$来调用jquery的方法了,此时$就代表在prototype.js库中定义的$了。如下:

JQuery.noConflict();

//此处不可以再写成$(‘#msg’).hide(),此时的$代表prototype.js中定义的$符号。
JQuey(‘#msg’).hide();

自此以后$就代表prototype.js中定义的$,jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery了。

二.自定义JQuery的别名
如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话,我们还可以为JQuery重定义别名。如下:

var $j=JQuery.noConflict();
$j(‘#msg’).hide();//此处$j就代表JQuery

自此以后$就代表prototype.js中定义的$,jquey.js中的$无法再使用,只能使用$j来作为jquey.js中JQuery的别名了。

三.使用语句块,在语句块中仍然使用jquery.js中定义的$,如下:

JQuery.noConflict();
JQuery(document).ready(function($){
$(‘#msg’).hide();//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$.
});

或者使用如下语句块:

(function($){
…..
$(‘#msg’).hide();//此时在这个语句块中使用的都是jquery.js中定义的$.
})(JQuery)

如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法,如:

代码
<script src=”jquery.js” type=”text/javascript”/>
<script src=”prototype.js” type=”text/javascript”/>
<script type=”text/javascript”>

(function($){
…..
$(‘#msg’).hide();//此时在这个语句块中使用的都是jquery.js中定义的$.
})(JQuery)
</script>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

 

以上是处理的原理,
当然用最简单的更改命名方法
var j = jQuery.noConflict();

也就是用j代替了$
以后自己写jq库的时候尽量避免用$,养成个良好的习惯吧

 

在页面中同时存在jquery 和 prototype ,当用到 $ 的时候,难免产生冲突,所以一定要区分开来:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
j= $;
</script>
<script type=”text/javascript” src=”prototype.js” ></script>

这样做了以后,在用到jquery 的地方用 j 来替代 $ 符号,而 prototype 的 $ 函数照常使用,当然其实也不用定义“ j= $; ” ,在用到 jquery 的地方直接用 jQuery 来替代 $ 符号也一样的。

 

还有一个冲突网上找到的:Array.prototype.push 方法冲突。转载下:

这个冲突很严重,直接导致jQuery 的级联筛选无效。比如正常情况下,你可以使 用 $(“span”,$(“#main”)) 来获取ID 为 main 的元素下面的 span 元素。但如果页面中同时使用了 prototype 框架相关,那抱歉 的很,你永远获取不到了。原因你可以调试跟踪自己查看 jQuery 的源代码。
解决方法:
<script type=”text/javascript”>
var fnArrayPush = Array.prototype.push;
$().ready(function(){
Array.prototype.push = fnArrayPush;
init();
});
</script>

/****/

一般将 $换成jQuery 都可以解决的了

 

一个超级实用的国外jQuery效果网站,而且里面不止只有js特效的下载(免费的哦),还提供了一些国外绚丽的网站的欣赏。

国外js特效网站

国外js特效网站

网址   http://tympanus.net/codrops/

© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha