【杂记】（圆角IE兼容模式、背景颜色渐变、banner图过大居中显示、展开与收起、css兼容前缀、导航置顶、点评星星、手风琴树形导航、.attr()的用法、单选判断、多行文本溢出、自动轮播）

1. 圆角IE兼容模式

border-radius: 15px; /*Opera 10.5+、IE 6+*/ -webkit-border-radius: 15px; /*Safari、Chrome*/ -moz-border-radius: 15px; /*Firefox*/ behavior: url(ie-css3.htc); /* 调用脚本添加圆角效果 */

2. 背景颜色渐变

background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 80%,#FFFFFF 100%);

3. banner图过大居中显示

banner图过大但又需要居中全部显示,参考携程网，中间的图片尺寸为1180px，把剩余的部分作为背景

4. 展开与收起

案例1 原理：点击展开，显示收起，这个收起已经添加了after伪类，反之。 如果单个的点击事件click没有用，就用on（）事件来绑定 $(document).on('click','类名',function(){})

案例2

var _num = $(".v6replybtn i").html(); $(".v6replybtn").click(function(){ $('.v6comreply').toggleClass("active"); if($(".v6comreply").hasClass("active")){ $(".v6replybtn").html('收起回复 ('+_num+')'); }else{ $(".v6replybtn").html('回复('+_num+')'); } });

5. css兼容前缀

6. 导航置顶.top1{position:fixed;top:0px;z-index:3;}

$(window).scroll(function(){ var scrollTop = $(document.body).scrollTop();//获取滚动的高度 document.title=scrollTop; if(scrollTop>100){ $(".Home .Top").addClass("Top1"); }else{ $(".Home .Top").removeClass("Top1"); } }); var _sitenav = $('.site-nav').height(); $(window).scroll(function(){ if($(window).scrollTop() >= 100){ $(".site").addClass("scrollnav"); }else{ $(".site").removeClass("scrollnav"); } });

让浏览器【瞬间】滚动到一定高度(滚动到距顶部100px的置) $(document).scrollTop(100); 让浏览器有时间性的滚动到相应的高度位置

var x = $(document).scrollTop(); //随内容滚动 var timer=setInterval(function(){ x = x - 100; if(x < 100){ x = 80; clearInterval(timer); } $(document).scrollTop(x); },"100");

7. 点评星星

var starmark=0; var _thissrc = $(this).attr('src');//获取图片路径 var imgsrc = 'images/note_star_gray.png'; var imgsrcN = 'images/note_star_ora.png'; if(_thissrc == imgsrc){ $(this).attr('src',imgsrcN); }else if(_thissrc == imgsrcN){ $(this).attr('src',imgsrc); } if(starmark == 0){ $(this).attr('src','images/note_star_ora.png'); starmark = 1; }else if(starmark == 1){ $(this).attr('src','images/note_star_gray.png'); starmark = 0; }

8. 手风琴树形导航

效果一：点击当前收缩其他，但再点击当前，当前不会收缩 $(this).find(".Level1").slideDown();//一级导航显示 $(this).siblings().find(".Level1").slideUp();//一级导航收缩 效果二：点击当前收缩其他，并且再点击当前，当前会收缩 $(this).siblings().find(".Level1").slideUp();//一级导航收缩 $(this).find('.Level1').slideToggle().siblings('.Level1').slideUp();

9. .attr()的用法

在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以了，jquery中用attr()方法来获取和设置元素属性，attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。

a、 .attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

b、.attr(属性名, 属性值) //设置属性的值 （为所有匹配的元素设置一个属性值。）

c、.attr(属性名,函数值) //设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

d、.attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。或者你可以直接使用’class’或者’id’。)

html代码结构:

<p title="你最喜欢的水果是。">你最喜欢的水果是？</p> <ul> <li title="苹果汁">苹果</li> <li title="橘子汁" value="123">橘子</li> <li title="菠萝汁">菠萝</li> </ul>

a、.attr(name)获取属性的值 1.1 使用.attr(name)获取title值：$("ul li:eq(1)").attr("title") 结果：橘子汁 1.2 使用.attr(name)获取value值：$("ul li:eq(1)").attr("value") 结果：123

b、.attr(name,value) 设置属性的值 2.1 使用.attr(name,value)修改title值为：不吃橘子 $("ul li:eq(1)").attr("title","不吃橘子");

c、.attr(name,fn) 设置属性的函数值 3.1 把value属性的值设置设给title属性。 $("ul li:eq(1)").attr("title",function(){ return this.value}); $("ul li:eq(1)").attr("title")结果：123

d、.attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 4.1 获取<ul>里第2个<li>设置title和value属性。 $("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"}); $("ul li:eq(1)").attr("title")结果：不喝橘子汁 $("ul li:eq(1)").attr("value")结果：不是123 4.2 获取<ul>里第2个<li>设置class。$("ul li:eq(1)").attr({className:"lili"}); 结果：第二个li的html：<li class="lili" title="橘子汁" value="123">橘子</li> 4.3 获取<ul>里第2个<li>设置id。$("ul li:eq(1)").attr({id:"lili"}); 结果：第二个li的html：<li id="lili" title="橘子汁" value="123">橘子</li> 4.4 获取<ul>里第2个<li>设置style。$("ul li:eq(1)").attr({style:"color:red"});

e、那么怎么删除属性呢? $("ul li:eq(1)").removeAttr ("title");

获取图片的地址 $(this).attr('src'); 更换图片地址 $(this).attr('src',img_src); 判断状态 .attr("status")=="open"/.attr("status")=="close"

10. 单选判断

11. 多行文本溢出

方法一：width:200px;height:100px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; 方法二：::after{content:'...',position:absolute;bottom:0;right:0px;} 其他浏览器均能正常的显示效果，而火狐不行，就必须给他高度

12. 自动轮播

1.先是按照方法写 function auto(){} 2.然后调用方法autoPlay();//切忌一定要调用方法 3.设置定时器 var clear=setInterval(auto,3500); 4.鼠标滑上轮播停止，移开启动 $("").hover(function(){clearInterval(clear);},function(){clear=setInterval(auto,3500);});

具体例子

function autoPlay(){//把最后一第裁剪放在最前面 $(".List ul").prepend($(".List ul li:last")); $(".List ul").css("left","-280px"); $(".List ul").animate({"left":"0px"},3000); } autoPlay();//设置定时器 var clearTime=setInterval(autoPlay,3500); //鼠标放在按扭上时停止轮播，移开就启动 $(".List ul li,img.prev,img.next").hover(function(){ clearInterval(clearTime); },function(){ clearTime=setInterval(autoPlay,3500); });