查找索引/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 ...
随机推荐
- time、datatime模块
python中时间日期格式化符号 %Y 年份(4位数表示) %y 年份(2位数表示) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数 %I 12小时制小时数 %M 分 ...
- 针对mdadm的RAID1失效测试
背景 对软RAID(mdadm)方式进行各个场景失效测试. 一.初始信息 内核版本: root@omv30:~# uname -a Linux omv30 4.18.0-0.bpo.1-amd64 # ...
- BZOJ 1606 USACO 2008 Dec. 购买干草
[题意概述] 有n件物品,每件物品有体积Vi,背包容量为C,问最多可以装多少体积的物品 [题解] 显然是个无限背包嘛.. 直接做背包DP就好 注意无限背包的写法和01背包的区别 #include< ...
- ssm 数据库连接池配置
1.工程引入druid-1.1.2.jar包2.修改spring-common.xml文件 <!-- 1. 数据源 : DruidDataSource--> <bean id=&qu ...
- SCU Travel
Travel The country frog lives in has n towns which are conveniently numbered by 1,2,…,n . Among n(n− ...
- CTF密码学总结
CTF中那些脑洞大开的编码和加密 摘自:https://www.cnblogs.com/mq0036/p/6544055.html 0x00 前言 正文开始之前先闲扯几句吧,玩CTF的小伙伴也许会遇到 ...
- cogs 315. [POJ3255] 地砖RoadBlocks
315. [POJ3255] 地砖RoadBlocks ★★★ 输入文件:block.in 输出文件:block.out 简单对比时间限制:1 s 内存限制:128 MB Descri ...
- python 执行环境
一些函数 执行其它非python程序 1 一些函数 callable callable()是一个布尔函数,确定一个对象是否可以通过函数操作符(())来调用.如果函数可调用便返回True,否则便是Fal ...
- ural 1468
写了好久,不知道为什么不过,也不清楚到底卡在哪里... 只好看别人的代码,感觉除了HASH不一样外,倒没什么特别之处.同时参考那论文写的.. http://blog.csdn.net/jyysc201 ...
- 虚拟化(四):vsphere高可用功能前提-共享存储搭建
虚拟化(一):虚拟化及vmware产品介绍 虚拟化(二):虚拟化及vmware workstation产品使用 虚拟化(三):vsphere套件的安装注意及使用 虚拟化(四):vsphere高可用功能 ...