小舞很执着

这个屌丝很懒，什么也没留下！

热门标签

小库

作者：小舞很执着 | 2024-07-28 06:51:32

踩

小库

1、文字截取替换（多出来的东西用省略号）

var str= $( '.pro_depart3_right_ul_p1'). html() ; //原内容
var str_length= str. length ; //长度
var slic_end= str. slice( 6 , str_length- 4) ; //替换的内容
console. log( slic_end) ;
var slic_str= str. replace( slic_end , '.') ; //内容替换
console. log( slic_str) ;

$('.pro_depart3_right_ul_p1').html(slic_str);//赋值

2、文字（多出来的东西用省略号）

     ————————————1行省略—————————————————— 
   

     overflow: hidden; 
    
    text-overflow: ellipsis; 
    
    white-space: nowrap; 
    
 course:hand;

     ————————————————2行省略—————————————————————— 
   

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

3、鼠标划过图片的放大缩小

$('.all_ms a').hover(function(){

$(this).css({

'background':'#F3F3F3',

'-webkitBoxShadow':'0 0 10px rgba(156, 150, 152, 0.498039)',

'-oBoxShadow':'0 0 10px rgba(156, 150, 152, 0.498039)',

'-msBoxShadow':'0 0 10px rgba(156, 150, 152, 0.498039)',

'-mozBoxShadow':'0 0 10px rgba(156, 150, 152, 0.498039)',

'boxShadow':'0 0 10px rgba(156, 150, 152, 0.498039)',

});

$(this).find('img').css({

'-webkit-transform': 'scale(1.1)',

'-moz-transform': 'scale(1.1)',

'-o-transform:' :'scale(1.1)',

'-ms-transform': 'scale(1.1)',

'transform': 'scale(1.1)',

'-webkitTransition': 'all 0.3s ease-in-out',

'-mozTransition': 'all 0.3s ease-in-out',

'-oTransition': 'all 0.3s ease-in-out',

'-msTransition': 'all 0.3s ease-in-out',

'transition': 'all 0.3s ease-in-out',

});

$(this).find('.buy_btn').show();

$(this).find('.prices').css('textAlign','left');

},function(){

$(this).css({

'background':'#fff',

'-webkitBoxShadow':'0 0 10px rgba(255, 255, 255, .5)',

'-oBoxShadow':'0 0 10px rgba(255, 255, 255, .5)',

'-msBoxShadow':'0 0 10px rgba(255, 255, 255, .5)',

'-mozBoxShadow':'0 0 10px rgba(255, 255, 255, .5)',

'boxShadow':'0 0 10px rgba(255, 255, 255, .5)',

});

$(this).find('img').css({

'-webkit-transform': 'scale(1)',

'-moz-transform': 'scale(1)',

'-o-transform:': 'scale(1)',

'-ms-transform': 'scale(1)',

'transform': 'scale(1)',

});

$(this).find('.img-box>img').width();

$(this).find('.buy_btn').hide();

$(this).find('.prices').css('textAlign','center');

})

4、css绘制三角形

复制代码代码如下:

#triangle-up {

}

复制代码代码如下:

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

复制代码代码如下:

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

复制代码代码如下:

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

复制代码代码如下:

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码代码如下:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

复制代码代码如下:

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码代码如下:

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

5、input的placeholder颜色

input::-webkit-input-placeholder {
　　color: #D6D0CA !important; /* WebKit browsers /
　　}
　　input:-moz-placeholder {
　　color: #D6D0CA !important; / Mozilla Firefox 4 to 18 /
　　}
　　input::-moz-placeholder {
　　color: #D6D0CA !important; / Mozilla Firefox 19+ /
　　}
　　input:-ms-input-placeholder {
　　color: #D6D0CA !important; / Internet Explorer 10+ */
　　}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/893147