jquery悬浮事件,jquery移入事件
jquery on hover事件怎么写
//on('第一个参数是事件名称，如click，change等', '第二个参数表示执行的方法')
成都创新互联业务包括：成品网站、企业产品展示型网站建设、品牌网站设计、电子商务型网站建设、成都外贸网站建设公司(多语言)、购物商城网站建设、定制开发、成都全网营销推广等。效率优先，品质保证，用心服务是我们的核心价值观，我们将继续以良好的信誉为基础，秉承稳固与发展、求实与创新的精神，为客户提供更全面、更优质的互联网服务！
$('body').on('click', function(){
});
//查看更详细的说明
//hover('第一个鼠标移动到某个元素执行方法', '第二个鼠标移开当前DOM节点后执行方法')
$('body').hover(function(){
//鼠标移动到body上执行
}, function(){
//鼠标移开body后执行
});
//查看更详细的说明
附上jquery中文API文档，
jquery 中当鼠标被按下然后拖动,经过一个元素,如何触发这个元素绑定的悬浮事件呢
用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。给你一个demo。记得自己加图片。
!DOCTYPE HTML
html
head
titleHTML5实现拖拽操作/title
meta charset="utf-8"/
style
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
/style
/head
body
div id="info"
h2温馨提示：可将照片直接拖到垃圾箱中/h2
/div
div id="album" class="album"
h2相册/h2
img draggable="true" id="img1" src="jq/audio1.png" /
img draggable="true" id="img2" src="jq/audio2.png" /
img draggable="true" id="img3" src="jq/audio3.png" /
div id="div1" draggable="true"暗涌/div
/div
div id="trash" class="album"
h2垃圾箱/h2
h1 id="h1" draggable="true"what/h1
/div
br/
/body
script
console.log("start");
info = document.getElementById("info");
src = document.getElementById("album");
target = document.getElementById("trash");
function converse(){
target.ondragstart = function(e){
var dragid = e.target.id;
var divdraged = document.getElementById(dragid);
console.log(divdraged);
divdraged.ondragend = function(){
info.innerHTML = "h2温馨提示：可将照片直接拖到垃圾箱中/h2";
}
e.dataTransfer.setData("div",dragid);
}
target.ondrag = function(){
info.innerHTML = "h2确认回收此垃圾/h2"
}
src.ondrop = function(e){
var dragid = e.dataTransfer.getData("div");
console.log(dragid);
var dragobject = document.getElementById(dragid);
console.log(dragobject);
dragobject.parentNode.removeChild(dragobject);
info.innerHTML = "h2恢复成功！/h2";
src.appendChild(dragobject);
e.preventDefault();
}
src.ondragenter = function(e){
e.preventDefault();
}
src.ondragover = function(e){
e.preventDefault();
}
}
function init(){
src.ondragstart = function (e) {
var dragImgId = e.target.id;
console.log(dragImgId);
var dragImg = document.getElementById(dragImgId);
dragImg.ondragend = function(e){
info.innerHTML="h2温馨提示：可将照片直接拖到垃圾箱中/h2";
};
e.dataTransfer.setData("img",dragImgId);
};
src.ondrag = function(e){
info.innerHTML="h2--照片正在被拖动--/h2";
}
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("img");
console.log(draggedID);
var oldElem = document.getElementById(draggedID);
oldElem.parentNode.removeChild(oldElem);
target.appendChild(oldElem);
info.innerHTML="h2温馨提示：可将照片直接拖到垃圾箱中/h2";
e.preventDefault();
}
}
init();
converse();
/script
/html
JQuery中怎么使用on方法绑定hover事件
代码如下：
$(obj).on("mouseover mouseout",function(event){ if(event.type == "mouseover"){ //鼠标悬浮 }else if(event.type == "mouseout"){ //鼠标离开 } })
jQuery hover事件简单实现同时绑定2个方法
本文实例讲述了jQuery
hover事件简单实现同时绑定2个方法。分享给大家供大家参考，具体如下：
这里将hover事件同时挂2个方法：
1个是悬停的时候执行的，另外一个是离开的时候执行
代码如下：
$(document).ready(function()
{
$("#orderedlist
li").hover(
function()
{$(this).addClass("blue");},
function()
{$(this).removeClass("blue");}
);
});
PS：上面的代码小编没有进行格式化处理，这里顺便为大家推荐几款在线代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线JavaScript代码美化、格式化工具：
JavaScript压缩/格式化/加密工具：
json代码在线格式化/美化/压缩/编辑/转换工具：
在线JSON代码检验、检验、美化、格式化工具：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery中hover方法和toggle方法使用指南
jQuery提供一些方法（如：toggle）将两种事件效果合并到一起，比如：mouseover、mouseout；keyup、keydown等
1、hover函数
hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
参数:
over
(Function)
:
鼠标移到元素上要触发的函数。
out
(Function):
鼠标移出元素要触发的函数。
复制代码
代码如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").hover(function(){
$(this).next().show();//
鼠标悬浮时触发
},function(){
$(this).next().hide();//
鼠标离开时触发
})
})
/script
2、toggle函数
toggle(fn,fn)
每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
可以使用unbind("click")来删除。
复制代码
代码如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){
$(this).next().show();//
第一次点击时触发
},function(){
$(this).next().hide();//
第二次点击时触发，之后不停的切换
})
})
/script
toggle()
方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。toggle()方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
所以上述的代码还可以写成：
复制代码
代码如下:
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
})
/*$(function(){
$("#panel
h5.head").click(function(){
$(this).next().toggle();
})
})*/
/script
还可以添加一些css样式：
复制代码
代码如下:
style
type="text/css"
.highlight{
background:#FF3300;
}
/style
script
type="text/javascript"
$(function(){
$("#panel
h5.head").toggle(function(){//配合css样式使用
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
/script
小伙伴们是否对jQuery中常见的hover事件和toggle事件有了新的认识了呢，希望本文能给大家带来一些帮助。
本文标题：jquery悬浮事件,jquery移入事件
当前链接：http://mswzjz.cn/article/dsgdsjc.html