js如何实现导航栏鼠标点击选中后的效果

JavaScript021

js如何实现导航栏鼠标点击选中后的效果,第1张

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下: 1.被点击时的效果可以用div:active{ css } 2.鼠标覆盖在上面的时候可以用div:hover{ css} 3.点击之后的效果,这个相对前2种有些麻烦,必须用到JS或者jquery,步骤如下: a.先给div添加一个选中的样式比如on{css}; b.然后在js中$('div').click(function{ $('div').toggleClass(' ','on')}) 这是jquery自带的一个方法,点击div切换2个class,

标记下当前点击次数 var clickNumber =0

$('image').click(function(){

if(clickNumber %2==0){

//放大代码

}else{

//缩小代码

}

clickNumber ++

})

这是一个拖动元素的效果

<div id="div" style="width:100pxheight:100pxbackground-color:redposition: absolutecursor: move">

</div>

<script>

window.onload=function(){

var div=document.getElementById("div")

div.onmousedown=function(e){ //把onmousedown改成onclick就是你要的效果

var x= e.clientX-div.offsetLeft

var y= e.clientY-div.offsetTop

document.onmousemove=function(e){

div.style.left= e.clientX-x+"px"

div.style.top= e.clientY-y+"px"

}

document.onmouseup=function(){

document.onmousemove=null

}

}

}

</script>