简介 1、轮播图切换时间间隔,鼠标悬停停止 2、文档定位$(document).scrollTop() <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl ...
分类:
其他好文 时间:
2020-06-28 00:40:05
阅读次数:
109
说明 刚开始是打算使用jQuery中的fadeIn和fadeOut方法来完成这种带有渐变效果的轮播图的,由于好长时间没有碰jQuery (实力不允许:) ) ,所以在用jQuery尝试了一下并且失败了之后,就打算使用原生的JavaScript来完成了。 实现原理 我首先在CSS中定义好了两个类,一个 ...
分类:
Web程序 时间:
2020-06-27 20:24:47
阅读次数:
117
轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: 1.鼠标经过轮播图模块,左右按钮显示;鼠标离开时隐藏; 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理; 3.图片播放的同时,下面小圆圈模块跟随一起变化; 4.点击小圆圈,可以播放相应图片; 5.鼠标不经过轮播图,轮播图也 ...
分类:
Web程序 时间:
2020-06-26 12:38:39
阅读次数:
63
ul{ padding: 0; margin: 0; } .swipper { width: 50%; background-color: #99a9bf; position: relative; overflow: hidden; .swipper-item { top:0; left: 0; p ...
分类:
其他好文 时间:
2020-06-24 22:01:21
阅读次数:
221
import React, { useState, useEffect, useRef } from "react"; import "./swipper.less"; export default function Swipper(props) { const swipperStyle = { h ...
分类:
其他好文 时间:
2020-06-24 21:35:20
阅读次数:
69
前言 BootStrap4作为最出色的前端响应式框架之一,能够根据不同的设备,调整页面显示效果。但是,仅仅依靠调整原有元素的大小、排列,很难有好的呈现效果和用户体验。因此对于电脑及手机端用户,要根据设备的不同适当更换页面的内容,来达到更好的页面呈现效果及用户体验。 案例 先来看一个小案例,这是同一个 ...
分类:
其他好文 时间:
2020-06-23 15:21:19
阅读次数:
65
16 前端项目搭建 1 创建项目 cd 项目目录下 vue init webpack 项目名 运行项目: npm run dev 也可以在pycharm中运行。 如果,多个Vue项目在运行,8080端口被占用,服务器会自动改端口 2 初始化项目 将HelloWorld.vue 删除,清除APP.vu ...
分类:
其他好文 时间:
2020-06-22 23:01:06
阅读次数:
50
1.轮播图效果 1.在后端开发获取banner的api: 1.在后端项目NewCenter/apps/user_operations/views.py中开发获取片区banner图的视图: from django.shortcuts import render,HttpResponse from re ...
分类:
移动开发 时间:
2020-06-21 09:56:16
阅读次数:
102
Slick.js使用方法(个人总结) 相比于Swiper而选择使用Slick.js的原因主要是因为其兼容不错并且在手机端的滑动效果更顺畅 官方参数介绍:官方地址 参数 类型 默认值 描述 accessibility 布尔值 TRUE 启用Tab键和箭头键导航 adaptiveHeight 布尔值 F ...
分类:
Web程序 时间:
2020-06-18 22:08:22
阅读次数:
381
官方文档 一、vue的起步 创建实例化对象: <div id='app'> <h3>{{xx}}</h3> </div> <script src="./js/vue.js"></script> <script> // 使用vue第一步,创建vue实例对象 var app = new Vue({ el ...
分类:
其他好文 时间:
2020-06-18 19:31:05
阅读次数:
41