html桌面小特效,JS/ JQ 常用小特效【持续更新中】

字符串转为数组let list='1111111,222222,3333333,4444444,5555555,6666666'

let lists = list.split(',')

let arr = [] // 必须是数组 push 才能用

lists.forEach((items)=>{

lists = 'QQQ' + items;

arr.push(items)

})

console.log(arr) // 新数组

事件冒泡function prevent() {

window.event? window.event.cancelBubble = true : e.stopPropagation();

}

table 点击切换

• 1111
• 22222
• 33333

• 11111

• 222222

• 33333

/* JQ */

$(".sideslip-head>li").click(function(){

$(this).addClass("active").siblings().removeClass("active");

$(".sideslip-titles").eq($(this).index()).css("display","block").siblings().css("display","none")

})

底部导航点击切换

测评

素材圈

个人中心

$(document).ready(function() {

$(".footer a").each(function() {

if($(this)[0].href == String(window.location)) {

$(this).addClass("active").siblings().removeClass('active');

}

});

});

//----------------------------

//页面引用

/*

$(function () {

$(".footerpage").load("footer.html");

});

导航 滚动到指定位置后 悬浮/*

没有css

没有html

懒...

*/

/* JQ */

$(window).scroll(function(){

var bignav = $(".导航名字");

if( $(this).scrollTop() >195){

bignav.addClass('导航置顶后的改变样式 的名字'); // 导航css不改变 可以删掉该行

bignav.css({

width:"100%",

position:"fixed",

top:50,

zIndex:10

});

}

else{

bignav.removeClass('导航置顶后的改变样式 的名字'); // 导航css不改变 可以删掉该行

bignav.css("position","static");

}

});

点击按钮显示/ 隐藏 点击别处隐藏 点击浮层不动/* css */

.wrapper{

position:relative;

display:inline-block;

}

.popover{

display: none;

border:1px solid red;

position:absolute;

left:50px;

top:0;

white-space:nowrap;

padding:10px;

margin-left:10px;

background: white;

}

.popover::before{

position:absolute;

right:100%;

top:0;

border: 10px solid transparent;

border-right-color:red;

content:'';

}

.popover::after{

position: absolute;

right:100%;

top:0;

border:10px solid transparent;

border-right-color: white;

}

点我

浮层

//jq 方法1：点击自身能隐藏 其余功能 和方法2 一样

$(clickMe).on('click',function (ev) {

ev.stopPropagation();

$(popover).slideToggle(); //slideToggle 这个可换

var flag = true;

$(document).bind("click",function(e){

var target = $(e.target);

if(target.closest($(clickMe)).length == 0 && flag == true){

$(popover).slideUp();

flag = false;

}

});

});//jq 方法2：点击自身不不不不不不不能隐藏 其余功能 和方法1 一样

$(clickMe).on('click',function () {

$(popover).show()

$(document).one('click',function(){

console.log('document')

$(popover).hide()

})

})

$(wrapper).on('click',function(e){

e.stopPropagation()

})

图片上传

body {background: #edf0f2;}

img {width: 100%;display: block;border: none;vertical-align: bottom;border: none;}

input[type="button"] {-webkit-appearance: none;}

.productDrawingBox {background-color: #fcfcfc;color: #333333;font-size: 16px;padding-left: 11px;border-bottom: solid 1px #e5e5e5;}

.productDescription {height: 44px;line-height: 44px;}

.productImg {height: 96px;overflow: hidden;}

.imgBiMG{width: 78px;height: 81px;float: left;display: block;}

.uploadDIv {width: 78px;height: 81px;background-color: #edf0f2;font-size: 28px;color: #bfbfbf;text-align: center;line-height: 81px;float: left;position: relative;}

.uploadDIv input {width: 78px;height: 78px;opacity: 0;position: absolute;right: 0px;top: 0px;z-index: 4;padding: 0;}

上传图片

+