ul | 易学教程

CSS和jQuery分别实现图片无缝滚动效果

阅读更多关于 CSS和jQuery分别实现图片无缝滚动效果

一、效果图二、使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片无缝滚动</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #con{ width: 800px; margin: auto; margin-top: 100px; /* 超出div的部分隐藏 */ overflow: hidden; height: 158px; } li{ list-style: none; float: left; } img{ width: 240px; height: 150px; margin: 5px; border-radius: 5px; } ul{ width: 2500px; } /* 动画播放状态 */ ul:hover{ cursor: pointer; /* 当鼠标移动到图片上时动画停止 */ animation-play-state:paused; } /* 实现动画 */ #ul{ /* 动画名称，在定义关键帧动画时需要使用*/ animation-name: moveleft; /* 动画持续时间 */ animation-duration: 10s; /* 设置动画速度曲线:线性 */

JQuery：

阅读更多关于 JQuery：

一 jQuery是什么？ <1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 <2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! <3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 <4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 <5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById("

01-Vue.js基础

阅读更多关于 01-Vue.js基础

一、Vue基础 1、介绍　　 Vue 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有的项目整合。兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 Vue.js 不支持 IE8 及其以下 IE 版本。 2、Vue.js安装　　安装有三种方式，一种直接下载开发版本，第二种 CDN 链接，国外有比较稳定的两个 CDN ，第三种官方命令工具，可用于快速搭建大型单页应用。开发学习还是建议第一种，Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。 cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js 第三种安装就是利用淘宝 npm(大于3.0 )镜像下载：升级淘宝镜像: npm install cnpm -g #升级cnpm或者安装 cnpm install npm -g #升级npm npm -v #查看版本 cnpm install vue #安装最新版本

Vue

阅读更多关于 Vue

列表展示： <div id="app"> <h1>{{message}}</h1>  <ul> <li v-for="item in movies">{{item}}</li> </ul></div><script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message:"你好", movies:['人','无','星际','大话西游'] } })</script> 来源： https://www.cnblogs.com/Damocless/p/11895465.html

Vue

阅读更多关于 Vue

目录 Vue 实例成员指令组件生命周期钩子 Vue-CLI 项目搭建项目功能插件 Vue 在我们的大型项目开发的时候我们往往都会采用前后端分离的方案，而我们的前端一般都是采用Vue框架来实现前后端分离。那这样我们就不能不讲一下Vue开发的优点了：先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发特点单页面Web应用数据驱动数据的双先绑定虚拟DOM 平时开发可以直接使用js文件导入的形式使用Vue开发开发版本生产版本 <div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' }) </script> 实例成员 el 实例与页面挂载点一一对应一个页面中可以出现多个实例对应多个挂载点实例只操作挂载点内部内容 data data为插值表达式中的变量提供数据 data中的数据可以通过Vue实例直接或间接访问 methods methods为事件提供实现体 computed 一个变量依赖于多个变量当依赖的变量发生变化，便会触发 watch：监听用于监听某个变量的变化 delimiters：分隔符当我们的 {{}} 与其他组件发生冲突时可以使用这个来替换新的标识符指令文本指令

第二章、循环指令

阅读更多关于第二章、循环指令

循环指令概念： vue实例： <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "列表渲染", list: [1, 2, 3, 4, 5], dic: { name: 'zero', age: 88888, gender: 'god' }, persons: [ {name: "zero", age: 8}, {name: "egon", age: 78}, {name: "liuXX", age: 77}, {name: "yXX", age: 38} ] } }) </script> 1 遍历列表 <h1>{{ msg }}</h1>   <ul> <li>{{ list[0] }}</li> <li>{{ list[1] }}</li> <li>{{ list[2] }}</li> <li>{{ list[3] }}</li> <li>{{ list[4] }}</li> </ul>  <ul> <li v-for="n in list">{{ n }}</li> </ul> 2 循环需要绑定 :key 属性 <!--

响应下拉式菜单

阅读更多关于响应下拉式菜单

一、简介响应式下拉菜单可在多个移动端显示会有不同的效果。二、代码如下 <!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"/> <title>响应式下拉菜单</title> <link rel="stylesheet" type="text/css" href="demo020.css" media="screen and (min-width:1024px)"/> <link rel="stylesheet" type="text/css" href="demo021.css" media="screen and (max-width:1024px)"/> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> </head> <body> <div class="nav"> <div class="toggle"> <img class="tu" src="shitu2.png"/> <i id="btn" class="fa fa-bars"></i> </div> <div class

学习React之前你需要知道的的JavaScript基础知识

阅读更多关于学习React之前你需要知道的的JavaScript基础知识

在我的研讨会期间，更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法，但也包括三元运算符，语言中的简写版本，此对象，JavaScript内置函数（map，reduce，filter）或更常识性的概念，如：可组合性，可重用性，不变性或高阶函数。这些是基础知识，在开始使用React之前你不需要掌握这些基础知识，但在学习或实践它时肯定会出现这些基础知识。以下演练是我尝试为您提供一个几乎广泛但简明的列表，其中列出了所有不同的JavaScript功能，以补充您的React应用程序。如果您有任何其他不在列表中的内容，只需对本文发表评论，我会及时更新。目录从JavaScript中学习React React 和 JavaScript Classes React中的箭头函数作为React中的组件的fuuction React类组件语法在React中的Map, Reduce 和 Filter React中的var，let和const React中的三元运算符 React中的Import 和 Export React中的库 React中的高阶函数 React中的解构和传播运算符 There is more JavaScript than React 从JavaScript中学习React 当你进入React的世界时

web--响应式导航菜单

阅读更多关于 web--响应式导航菜单

响应式导航菜单代码如下 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>响应式导航菜单</title> <link rel="stylesheet" href="day01.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <div class="bars"> <span></span> <span></span> <span></span> </div> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">导航</a></li> <li><a href="#">产品</a></li> <li><a href="#">新闻</a></li> <li><a href="#">我们</a></li> </ul> <

轮播图详细代码

阅读更多关于轮播图详细代码

这里面我封装了一个animate.js这个js代码主要实现的是ul的移动, 按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓慢移动) （可参考之前写的简单动画案例） animate.js代码 //封装按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓慢移动) /* * 作用: 让一个元素,从左往右,或者从右往左缓慢移动 * element: 要求传入一个元素元素 * target : 元素移动的目标位置数字 * step: 步进(每次元素移动的距离) * callback : 回调函数到达目标位置之后,会被调用 * */ function animate(element, target, step, callback){ // 清除定时器 if(element.timeid){ clearInterval(element.timeid); } // 1. 设置定时器 element.timeid = setInterval(function(){ // 2. 获取元素的当前位置 var current = element.offsetLeft; // 3. 根据当前位置加上/减去我们的步进 // 如果当前位置大于目标位置,就是减去步进.否则就是加上步进 if(current > target){ // 证明是从右往左,应该减去step var

订阅 ul