积累做网站添加的所有动态效果

1.一排中有好几个div 让它一个一个依次淡淡的出现：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>

<body>

<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>

2.给图片加个动的效果：

一个div里面有个img图片

<div class="xwzx_tp fl">
     <img src="images/20171103115900271.jpg"  />
</div>

样式：

.xwzx_tp{
　　overflow: hidden;　　　　　　　　　　　　　　//给装图片的外面那个div加个 overflow:hidden
}
.xwzx_tp img{
　　-webkit-transition: all 1s;
　　-moz-transition: all 1s;　　　　　　　　　　//给这个img图片加个延迟一秒释放。
　　-ms-transition: all 1s;
　　-o-transition: all 1s;
　　transition: all 1s;
}
.xwzx_tp img:hover{
　　-webkit-transform: scale(1.1);
　　-moz-transform: scale(1.1);　　　　　　　　//鼠标移上去的动态效果。
　　-ms-transform: scale(1.1);
　　-o-transform: scale(1.1);
　　transform: scale(1.1);
}

鼠标移上去给div增加一个class名：

<script type="text/javascript">
    $('.elm').hover(
        function() {
            $(this).addClass('hover')
        },
        function() {
            $(this).removeClass('hover')
        }
    )
</script>

用js实现鼠标的移入移出效果：

<script type="text/javascript">
         // 鼠标移入移出事件
         $('li').hover(function() {
             // 鼠标移入时添加hover类
             $(this).addClass('hover')
         }, function() {
             // 鼠标移出时移出hover类
             $(this).removeClass('hover')
         });
</script>

jquery实现鼠标移动上和移走后的效果：

$("#aaa").mouseover(function(){
    $("#aaa").css("background-color","red");
})
 
$("#aaa").mouseleave(function(){
    $("#aaa").css("background-color","green");
})

积累 做网站添加的 所有动态效果

猜你喜欢

积累做网站添加的所有动态效果