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

参考链接:jQuery学习之prop和attr的区别

查找索引/ie滤镜/动态背景/属性attr和prop的更多相关文章

  1. Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]

    1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...

  2. jquery操作属性 attr()和 prop()兼容性问题

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  3. jQuery .attr() vs. .prop()

    Property vs. Attribute 在开始正式比较prop()和attr()两个jQuery方法之前,我们有必要先弄清一下Property和Attribute两个单词的意思.在中文里面,它们 ...

  4. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  5. SpringCloud的Archaius - 动态管理属性配置

    参考链接:http://www.th7.cn/Program/java/201608/919853.shtml 一.Archaius是什么? Archaius用于动态管理属性配置文件. 参考自Gett ...

  6. easyui 如何为标签动态追加属性实现渲染效果

    简述一下在项目遇到的问题,这边有一个需求,选择不同类型,加载不同的div标签(其中属性是否必填是区分类型的关键) html界面是这样的 <div class="grid_1 lbl&q ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. css3 动态背景

    动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.当中的80% 20%为 ...

  9. CSS基本样式-背景属性

    代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...

随机推荐

  1. Linux之ssh中XSHELL无法连接解决方案

    查漏补缺,理解概念,及时总结,互相交流,欢迎拍砖. 目前遇到的大致有以下几个问题分类: 网络是否连通.防火墙策略.DNS解析问题.端口是否开启.selinux是否开启-- 1.网络连通: 是否在同一网 ...

  2. 洛谷P1055 ISBN号码【字符数组处理】

    题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括 99 位数字. 11 位识别码和 33 位分隔符,其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上的减号 ...

  3. jquery 插件封装模板

    //插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...

  4. 【Codeforces 1106C】Lunar New Year and Number Division

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 看了下样例解释就懂了... 每次选择最大最小的两个组合 然后加起来.. [代码] import java.io.IOException; im ...

  5. P1464 Function 洛谷

    https://www.luogu.org/problem/show?pid=1464 题目描述 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回 ...

  6. js中call()和apply()的区别

    · 它们的共同之处: 都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.” · 它们的不同之处: apply: 最多只能有两个参数—— ...

  7. ELECTRON新增模块的方法

    因为electron和node.js用的V8版本不一致,所以直接使用npm安装的模块可能在electron中不可用,特别是使用c.c++开发的模块.官方的说明:https://github.com/e ...

  8. 优秀软件project师必备的7大特性

    不是每个程序猿都能成为优秀的软件project师. 在过去的6年时间里,我在Ooyala.Quora和now Quip这3个创业公司面试过许很多多挺有发展潜力的"种子选手".他们都 ...

  9. HTML标签列表

    HTML參考手冊 按功能类别排列 New : HTML5 中的新标签. 标签 描写叙述 <!--...--> 定义凝视. <!DOCTYPE> 定义文档类型. <a> ...

  10. 分享微软官方Demo用的SharePoint 2010, Exchange 2010, Lync 2010虚拟机

    微软官方有一套专门用于SharePoint 2010, Exchange 2010 Demo的虚拟机:SharePoint 2010: Information Worker Demonstration ...