查找索引/ie滤镜/动态背景/属性attr和prop
1. 查找索引
查找当前元素在指定范围内的索引序号,示例:
$('.right_newestState_con').find('em').index($(this));
2. ie滤镜
利用ie的私有滤镜让低版本ie浏览器支持一些高级效果
2.1 透明度
#myElement {
opacity: .4; /* other browsers */
filter: progid: DXImageTransform.Microsoft.Alpha( opacity=40 ); /* IE6, IE7, and IE8 */
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha( opacity=40 )"; /* IE8 only */
}
2.2 PNG图片透明度
.transparent{
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/nav_bg.png);
_background:none;
}
2.3 阴影
.box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox */
-webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow( color='#969696', Direction=145, Strength=3 );
}
2.4 渐变
#gradient {
background-image: -moz-linear-gradient( top, #81a8cb, #4477a1 ); /* Firefox 3.6 */
background-image: -webkit-gradient(linear , left bottom , left top , color-stop( 0, #4477a1 ) , color-stop( 1, #81a8cb )); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = '#81a8cb', endColorstr = '#4477a1' ); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#81a8cb', endColorstr = '#4477a1' )"; /* IE8 */
}
2.5 背景色透明(RGBA)
#rgba p {
background: rgba( 98, 135, 167, .4 ); /* other browsers */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#886287a7', endColorstr = '#886287a7' ); /* IE */
}
2.6 多背景
#multi-bg {
/* other browsers */
background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
/* IE */
background: transparent url(images/bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src = 'images/bg-image-2.gif', sizingMethod = 'crop'); /* IE6-8 */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'images/bg-image-2.gif', sizingMethod = 'crop')"; /* IE8 only */
}
2.7 旋转
#rotate {
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-moz-transform: rotate(180deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 2); /* IE */
}
2.8 其他
3. 动态背景
//流动背景
var offsetbg = 0;
var windowWidth = Number($(window).width());
setInterval(function bg() {
if (offsetbg >= windowWidth) {
offsetbg = -windowWidth;
}
offsetbg += 10;
$(".section_footer_flow").css("background-position-x", -offsetbg + "px")
}, 90 );
参考链接:jquery实现动态背景效果
4. 属性attr和prop
查找索引/ie滤镜/动态背景/属性attr和prop的更多相关文章
- Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]
1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...
- jquery操作属性 attr()和 prop()兼容性问题
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...
- jQuery .attr() vs. .prop()
Property vs. Attribute 在开始正式比较prop()和attr()两个jQuery方法之前,我们有必要先弄清一下Property和Attribute两个单词的意思.在中文里面,它们 ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- SpringCloud的Archaius - 动态管理属性配置
参考链接:http://www.th7.cn/Program/java/201608/919853.shtml 一.Archaius是什么? Archaius用于动态管理属性配置文件. 参考自Gett ...
- easyui 如何为标签动态追加属性实现渲染效果
简述一下在项目遇到的问题,这边有一个需求,选择不同类型,加载不同的div标签(其中属性是否必填是区分类型的关键) html界面是这样的 <div class="grid_1 lbl&q ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css3 动态背景
动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.当中的80% 20%为 ...
- CSS基本样式-背景属性
代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...
随机推荐
- (C/C++学习)7.数组及其访问方式
说明:数组的数据类型是一种构造类型,而存储数组的内存是一段连续的存储区域.数组的数据类型决定了连续内存的访问方式,它包括数组的三要素:起始地址.步长以及元素个数. 一.一维数组 1.形式:type 数 ...
- C++编写谷歌日历
#include<iostream> #include<fstream> using namespace std; void main() //程序从这里开始运行 { int ...
- Robberies (01背包dp变形)
题意:一个强盗要抢劫银行又不想被抓到,所以要进行概率分析求他在不被抓的情况下能抢最多的钱.他给定T(样例个数),N(要抢的银行的个数),P(被抓的概率要小于P)Mj(强盗能抢第j个银行Mj元钱),Pj ...
- Coefficient Computation (大整数、Java解决)
Coefficient Computation UVALive8265 题意:计算组合数C(n,k)的值并将值按给定的进制输出. 思路:Java大整数类硬上. PS:刚刚学完Java的大整数类,结果却 ...
- PAT 1110 Complete Binary Tree
Given a tree, you are supposed to tell if it is a complete binary tree. Input Specification: Each in ...
- 深入浅出了解HTTP协议
深入浅出了解HTTP协议
- 【Codeforces 349B】Color the Fence
[链接] 我是链接,点我呀:) [题意] 让你组成一个只由1~9组成的数字 每个数字需要的paint数字给定. 让你组成一个最大的数字,且所有数字的paint的总和不超过v. [题解] 先求出a中的最 ...
- fzu 2128
第一组实例 aaaa 2 aa aa 第二组 a 1 c 第三组 abcdef 2 abcd bcd 第四组 abcdef 2 abcd bcde 第五组 aaaa 2 a aa 第六组 lgcstr ...
- P1331 海战 洛谷
题目描述 在峰会期间,武装部队得处于高度戒备.警察将监视每一条大街,军队将保卫建筑物,领空将布满了F-2003飞机.此外,巡洋船只和舰队将被派去保护海岸线.不幸的是因为种种原因,国防海军部仅有很少的几 ...
- 怎样用Android Studio打多包名APK
问题:项目中不同的分发渠道可能须要打包多种APK(相同的代码),包名可能是不一样的,假设一个一个改动包名又一次编apk是非常麻烦,能够參考下列步骤在Android Studio上操纵Gradle来打包 ...