当前位置:首页 > javascript技术文章 > JS仿万科底部的新闻滑动特效代码

JS仿万科底部的新闻滑动效果的实现方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:155

这篇文章主要知识点是关于js、滑动效果、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

移动网页设计与开发:HTML5+CSS3+JavaScript
  • 类型:移动开发大小:30.2 MB格式:PDF作者:Peter Gasston
立即下载

JS仿万科底部的新闻滑动特效代码

废话不多说了,直接给大家贴代码了,具体代码如下所述:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>仿万科的底部的新闻滑动特效</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #subject {
      position: relative;
      width: 80%;
      height: 165px;
      background: skyblue;
      margin: 200px auto;
      overflow: hidden;
    }
    #subject > ul > li {
      position: absolute;
      float: left;
      list-style: none;
      width: 40%;
      height: 165px;
      font-size: 48px;
      text-align: center;
      color: #fff;
      line-height: 165px;
      transition: 0.5s;
    }
    .item1 {
      background: orange;
      left: 0;
      z-index: 1;
    }
    /*hover:item1*/
    #subject.state-1 .item2,
    .item2 {
      background: deepskyblue;
      left: 40%;
      z-index: 2;
    }
    /*hover:item2*/
    #subject.state-4 .item2,
    #subject.state-3 .item2,
    #subject.state-2 .item2 {
      left: 20%;
    }
    /*hover:item3*/
    #subject.state-4 .item3,
    #subject.state-3 .item3 {
      left: 40%;
    }
    /*hover:item4*/
    #subject.state-4 .item4{
      left: 60%;
    }
    #subject.state-1 .item3,
    .item3 {
      background: mediumseagreen;
      left: 60%;
      z-index: 3;
    }
    #subject.state-3 .item4,
    #subject.state-2 .item4,
    #subject.state-1 .item4,
    .item4 {
      background: pink;
      left: 80%;
      z-index: 4;
    }
  </style>
</head>
<body>
<div id="subject" class="wrapper">
  <ul>
    <li class="item item1">1</li>
    <li class="item item2">2</li>
    <li class="item item3">3</li>
    <li class="item item4">4</li>
  </ul>
</div>
<script>
  $(function () {
    $('.item').hover(function () {
      if ($(this).hasClass('item1')) {
        $('#subject').removeClass().addClass('state-1');
      }
      if ($(this).hasClass('item2')) {
        $('#subject').removeClass().addClass('state-2');
      }
      if ($(this).hasClass('item3')) {
        $('#subject').removeClass().addClass('state-3');
      }
      if ($(this).hasClass('item4')) {
        $('#subject').removeClass().addClass('state-4');
      }
    });
    $('#subject').mouseleave(function () {
      $('#subject').removeClass();
    });
  });
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的JS仿万科底部的新闻滑动特效代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

IntelliJ IDEA 注册码(激活到2089年)

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

展开 +

收起 -

javascript 相关电子书
学习笔记
网友NO.979016

js插件实现图片滑动验证码

图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标。 先上代码吧,做个备份记录 jquery.lgymove.js /** * Created by lgy on 2017/10/21. * 图片验证码 */ (function ($) { $.fn.imgcode = function (options) { //初始化参数 var defaults = { callback:"" //回调函数 }; var opts = $.extend(defaults, options); return this.each(function () { var $this = $(this);//获取当前对象 var html = 'div class="code-k-div"' + 'div class="code_bg"/div' + 'div class="code-con"' + 'div class="code-img"' + 'div class="code-img-con"' + 'div class="code-mask"img src="../img/front(1).png"/div' + 'img src="../img/back(1).png"/div' + 'div class="code-push"i class="icon-login-bg icon-w-25 icon-push"刷新/ispan class="code-tip"/span/div' + '/div' + 'div class="code-btn"' + 'div class="code-btn-img code-btn-m"/div' + 'span按住滑块,拖动完……

网友NO.244845

内容滑动切换效果jquery.hwSlide.js插件封装

经过前两部分的讲解,我们大概知道内容滑动切换的基本开发思路和技巧,现在我们在第三部分将前面两部分的代码进行优化,封装成一个jQuery插件:jquery.hwSlide.js。开发者可以轻松创建各种图片轮播效果、焦点图效果、图文混排滑动效果。 下载源码 hwSlider具有以下特性: 多个参数定制,满足不同项目需求。 支持移动端触控滑动。 支持图文混排,支持各种html元素。 响应式自适应屏幕尺寸。 同一页面支持多个滑动切换。 轻量级的,压缩版不到4KB。 支持所有现代浏览器,支持ie8+。 HTML 首先在页面head部位载入hwSlider所需的基本css样式文件,以及jquery库文件和hwSlider插件,当然我建议把js文件放在页面底部加载。 link type="text/css" rel="stylesheet" href="css/hwslider.css" / script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"/script script type="text/javascri……

网友NO.741372

swiper.js插件实现pc端文本上下滑动功能示例

本文实例讲述了swiper.js插件实现pc端文本上下滑动功能。分享给大家供大家参考,具体如下: 在网站上看小说,文本太长时,靠鼠标去拖动滚动条太麻烦,鼠标滚轮又不精确,滚一下就不知道跑到哪去了。能不能像移动端那样可以鼠标上下滑动呢?swiper可以完美解决这个问题。 1、首先当然是引入swiper文件了: link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css" rel="external nofollow" script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"/script 2、html部分: div class="swiper-container" div class="swiper-wrapper" div class="swiper-slide" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ab natus quae incidunt a officiis excepturi alias sit repellendus debitis? Inventore dolorum atque quibusdam hic doloribus dignissimos ratione unde dolorem numquam quam illum nulla. Nesciunt culpa sit libero nemo at……

网友NO.704945

JS实现移动端整屏滑动的实例代码

基本思路: 1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了 2)手指抬起后,向对应反向操作改变当前页的位置 具体代码如下: html div id="wrap" div id="page01" class="pages"第一屏/div div id="page02" class="pages"第二屏/div div id="page03" class="pages"第三屏/div div id="page04" class="pages"第四屏/div/divdiv id="dots" span class="now"/spanspan class=""/spanspan class=""/spanspan class=""/span/div css *{ margin:0; padding:0; } body{ overflow: hidden; } #wrap div{ width: 10rem; position: absolute; left: 0; top: 0; background: #fff; transition: all 0.3s ease; } #dots{ position: fixed; right: 5px; top: 40%; z-index: 9; } #dots span{ display: block; height: 0.2rem; width: 0.2rem; border: 1px solid #000; border-radius: 50%; margin-bottom: 3px; } #dots .now{ background: #555; } js分为两块 第一,设置html标签的font-size,以便设置rem的基数 (放在页面头部……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757