新浦京81707con > 软件下载 > jQuery实现圣诞节礼物传送,原生Javascript和jQuery做

原标题:jQuery实现圣诞节礼物传送,原生Javascript和jQuery做

浏览次数:165 时间:2019-08-28

接触jquery也是有一段时间了,先天恰恰利用轮播图来练练手。博文的面前会介绍贰个简练用jquery做轮播图的事例,中间会插入一些有关轮播图越多的沉思,在前面会用Javascript的办法来写贰个轮播图,最终则是有关jquery和Javascript的可比。

轮播图:

大概介绍

jquery做轮播图的事例:

接触jquery也许有一段时间了,今日刚刚利用轮播图来练练手。博文的先头会介绍三个简易用jquery做轮播图的例子,中间会插入一些关于轮播图更加多的思索,在前面会用Javascript的章程来写二个轮播图,最终则是关于jquery和Javascript的可比。轮播图的意义能够点击如下链接查看:

早上见到了贰个送圣诞礼物的小动画,正好要快到圣诞节了,就动网络麻豆仿并改善了一部分小标题

html部分代码:

jquery做轮播图的事例:

原地址:花式轮播----圣诞礼物传送

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <link rel="stylesheet" type="text/css" href="demo.css"/>
 <script src="../jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="demo.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div id="igs">
 <a class="ig" href="#"><img src="images/1.jpg"/></a>
 <a class="ig" href="#"><img src="images/2.jpg"/></a>
 <a class="ig" href="#"><img src="images/3.jpg"/></a>
 <a class="ig" href="#"><img src="images/4.jpg"/></a>
 <a class="ig" href="#"><img src="images/5.jpg"/></a>

 <div class="btn btn1"><</div>
 <div class="btn btn2">></div>

 <ul id="tabs">
 <li class="tab">1</li>
 <li class="tab">2</li>
 <li class="tab">3</li>
 <li class="tab">4</li>
 <li class="tab">5</li>
 </ul>
 </div>
 </body>
</html>

html部分代码:

思路:动画中总共有三个红包,他们平均遍及在显示器中,设置最外边的多个红包旋转一定的角度并隐藏,动画开头,各样礼物向右移动一定的地方,然后再把第三个红包增添到第八个礼物在此以前,这样那八个礼物就重新排列了,在写jQ时只管礼物地点的变动就行了,因为礼物的转动和隐形在样式中都早已设置好了,有些礼物假使改为第二个礼物就能自动遮蔽旋转

css部分代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <script src="../jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="demo.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="igs">
      <a class="ig" href="#"><img src="images/1.jpg"/></a>
      <a class="ig" href="#"><img src="images/2.jpg"/></a>
      <a class="ig" href="#"><img src="images/3.jpg"/></a>
      <a class="ig" href="#"><img src="images/4.jpg"/></a>
      <a class="ig" href="#"><img src="images/5.jpg"/></a>

      <div class="btn btn1"><</div>
      <div class="btn btn2">></div>

      <ul id="tabs">
        <li class="tab">1</li>
        <li class="tab">2</li>
        <li class="tab">3</li>
        <li class="tab">4</li>
        <li class="tab">5</li>
      </ul>
    </div>
  </body>
</html>

主题组织

* {
 margin: 0;
 padding: 0;
}

#igs {
 margin: 10px auto;
 width: 700px;
 height: 320px;
 position: relative;
}

.ig {
 position: absolute;
}

#tabs {
 position: absolute;
 list-style: none;
 background-color: rgba(255,255,255,.5);
 left: 300px;
 bottom: 10px;
 border-radius: 10px;
 padding: 5px 0 5px 5px;
}

.tab{
 float: left;
 text-align: center;
 line-height: 20px;
 width: 20px;
 height: 20px;
 cursor: pointer;
 overflow: hidden;
 margin-right: 4px;
 border-radius: 100%;
 background-color: rgb(200,100,150);
}

.btn{
 position: absolute;
 color: #fff;
 top: 110px;
 width: 40px;
 height: 100px;
 background-color: rgba(255,255,255,.3);
 font-size: 40px;
 font-weight: bold;
 text-align: center;
 line-height: 100px;
 border-radius: 5px;
 margin: 0 5px;
}

.btn2{
 position: absolute;
 right: 0px;
}

.btn:hover{
 background-color: rgba(0,0,0,.7);
}

css部分代码:

代码:

js部分代码:

* {
  margin: 0;
  padding: 0;
}

#igs {
  margin: 10px auto;
  width: 700px;
  height: 320px;
  position: relative;
}

.ig {
  position: absolute;
}

#tabs {
  position: absolute;
  list-style: none;
  background-color: rgba(255,255,255,.5);
  left: 300px;
  bottom: 10px;
  border-radius: 10px;
  padding: 5px 0 5px 5px;
}

.tab{
  float: left;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  overflow: hidden;
  margin-right: 4px;
  border-radius: 100%;
  background-color: rgb(200,100,150);
}

.btn{
  position: absolute;
  color: #fff;
  top: 110px;
  width: 40px;
  height: 100px;
  background-color: rgba(255,255,255,.3);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  margin: 0 5px;
}

.btn2{
  position: absolute;
  right: 0px;
}

.btn:hover{
  background-color: rgba(0,0,0,.7);
}
<div class="cr">
 <div class="cr-l"><img src="img/fatherCh.png" alt="图片 1"/></div>
 <div class="cr-icon">
  <div id="cr-icon">
  <img style="left:5%" src="img/gift2.png" alt="图片 2"/>
  <img style="left:25%" src="img/gift2.png" alt="图片 3"/>
  <img style="left:45%" src="img/gift2.png" alt="图片 4"/>
  <img style="left:65%" src="img/gift2.png" alt="图片 5"/>
  <img style="left:85%" src="img/gift2.png" alt="图片 6"/>
  </div>
 </div>
 <div class="cr-r"><img src="img/family.png" alt="图片 7"/></div>
 </div>
//定义全局变量和定时器
var i = 0 ;
var timer;

$(document).ready(function(){
 //用jquery方法设置第一张图片显示,其余隐藏
 $('.ig').eq(0).show().siblings('.ig').hide();

 //调用showTime()函数(轮播函数)
 showTime();

 //当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
 $('.tab').hover(function(){
 //获取当前i的值,并显示,同时还要清除定时器
 i = $(this).index();
 Show();
 clearInterval(timer);
 },function(){
 //
 showTime();
 });

 //鼠标点击左侧的箭头
 $('.btn1').click(function(){
 clearInterval(timer);
 if(i == 0){
 i = 5;//注意此时i的值
 }
 i--;
 Show();
 showTime();
 });

 //鼠标点击右侧的箭头
 $('.btn2').click(function(){
 clearInterval(timer);
 if(i == 4){
 i = -1;//注意此时i的值
 }
 i  ;
 Show();
 showTime();
 });

});


//创建一个showTime函数
function showTime(){
 //定时器
 timer = setInterval(function(){
 //调用一个Show()函数
 Show();
 i  ;
 //当图片是最后一张的后面时,设置图片为第一张
 if(i==5){
 i=0;
 }
 },2000);
}


//创建一个Show函数
function Show(){
 //在这里可以用其他jquery的动画
 $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);

 //给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式
 $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');

 /*
 * css中添加的代码:
 * .bg{ background-color: #f00; }
 * */
}

 

样式

完了效果图:

js部分代码:

在css中用到了:first 和 :last 属性,那四个属性是动态的,假设文书档案的结构变了,那多少个特性的值也会相应的转移,那样我们就不必再费神的论断哪些成分是终极三个因素(第叁个因素),直接用这两性子格就能活动选择第一个成分和末段三个成分

图片 8

//定义全局变量和定时器
var i = 0 ;
var timer;

$(document).ready(function(){
  //用jquery方法设置第一张图片显示,其余隐藏
  $('.ig').eq(0).show().siblings('.ig').hide();

  //调用showTime()函数(轮播函数)
  showTime();

  //当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
  $('.tab').hover(function(){
    //获取当前i的值,并显示,同时还要清除定时器
    i = $(this).index();
    Show();
    clearInterval(timer);
  },function(){
    //
    showTime();
  });

  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = 5;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });

  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    if(i == 4){
      i = -1;//注意此时i的值
    }
    i  ;
    Show();
    showTime();
  });

});


//创建一个showTime函数
function showTime(){
  //定时器
  timer = setInterval(function(){
    //调用一个Show()函数
    Show();
    i  ;
    //当图片是最后一张的后面时,设置图片为第一张
    if(i==5){
      i=0;
    }
  },2000);
}


//创建一个Show函数
function Show(){
  //在这里可以用其他jquery的动画
  $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);

  //给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式
  $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');

  /*
   * css中添加的代码:
   * .bg{ background-color: #f00; }
   * */
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
   }
 .cr{
  width: 100%;
  position: relative;
  background: url("../img/bg.png") no-repeat 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  overflow: hidden;
 }
 .cr-l,.cr-r{
  position: absolute;
  bottom:10%;
  width: 20.8%;
  height: 70%;
  z-index:100;
 }
 .cr-l img,.cr-r img{
  width: 100%;
  position: absolute;
  top:50%;
 }
 .cr-l{
  left: 0;
 }
 .cr-r{
  right:0;
 }
 .cr-icon{
  bottom: 15%;
  left:0;
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 70%;
  text-align: center;
 }
 .cr-icon img{
  margin-right: 25px;
  width: 10%;
  vertical-align: top;
  position: absolute;
  bottom: 0;
  opacity: 1;
  transform:rotate(0deg);
  transition: all 1s;
 }
 .cr-icon img:first-child{
  transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  opacity: 0;
  width: 0;
 }
 .cr-icon img:last-child{
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  opacity: 0;
  width: 0;
 }

至于jquery做轮播图越多的图谋

做到效果图:

jQuery代码

思考一:在第七行代码中用jquery方法设置第一张图片呈现,其他遮盖,大家还应该有未有任何格局能够兑现?
思路:通过jquery的筛选器来贯彻

图片 9

在源码中,小编将这么些多个礼物的启幕地点写在了HTML结构中,作者觉着不太好就在jQuery的代码中完结了,代码未有啥难的,正是对思路的兑现

代码示例:

形功用果,点击如下链接就可以查看:

$(function() {
 // 点击礼物图片,切换图片
 $('#cr-icon img').click(function(){
  if($(this).attr('src') == 'img/gift2.png'){
  $(this).attr('src','img/gift.png');
  }else{
  $(this).attr('src','img/gift2.png');
  }
 });
 var timer = null;
 var oImg = $('#cr-icon img');
 var end = document.body.clientWidth;
 var height = document.body.scrollHeight;
 // 设置高
 $(".cr").css("height",height);
 // 设置图片的初始位置
 for(var i=0;i<oImg.length;i  ){
  $(oImg[i]).css('left', 5 i*20 '%');
 }
 // 图片轮换函数
 function scrollLogo(){
  oImg.each(function(){
  var left = parseInt($(this).css('left'));
  left  = end * 0.2;
  $(this).css('left',left);
  });
  $('#cr-icon img:last').insertBefore('#cr-icon img:first').css('left',end * 0.05);
 }
 scrollLogo();
 // 定时器,开始轮换
 timer = setInterval(scrollLogo,1800);
 // 鼠标移入清楚轮换
 oImg.mouseover(function(){
  clearInterval(timer);
 });
 // 鼠标移出开始轮换
 oImg.mouseleave(function() {
  timer = setInterval(scrollLogo,1800);
 });
 });

本文由新浦京81707con发布于软件下载,转载请注明出处:jQuery实现圣诞节礼物传送,原生Javascript和jQuery做

关键词: 新浦京81707con

上一篇:js动画知识点,js运动框架逐渐递进版

下一篇:没有了