js背景自适应，学到了

最近在做一个项目,要求实现背景自适应,何为背景自适应呢? 1.如果背景图高度不够,背景height是100%,background-size就应该是 100% auto 2.如果背景图宽度不够,背景width是100%,background-size就应该是 auto 100% 具体是什么意思呢?还是上代码看到效果比较有说服力 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <…

FullBg-网页图片背景自适应大小

网页背景自适应大小jQuery插件 fullBG.js http://cbavota.bitbucket.org/fullbg/ HTML <img id="background" src="images/bg.jpg" style="visibility: hidden" id="background"/> CSS /* =Default needed for fullBG jQuery plugin ---…

JS实现自适应宽度的Tag切换

效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实现自适应宽度的Tag切换 - HoverTree</titl…

基于js的自适应、多样式轮播图插件（兼容IE8+、FF、chrome等主流浏览器）

插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传入最外层盒子ID即可. 1.根据html中的Dom结构引入图片. 2.引入css和js文件 3.调用pomeloSlider.doslide(obj) sliderwidth:轮播图宽度,单位为像素,默认自适应全屏. outer:最外层盒子ID,默认为"outer" time:轮播的时间间…

js图片自适应尺寸居中函数处理

/* | autoSerializePicture.js 自适应格式化图片 | auther : baichaohua/2017-09-21 +------------------------------------------------ */ /* JSON 示例 [ { "imgSrc":"logo.png", //路径 "imgText":"示例图片1", //文本 "width":"18…

【JS】374- 重学 this 关键字

为什么要学习this关键字 1. 面试会问啊!总有一些面试官喜欢问你一段不可能这么写的代码.看一道经典且古老的面试题(学完本文后,文末会有一道更复杂的面试题等着你哦!) 代码如下: let a = 5; let obj = { a : 10, foo: function(){ console.log(this.a) } } let bar = obj.foo obj.foo() bar() 2. 我在读 Events 的 lib/events 源码的时候发现多次用到call关键字,看来有必要搞懂…

读jquery.cookie.js源码学到的几个技巧

一.兼容AMD.CommonJS和普通JS的写法 (function (factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // CommonJS factory(require('jquery')); } else { // Browser globals fact…

js 背景自动切换

//首页自动更换背景特效开始============================================ var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下. var timeInterval = 4000; //定义一个存放照片位置的数组,可以放任意个,在这里放3个 var arr =["Image/1.jpg","Image/2.jpg","Image/3.jpeg"]…

less常用样式集，清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。

.clear-float() { content: ''; display: block; clear: both; height:; } //伪元素清除浮动 .after-clear() { &:after { .clear-float(); } } //背景填充 .background-size(@size:100%) { -moz-background-size: @size @size; -webkit-background-size: @size @size; -o-backgroun…

VUE -- Vue.js每天必学之计算属性computed与$watch

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 ? 1 2 3 <div id="example"> a={{ a }}, b={{ b }} </div> ? 1 2 3 4 5 6 7 8 9 10 11 12 13 var vm = new V…

js 背景从无到黑的渐变字从白到黑的渐变

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css透明度的变化</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <…

[技术博客] JS正则活学活用

正则基本语法正则表达式(Regular Expression)是用单字符串来匹配一系列复合条件字符串的模式,对于乔姆斯基3型语法. 数学定义: 串行AB表示集合 {αβ | α ∈ A ,β ∈ B } 并行A|B表示集合{α | α ∈ A or α ∈ B} 子集复合A* 表示集合{a,b} = {ε,a,b,aa,ab,bb...} 这种定义下的正则表达式能够被有限自动机解析. 重复 '*' : [0,∞] '+' :[1,∞] {a,b}:重复次数的范围从a到b次转义同其他编程概念…

如何用js实现自适应，原来只是几行代码的事(╯‵□′)╯︵┻━┻

在javascript写下如下几行: (function (doc, win, undefined) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize', recalc = function () { var clientWidth…

div 背景自适应

.bg { background: url(images/title_bg.jpg); filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size: 100% 100%; background-size: 100% 100%; height: 150px; } <div class="bg"> &…

原生JS实现轮播+学前端的感受（防止走火入魔）

插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法前辈们可以无视下面这段废话: 在开始之前,先说下我学前端到现在的一点感受.到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5.CSS3.javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么…

Android学习系列(4)--App自适应draw9patch不失真背景

做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应.这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.背景自适应且不失真问题的存在制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解决的问题,我相信我们彼此都深有体会. 比如,列表的背景图一定,但是列表的高度随着列表数据项会发生变化:标题栏的背景,无论横屏还是竖屏,高分辨率还是低分辨率,都能自动填充满,而且不失真等等…

全屏轮播插件 fullPage.js应用(基础版兼容IE7，背景图版兼容IE8)

/** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */ html, body { margin:; padding:; } #superContainer { height: 100%; position: relative; } .section {…

重学js之JavaScript 面向对象的程序设计（创建对象）

注意: 本文章为 <重学js之JavaScript高级程序设计>系列第五章[JavaScript引用类型]. 关于<重学js之JavaScript高级程序设计>是重新回顾js基础的学习. 1. 什么是面向对象面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,再前面提到过.ES中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 对象的定义:'无序属性的集合,其属性可以包含基本值.对象或者函数.' 严格来讲,这就相当…

学信网改绑手机号码，但是忘记了老号码怎么办？利用node.js + puppeteer 跑脚本实现改绑手机号

最近登录学信网发现自己学信网上绑定的手机号码不是目前自己使用的手机号码,于是想改绑手机号,但是发现不记得之前的手机号码了: 于是百度各种方法都无济于事:也不想重新注册账号,最后看见一篇文章通过Python写脚本模拟提交这个号段的所有号码做验证,感觉挺靠谱,但是本人不会Python,也不想现学,不过我会node.js,我想通过 node.js + puppeteer 实现相同的功能,于是开干: 第一步:登录"查号吧"查找出匹配老号码的所有号段:传送门输入学信网提示的老号码的前三位与后两…

CSS背景图拉伸不变形

在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看. css代码: .bg{ background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size…

分享一个自己写的基于JQuery的一个Web背景切换的Demo

这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = function (options) { var defaults = { width: 1920, height: 1080, changeRate: 3000, isLoadLimit: false, loadLimit: 10000, changed: function () { }, top: 0, l…

从零开始学 Web 系列教程

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 前言昨天收到一个朋友的留言反馈,意思是说文章太多,找起来很麻烦,做个索引页就好了. 这个建议特…

发现视口（窗口）自适应的新大陆！！vw、vh

从事前端已经1年了,一直为背景自适应铺满整个屏幕而苦苦发愁,因为要适配不同的pc显示器,所以高度不能写死,但是写(height:100%)并不能实现,愁死我了~我要不用写好的css框架实现或者自己写js页获取高度实现.有一天在看网上的也个页面,突然看到了vh引起了我的关注,网上查了查资料对于控制长度的值不止有px.rem.em等等,瞬间感觉好落伍...接下来带着大家回顾一下css中的长度单位. 一.单位介绍 em 相对长度单位.相对于当前对象内文本的字体尺寸. 如当前对行内文本的字体尺寸未被人为…

js及jquery常用插件

1.backstretch背景图片插件可实现背景自适应效果 <script src="dist/js/lib/backstretch/jquery.backstretch.min.js"></script> $("body").backstretch("dist/img/background_index.png"); 2.滚动条插件 <script src="dist/js/lib/nicescroll/…

纯JS实现KeyboardNav(学习笔记)二

纯JS实现KeyboardNav(学习笔记)二这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码预览地址最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无icon或未设置网站按键盘上相应的按键进入对应网站鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies 清空cookies后保存在本地的网站将被清除,还原会初始状态 CSS样式…

Node.js大众点评爬虫

大众点评上有很多美食餐馆的信息,正好可以拿来练练手Node.js. 1. API分析大众点评开放了查询商家信息的API,这里给出了城市与cityid之间的对应关系,链接http://m.api.dianping.com/searchshop.json?&regionid=0&start=0&categoryid=10&sortid=0&cityid=110以GET方式给出了餐馆的信息(JSON格式).首先解释下GET参数的含义: start为步进数,表示分步获取信…

网页插件学javascript还是jquery好啊？

文章的起因,也是在群内交流是回答一个小伙的问题,一扯就停不下来,但由于个人知识面覆盖有限,自身基础又不够扎实,仅供参考: 问这个问题之前,我个人建议先搞清什么是jquery,什么是js? jquery的优点:他是常用的js工具方法的一堆封装,他在一定程度上加快前端开发的速度,会缩短项目开发周期,会减少很多代码. 缺点:因为jquery内部做了很多细节的处理,当然最终目的是为了方便的调用.但是有些初学者误以为,js的本来面貌就是这个样子.用Jquery去描述业务场景,而不是试图用代码逻辑来…

JS基础学习（一）

首先感谢 http://www.w3school.com.cn/js/index.asp 学js真的很方便,&下面的内容其实是我自己做的一个备忘第一节大致了解一 js基本介绍 1.轻量级脚本语言 2.可插入html,插入后可使用浏览器执行二 js输出 document.write("中间写你要输出的东西");//在加载完全部文字后,再次使用它,会覆盖之前的内容 alert("弹出框,输入你要弹出的东西"); 三 js对事件作出反应 <butto…

通过Laravel 初识Vue.js

最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中国人自己写的,所以很多思想还是很好接受的,如果你想对php框架入门的话,我倒觉得tp是个挺不错的选择.当然ci框架也是一个很不错的选择.因为它足够轻量级.tp的mvc架构会让你很好接受.在前后台的应用上看起来很方便.当然这在yii框架里好像更简单方便些,因为我只是接触国yii框架,不是特别了解.在接…

js与jquery异同

大家都知道jquery是js的一个库,很多东西大多数简写了,让js写起来特别的方便.但是对与学习的人来说,最好是先学会了js再去学jquery会更好.在学得过程中你会发现两者实现的原理是差不多的,但是写法上是有很多区别的.下面是个人的一些简单的积累,来区分二者的写法. 1.起步如果要用jquery的时候需要去引用jquery库的js.你可以下载到本地,或者是用cdn的js也可以. 2.选择器选择方式/js/jquery js jquery 选择id document.getElementBy…

【js背景自适应，学到了】的更多相关文章