js效果

来源：互联网发布：c语言英语怎么说编辑：程序博客网时间：2024/06/03 16:01

简单轮播图效果

<script>      $(".banner a").mouseover(function(){      $(".banner a")      .removeClass("nowa")      $(this)      .addClass("nowa")      var x=$(".banner a").index($(this));      $(".banner img").hide();      $(".banner img").eq(x).show();    })    $(function(){      /*1秒钟换一张图显示*/      var n=0;      function changeImg(){        if(n<4){          n++;        }else{          n=0;        }        $(".banner img").hide();        $(".banner img").eq(n).show();       }       var timer = setInterval(changeImg,3000);       /*鼠标经过box时，停止；鼠标离开box，开始*/       $(".banner").mouseover(function(){          clearInterval(timer);         }).mouseout(function(){           timer = setInterval(changeImg,3000);           })    })    </script>

html

<div class="banner">    <img style="display:block;" src="banner-1.png">      <img src="banner-2.png">      <img src="banner-3.png">      <img src="banner-4.png">      <img src="banner-5.png">      <a class="" href="" style="left:486px;"></a>      <a class="" href="" style="left:536px;"></a>      <a class="" href="" style="left:586px;"></a>      <a class="" href="" style="left:636px;"></a>      <a class="" href="" style="left:686px;"></a>  </div>

if点击某标签 {do}

if点击空白处 {do}

$(function(){    $("点击标签").click(function(event){        var e=window.event || event;        if(e.stopPropagation){            e.stopPropagation();        }else{            e.cancelBubble = true;        }           //点击标签后的操作    });    $("弹窗标签").click(function(event){        var e=window.event || event;        if(e.stopPropagation){            e.stopPropagation();        }else{            e.cancelBubble = true;        }    });    document.onclick = function(){       //点击弹窗外 空白地的操作    };})

弹窗固定居中css

.mod_wepay {  border: solid 2px;  position: fixed;  top: 50%;  left: 50%;  max-width: 630px;  height: auto;  z-index: 2000;  visibility: hidden;  overflow-x:hidden;  -webkit-backface-visibility: hidden;  -moz-backface-visibility: hidden;  backface-visibility: hidden;  -webkit-transform: translateX(-50%) translateY(-50%);  -moz-transform: translateX(-50%) translateY(-50%);  -ms-transform: translateX(-50%) translateY(-50%);  transform: translateX(-50%) translateY(-50%);}

弹窗 - 遮盖层透明css

.ban{  position: fixed;  width: 100%;  height: 100%;  top: 0;  left: 0;  z-index: 1000;  opacity: 1;  display: none;  background: rgba(220, 220, 220, 0);  transition: all 0.3s;}

阅读全文

0 0