国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jquery > yui3与jquery的代码对照

yui3与jquery的代码对照

来源:程序员人生   发布时间:2014-03-12 12:35:21 阅读次数:2720次
YUI3:

<script>
YUI().use('node', function(Y){
var links = Y.all('div#latest-list .bd li a');
links.on('mouseover', function(ev){
var desc = this.get('parentNode').query('.news-desc');
var popup = Y.get('.popup-desc');
if(!popup){
Y.get(document.body).appendChild(popup = Y.Node.create('<div></div>'));
}
popup.set('innerHTML', desc.get('innerHTML')).setStyles({
display: "block",
opacity: 0.9,
top: (ev.clientY + 10) + "px",
left: (ev.clientX + 10) + "px"
});
});
links.on('mouseout', function(ev){
Y.get('.popup-desc').setStyle("display", "none");
});
});
</script>
jquery:

<script>
$(document).ready(function(){
$("div#latest-list .bd li a")
.mouseover(function(ev){
var desc = $("div.news-desc", this.parentNode);
var popup = $("div.popup-desc");
if(popup.length === 0){
popup = $('<div></div>').appendTo(document.body);
}
popup.html(desc.html())
.show()
.css("opacity", 0.9)
.css("top", (ev.clientY + 10) + "px")
.css("left", (ev.clientX + 10) + "px");
})
.mouseout(function(ev){
$("div.popup-desc").hide();
});
});
</script>
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生