鼠标点击js效果

发布网友发布时间：2022-05-18 09:03

共2个回答

热心网友时间：2022-05-18 10:32

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}

     .box{
        position: fixed;
        right: 0;
        top:250px;
     }

     .box ul{ list-style: none; width: 120px; }
     .box ul li{
     width:120px;
     height: 30px;
     line-height: 30px;
     border:1px solid #ccc;
     border-radius: 6px 0 0 6px;
     margin-left:50px;
     padding-left: 10px;
     margin-top:5px;
     cursor:pointer;
     }

     .cur{ background-color: #ff4600; border:none; color:#fff;}
</style>
</head>

<body>

<div class='box'>
<ul>
<li>水果</li>
<li>相机</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('div.box ul li').click(function(){
if( $(this).hasClass('cur') ){
$(this).animate({marginLeft:'50px'}).removeClass('cur');
}
else{
$(this).animate({marginLeft:'0px'}).addClass('cur');
}
});
})
</script>
</html>

其实思路不是很难，主要是通过边距的变化来实现移动，这里我用了通过改变margin-left的值来实现标签滑动的效果。

热心网友时间：2022-05-18 11:50

这效果其实是两张图片。你点击图标后。后面的图片替换成红色拉长的图片就行。不是你说那样写代码改背景颜色，改图片大小。其实就是换了张图片。追问是两张图片啊，但是两张图片长度不一样，橙色的图片无法完全显示出来，也就是说没有那种向左伸出的效果