zenghuanyu/sysolution
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
sysolution/src/js/layout.js

1516 lines
39 KiB
JavaScript
Raw Normal View History

js
2024-04-02 17:45:46 +08:00
$(function(){
// 防抖方法
function AntiShake(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
};
}
AntiShake(onResize, 200);
$(window).resize(AntiShake(onResize, 100));
AntiShake(onScroll, 200);
$(window).scroll(AntiShake(onScroll, 100));
//wow调用
if (typeof WOW != 'undefined') {
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
}
//弹出视频播放器
$('.videoBtn').on('click',function(){
var url = $(this).attr('rel');
if(url.indexOf('http') == 0){
$('.videoPlayer').html('<iframe frameborder="0" src="'+ url +'" allowFullScreen="true"></iframe>');
} else {
$('.videoPlayer').html('<video src="'+ url +'" controls preload="" muted="" x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true" x5-video-player-fullscreen="true" x5-video-player-type="h5" x5-video-orientation="portraint"></video>');
}
$('.PopupVideoBox').fadeIn(200);
});
//关闭弹出播放器
$('.closeVideo').on('click', function(){
$('.PopupVideoBox').fadeOut(200);
$('.videoPlayer').html('');
});
//swiper方法调用
if(typeof Swiper != 'undefined') {
//首页banner
var defaBanner = new Swiper('.defaBanner', {
paginationClickable: true,
loop:true,
autoplay:4500,
autoplayDisableOnInteraction : false,
nextButton: '.defaBannerNext',
prevButton: '.defaBannerPrev',
pagination : '.defaBannerdot',
onInit: function(swiper){
},
onTransitionEnd: function(swiper){
}
});
//二级栏目适应内容区
var defaSecondLevelColumn = new Swiper('.defaSecondLevelColumn', {
paginationClickable: true,
slidesPerView:"auto",
spaceBetween:0,
autoplayDisableOnInteraction : false,
});
}
// 页面监听窗口
function onResize(){
if($(window).innerWidth() > 1259){
$('html').removeClass('hideScroll');
$('.defaSearch span').removeClass('closeSearchbox');
$('.defanav ul li p, .defanav, .defaSearchbox,.defaLanguage p').removeAttr('style');
}
}
//滚动条监听
function onScroll(){
var scrollTop = $(window).scrollTop();
if(scrollTop > $('.header').height()){
$('.defaheader').addClass('defaheaderbg');
} else {
$('.defaheader').removeClass('defaheaderbg');
}
}
//其他事件
$('.defaheader').hover(function(){
$(this).addClass('defaheaderbg');
},function(){
if($(window).scrollTop() < $('.defaheader').height()){
$(this).removeClass('defaheaderbg');
}
});
$('.defanav ul li i').on('click',function(){
if($(this).next().is(':hidden')){
$(this).parent().siblings().find('p').slideUp(200);
$(this).parent().siblings().removeClass('cur');
$(this).next().slideDown(200);
$(this).parent().addClass('cur');
} else {
$(this).next().slideUp(200);
$(this).parent().removeClass('cur');
}
});
$('.defanavbtn').on('click',function(){
if($('.defanav').is(':hidden')){
$(this).addClass('defacloseNavbtn');
$('.defanav').slideDown(200);
$('html').addClass('hideScroll');
$('.defaSearchbox').hide();
$('.defaSearch span').removeClass('closeSearchbox');
$('.defaLanguage p').hide();
} else {
$(this).removeClass('defacloseNavbtn');
$('.defanav').slideUp(200);
$('html').removeClass('hideScroll');
}
});
$('.defaSearch span').on('click', function(){
if(window.innerWidth < 1260){
if($(this).next().is(':hidden')){
$(this).addClass('closeSearchbox');
$(this).next().slideDown(200);
$('.defanav').hide();
$('.defanavbtn').removeClass('defacloseNavbtn');
$('.defaLanguage p').hide();
} else {
$(this).removeClass('closeSearchbox');
$(this).next().slideUp(200);
}
}
});
$('.defaLanguage span').on('click', function(){
if(window.innerWidth < 1260){
if($(this).next().is(':hidden')){
$(this).addClass('closeSearchbox');
$(this).next().slideDown(200);
$('.defanav').hide();
$('.defanavbtn').removeClass('defacloseNavbtn');
$('.defaSearchbox').hide();
$('.defaSearch span').removeClass('closeSearchbox');
} else {
$(this).removeClass('closeSearchbox');
$(this).next().slideUp(200);
}
}
});
// //省市区选择器
// if (returnCitySN) {
// $('#ThreeLevelLinkage').citys({
// code: returnCitySN['cid'],
// crossDomain: true,
// province:440000,
// city:440300,
// area:440304,
// });
// $('.ChooseCity').select2({
// language: {
// noResults: function(params) {
// return "暂无数据";
// }
// },
// minimumResultsForSearch: Infinity
// });
// }
// //单项选择器
// $('.individual').select2({
// language: {
// noResults: function(params) {
// return "暂无数据";
// }
// },
// minimumResultsForSearch: Infinity
// });
if ($("#grid").length > 0) {
int();
function int(){
new AnimOnScroll(document.getElementById('grid'), {
minDuration: 0.4,
maxDuration: 0.7,
viewportFactor: 0.2
});
}
$('.WaterfallFlowMore').on('click',function(){
var html = ' <li><a href="javascript:;"><img src="dist/images/defaImg01.jpg"><div class="FlowContent"><p class="time">2020.10.13</p><h3>1从路人甲到C位咖，完美就要这么“妆”！</h3><p class="desc">作为社会人，每个人都要与他人往来和接触，总有见一面的时候，总会产生或好或坏的第一印象，就第一印象而言，谁都只有一次机会...</p></div></a></li><li><a href="javascript:;"><img src="dist/images/defaImg02.jpg"><div class="FlowContent"><p class="time">2020.10.13</p><h3>2从路人甲到C位咖，完美就要这么“妆”！</h3><p class="desc">作为社会人，每个人都要与他人往来和接触，总有见一面的时候，总会产生或好或坏的第一印象，就第一印象而言，谁都只有一次机会...</p></div></a></li>';
$('.WaterfallFlow ul').append(html);
int();
});
}
});
文件更新
2025-02-10 15:48:22 +08:00
js
2024-04-02 17:45:46 +08:00
$(function () {
//swiper方法调用
if (typeof Swiper != 'undefined') {
var index_swiper = new Swiper('.index_swiper', {
speed: 600,
autoplay: 6000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
pagination: '.insw_pagination',
noSwiping: true,
loop:true,
prevButton: '.index_prev',
nextButton: '.index_next',
autoHeight: true,
onInit: function (swiper) {
TVideo(swiper);
},
onSlideChangeEnd: function (swiper) {
TVideo(swiper);
}
});
function TVideo(abj) {
var Video = $(".index_swiper .swiper-slide-active video").get(0)
if ($(".index_swiper .swiper-slide-active").find("video").length > 0) {
Video.play();
abj.stopAutoplay();
Video.addEventListener('ended', function () {
abj.startAutoplay();
})
}
}
$(".swiper_off i").click(function () {
if ($(this).hasClass("cur")) {
$(this).removeClass("cur")
index_swiper.startAutoplay();
$(this).addClass("icon_stop").removeClass("icon_bofang2");
} else {
$(this).addClass("cur")
index_swiper.stopAutoplay();
$(this).addClass("icon_bofang2").removeClass("icon_stop");
}
});
var inproduct_swiper = new Swiper('.inproduct_swiper', {
speed: 600,
// pagination: '.inpro_pagination',
scrollbarDraggable: true,
paginationType: 'progress',
slidesPerView: 2,
slidesPerColumn: 2,
paginationClickable: true,
scrollbar: '.inproduct_scrollbar',
scrollbarHide: false,
spaceBetween: 60,
breakpoints: {
1600:{
spaceBetween: 30,
},
992: {
spaceBetween: 20,
},
580: {
spaceBetween: 10,
slidesPerView: 1,
}
}
});
// var purpose_tabSwiper3;
var purpose_swiper;
// purpose_tabSwiper3 = new Swiper('.purpose_tabSwiper3', {
// slidesPerView:8,
// spaceBetween: 30,
// breakpoints:{
// 992: {
// spaceBetween: 5,
// },
// 765: {
// slidesPerView: 3,
// },
// 465: {
// slidesPerView:2,
// },
// }
// });
// purpose_contswiper = new Swiper('.purpose_contswiper', {
// speed: 600,
// onSlideChangeStart: function (swiper) {
// purpose_swiper.slideTo(swiper.activeIndex, 1000, false);
// $(".purpose_tab .swiper-slide").eq(swiper.activeIndex).addClass("active").siblings().removeClass("active");
// purpose_tabSwiper3.slideTo(swiper.activeIndex, 1000, false);
// }
// });
purpose_swiper = new Swiper('.purpose_swiper', {
speed: 600,
onSlideChangeStart: function (swiper) {
// purpose_contswiper.slideTo(swiper.activeIndex, 1000, false);
$(".purpose_tab .item").eq(swiper.activeIndex).addClass("active").siblings().removeClass("active");
// purpose_tabSwiper3.slideTo(swiper.activeIndex, 1000, false);
$(".home3TabItem").eq(swiper.activeIndex).show().addClass("active").siblings().hide().removeClass("active");
}
});
$(".home3TabItem").eq(0).show();
$(".purpose_tab .item").click(function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".home3TabItem").eq(index).show().addClass("active").siblings().hide().removeClass("active");
purpose_swiper.slideTo(index, 1000, false);
});
$(".purpose_prev").click(function () {
purpose_swiper.slidePrev();
});
$(".purpose_next").click(function () {
purpose_swiper.slideNext();
});
var incase_swiper1 = new Swiper('.incase_swiper1', {
speed: 600,
onSlideChangeStart: function (swiper) {
$(".incase_tablist .item").eq(swiper.activeIndex).addClass("active").siblings().removeClass("active");
}
});
var incase_swiper2 = new Swiper('.incase_swiper2', {
speed: 600,
observer:true,
observeParents:true,
onSlideChangeStart: function (swiper) {
$(".incase_tablist .item").eq(swiper.activeIndex).addClass("active").siblings().removeClass("active");
}
});
$(".incase_tablist .item").hover(function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active")
if ($(".incase_swiper").length > 1) {
incase_swiper1.slideTo(index, 1000, false);
incase_swiper2.slideTo(index, 1000, false);
}
});
}
$(".hsearch_btn").click(function () {
if (!$(this).hasClass("active")) {
$(this).addClass("active")
$("#search-form").css({
"max-height": "60px"
});
} else {
$(this).removeClass("active")
$("#search-form").css({
"max-height": "0"
});
}
});
$(window).scroll(function () {
scrollEvent();
var TopLi = $(window).scrollTop() + 300
$(".Solution_XQ .box").each(function(){
var num = $(this).index()
var _this = $(this).offset().top
if(TopLi >= _this){
$(".AnchorLocation .con .li").eq(num).addClass("active").siblings().removeClass("active")
}
})
});
function scrollEvent() {
var scrollT = $(window).scrollTop();
if (scrollT > 600) {
$("#ScrollTop").addClass("active")
$('.cebian').stop().addClass("active");
} else {
$("#ScrollTop").removeClass("active");
$('.cebian').stop().removeClass("active");
}
}
$(".navmenu_div").click(function () {
if (!$(this).hasClass("closeNavbtn")) {
$(".head_navlist").stop().slideDown();
$(this).addClass("closeNavbtn");
$(".header").addClass("header_active");
$("body").css({
"overflow": "hidden"
});
} else {
$(".head_navlist").stop().slideUp();
$(this).removeClass("closeNavbtn");
$("body").css({
"overflow-y": "auto"
});
}
});
$(".head_navlist ul li>span").click(function () {
$(this).parent("li").siblings().find(".sub_zinav").stop().slideUp();
$(this).parent("li").siblings().find("span").removeClass("cur")
$(this).siblings(".sub_zinav ").find(".sub_zinav3").stop().slideUp();
$(this).siblings(".sub_zinav ").find("i").removeClass("active");
if (!$(this).hasClass("cur")) {
$(this).siblings(".sub_zinav").stop().slideDown();
$(this).addClass("cur");
} else {
$(this).siblings(".sub_zinav").stop().slideUp();
$(this).removeClass("cur");
}
})
var window_width = $(window).innerWidth();
if (window_width >= 992) {
var B ;
$(".head_navlist li").on("mouseleave",function(){
var that = $(this)
B = setTimeout(function () {
that.find(".sub_zinav").hide();
}, 800);
});
$(".sub_zinav2").on("mouseleave",function(){
$(this).find("i").removeClass("active");
var that = $(this)
B = setTimeout(function () {
that.find(".sub_zinav3").hide();
}, 800);
});
$(".sub_zinav2").on("mouseenter",function(){
$(this).find("i").addClass("active");
$(this).find(".sub_zinav3").stop().slideDown();
$(".ProductNav").stop().hide()
clearTimeout(B);
});
$(".head_navlist li a").on("mouseenter",function(){
$(this).siblings(".sub_zinav").stop().slideDown();
$(this).parent("li").siblings().find(".sub_zinav").hide()
clearTimeout(B);
if($(this).siblings(".ProductNav").length > 0){
$(this).siblings(".Lhide").hide();
}else{
$(this).parent("li").siblings().find(".ProductNav").hide()
}
});
$(".head_navlist li a").on("mouseleave",function(){
clearTimeout(B);
})
}else{
$(".sub_zinav2 .Link2").click(function(){
$(this).siblings("i").toggleClass("active");
$(this).siblings(".sub_zinav3").stop().slideToggle();
$(this).parent().siblings().find("i").removeClass("active").siblings(".sub_zinav3").stop().slideUp()
})
}
$(".footer_nav .iconfontdown").click(function () {
if ($(this).hasClass("active")) {
$(this).parent("dl").find("dd").stop().slideUp()
$(this).removeClass("active")
} else {
$(this).parent("dl").find("dd").stop().slideDown()
$(this).addClass("active")
$(this).parent("dl").siblings().find(".footerNav3").stop().slideUp()
$(this).parent("dl").siblings().find("dd").stop().slideUp()
$(this).parent("dl").siblings().find("i").removeClass("active")
}
})
if ($(window).innerWidth() <= 992) {
$(".footerNav2").click(function(){
if($(this).find("i").hasClass("active")){
$(this).find("i").removeClass("active")
$(this).find(".footerNav3").stop().slideUp()
}else{
$(this).find("i").addClass("active")
$(this).find(".footerNav3").stop().slideDown()
$(this).siblings().find("i").removeClass("active")
$(this).siblings().find(".footerNav3").stop().slideUp()
}
})
}
$(".submenu_box .submenu_curtitle").click(function(){
if(!$(this).hasClass("cur")){
$(this).addClass("cur")
$(".submenu_box_list").stop().slideDown();
}else{
$(this).removeClass("cur")
$(".submenu_box_list").stop().slideUp();
}
});
$(".innew_tab .item").click(function(){
var index=$(this).index();
$(this).addClass("active").siblings().removeClass("active")
$(".innew_list .innew_item").eq(index).css("display","flex").siblings().css("display","none")
});
setHeader()
ifwidth();
});
function setHeader() {
var initHeight = $(document).scrollTop();
if (initHeight > 0) {
$(".header").addClass("header_active");
}
$(window).scroll(function () {
var b = $(document).scrollTop();
if (b <= 60) {
$('.header').removeClass("header_active");
} else {
$('.header').addClass("header_active");
}
})
}
function ifwidth() {
var window_width = $(window).innerWidth();
if (window_width >= 768) {
$(".index_townlist").addClass("swiper-no-swiping")
$(".purpose_swiper").addClass("swiper-no-swiping")
$(".incase_swiper").addClass("swiper-no-swiping")
}
}
$(function () {
$(".publicLeft .li h5").click(function () {
if($(this).parent(".li").hasClass("active2")){
$(this).parent(".li").removeClass("active2")
$(this).removeClass("active")
$(this).siblings(".li2,.Downul2").stop().slideUp().children("h5").removeClass("active")
}else if($(this).parent(".li").hasClass("active")){
$(this).parent(".li").removeClass("active")
$(this).removeClass("active")
$(this).siblings(".li2,.Downul2").stop().slideUp().children("h5").removeClass("active")
}else{
$(this).parent(".li").addClass("active")
$(this).addClass("active")
$(this).siblings(".li2,.Downul2").stop().slideDown()
}
})
$(".publicLeft .li .ul2 .li3 .t").click(function () {
$(this).toggleClass("active")
$(this).parents(".ul2").siblings().find(".t").removeClass("active")
$(this).parents(".ul2").siblings().find(".ul3").stop().slideUp()
$(this).siblings(".ul3").stop().slideToggle()
})
// $(".ProTabCont .tabItem").eq(0).show();
$(".ProTabBar .tabTerm").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active");
var num =$(".ProTabBar .tabTerm").index(this);
$(".ProTabCont .tabItem").eq(num).addClass("active").siblings().removeClass("active");
var hei = $(".ProTabCont .tabItem").eq(num).height() + 70
$(".ProductNav").height(hei)
})
var window_width = $(window).innerWidth();
if (window_width > 992) {
var B ;
$(".header .ProductNavOff a").on("mouseenter",function(){
$(".ProductNav").stop().slideDown()
$("body").addClass("active")
clearTimeout(B);
});
$(".ProductNav").on("mouseenter",function(){
clearTimeout(B);
})
$(".header .ProductNavOff a").on("mouseleave",function(){
clearTimeout(B);
})
$(".header .ProductNavOff").on("mouseleave",function(){
B = setTimeout(function () {
$(".ProductNav").hide()
}, 800);
$("body").removeClass("active")
});
$(".header .ProductNav i").on("mouseenter",function(){
B = setTimeout(function () {
$(".ProductNav").stop().hide()
}, 800);
$("body").removeClass("active")
});
}
if (window_width < 768) {
// $(".publicLeft .li").removeClass("active")
}
/*视频播放*/
var myVideo=document.getElementById("Video1");
$('.TopicPageCon2 .off').on('click',function(){
if (myVideo.paused) {
setTimeout(() => {
myVideo.play();
}, 10 );
$(this).children("img").hide();
}else {
setTimeout(() => {
myVideo.pause();
}, 10 );
$(this).children("img").show();
}
})
/*视频播放*/
var myVideo2=document.getElementById("Video2");
$('.big_video .off').on('click',function(){
if (myVideo2.paused) {
setTimeout(() => {
myVideo2.play();
}, 10 );
$(this).children("img").hide();
$(this).siblings(".text").hide();
}else {
setTimeout(() => {
myVideo2.pause();
}, 10 );
$(this).children("img").show();
$(this).siblings(".text").show();
}
})
if (typeof BeerSlider != 'undefined') {
$('.slider').each(function(){
new BeerSlider(this);
});
}
new Swiper('.SolutionXQ_swiper', {
speed: 600,
slidesPerView: 3,
spaceBetween: 20,
scrollbar:'.SolutionXQ_scrollbar',
breakpoints:{
992: {
spaceBetween: 10,
},
765: {
spaceBetween: 10,
slidesPerView: 2,
},
465: {
spaceBetween: 10,
slidesPerView: 1,
}
}
});
$('.AnchorLocation .li').click(function() {
$(this).addClass("active").siblings().removeClass("active")
var num = $(this).index();
$('html,body').animate({ scrollTop: $('.Solution_XQ .box').eq(num).offset().top - 50 }, 500)
});
var CXQswiper1 = new Swiper('.classicCase_XQswiper1', {
speed: 600,
slidesPerView: 1,
onSlideChangeEnd: function(swiper){
var num = CXQswiper1.activeIndex;
$(".classicCase_XQswiper2 .swiper-slide").eq(num).addClass("active").siblings().removeClass("active")
}
});
var CXQswiper2 = new Swiper('.classicCase_XQswiper2', {
speed: 600,
slidesPerView: 6,
spaceBetween: 12,
breakpoints:{
992: {
slidesPerView: 5,
spaceBetween: 8,
},
765: {
spaceBetween:5,
slidesPerView: 4,
},
465: {
spaceBetween:5,
slidesPerView: 3,
}
}
});
$(".classicCase_XQswiper2 .swiper-slide").on("click",function(){
var num = $(this).index()
CXQswiper1.slideTo(num, 1000, false);//切换到第一个slide，速度为1秒
$(this).addClass("active").siblings().removeClass("active")
})
//tab切换
$(".ServiceTabCont .tabItem").eq(0).show();
$(".ServiceTabBar .tabTerm").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active");
var num =$(".ServiceTabBar .tabTerm").index(this);
$(".ServiceTabCont .tabItem").eq(num).addClass("active").siblings().removeClass("active")
})
new Swiper('.News_swiper', {
effect : 'fade',
speed: 600,
autoplay : 4000,
pagination: '.News_pagination',
paginationClickable :true,
breakpoints:{
765: {
autoHeight: true,
},
}
});
var aboutUsCon6_swiper = new Swiper('.aboutUsCon6_swiper', {
slidesPerView:5,
// autoplay : 4000,
speed:500,
// loop:true,
prevButton:'.aboutCon6_prev',
nextButton:'.aboutCon6_next',
breakpoints:{
992: {
slidesPerView: 4,
},
765: {
slidesPerView: 3,
},
465: {
slidesPerView: 2,
}
},
onSlideChangeStart: function(swiper){
$(".aboutUsCon6_swiper .swiper-slide").eq(swiper.activeIndex).addClass("active").siblings().removeClass("active")
$(".aboutUs .con6 .box .li").eq(swiper.realIndex).addClass("active").siblings().removeClass("active")
}
});
$(".aboutUs .con6 .aboutUsCon6_swiper .swiper-slide").on('click',function(){
var num =$(this).index();
$(this).addClass("active").siblings().removeClass("active")
$(".aboutUs .con6 .box .li").eq(num).addClass("active").siblings().removeClass("active")
console.log(num)
})
new Swiper('.aboutUsCon7_swiper', {
slidesPerView:4,
spaceBetween: 20,
autoplay : 4000,
scrollbar:'.aboutUsCon7_scrollbar',
breakpoints:{
992: {
slidesPerView: 3,
},
765: {
slidesPerView: 2,
},
}
});
//tab切换
$(".Case_bigTabBar .tabTerm").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active");
var num =$(".Case_bigTabBar .tabTerm").index(this);
$(".Case_bigTabCont .tabItem").eq(num).addClass("active").siblings().removeClass("active")
})
$(".Z6TopicPage6TabBar .tabTerm").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active");
var num =$(".Z6TopicPage6TabBar .tabTerm").index(this);
$(".Z6TopicPage6TabCont .tabItem").eq(num).addClass("active").siblings().removeClass("active")
})
$(".Case_CCETabBar .tabTerm").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active");
var num =$(".Case_CCETabBar .tabTerm").index(this);
$(".Case_CCETabCont .tabItem").eq(num).addClass("active").siblings().removeClass("active")
})
new Swiper('.PastHighlights_swiper', {
slidesPerView:3,
spaceBetween: 30,
prevButton:'.PastHighlights_prev',
nextButton:'.PastHighlights_next',
breakpoints:{
992: {
spaceBetween: 10,
},
765: {
slidesPerView: 2,
},
465: {
slidesPerView: 1,
},
}
});
// $(".TopicPageCon8").on('click',function(){
// console.log("点击了")
// $(".tipsbox").hide();
// });
$(".home4TabBar .tabTerm").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active");
var num =$(".home4TabBar .tabTerm").index(this);
$(".home4TabCont .tabItem").eq(num).addClass("active").siblings().removeClass("active")
})
$(".publicLeft i").on("click",function(){
if($(this).hasClass("active")){
$(this).removeClass("active")
$(this).siblings(".li:not(:nth-child(2))").slideUp()
// $(this).siblings(".li.active").slideDown()
}else{
$(this).addClass("active")
$(this).siblings(".li").slideDown()
}
})
})
$(function(){
$(".TopicPageCon8").click(function(){
console.log('1')
$(".tipsbox").hide();
});
if($(".waves").length>0){
class ShaderProgram {
constructor( holder, options = {} ) {
options = Object.assign( {
antialias: false,
depthTest: false,
mousemove: false,
autosize: true,
side: 'front',
vertex: `
precision highp float;
attribute vec4 a_position;
attribute vec4 a_color;
uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mousemove;
uniform mat4 u_projection;
varying vec4 v_color;
void main() {
gl_Position = u_projection * a_position;
gl_PointSize = (10.0 / gl_Position.w) * 100.0;
v_color = a_color;
}`,
fragment: `
precision highp float;
uniform sampler2D u_texture;
uniform int u_hasTexture;
varying vec4 v_color;
void main() {
if ( u_hasTexture == 1 ) {
gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);
} else {
gl_FragColor = v_color;
}
}`,
uniforms: {},
buffers: {},
camera: {},
texture: null,
onUpdate: ( () => {} ),
onResize: ( () => {} ),
}, options )
var uniforms = Object.assign( {
time: { type: 'float', value: 0 },
hasTexture: { type: 'int', value: 0 },
resolution: { type: 'vec2', value: [ 0, 0 ] },
mousemove: { type: 'vec2', value: [ 0, 0 ] },
projection: { type: 'mat4', value: [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] },
}, options.uniforms )
var buffers = Object.assign( {
position: { size: 3, data: [] },
color: { size: 4, data: [] },
}, options.buffers )
var camera = Object.assign( {
fov: 60,
near: 1,
far: 10000,
aspect: 1,
z: 100,
perspective: true,
}, options.camera )
var canvas = document.createElement( 'canvas' )
var gl = canvas.getContext( 'webgl', { antialias: options.antialias } )
if ( ! gl ) return false
this.count = 0
this.gl = gl
this.canvas = canvas
this.camera = camera
this.holder = holder
this.onUpdate = options.onUpdate
this.onResize = options.onResize
this.data = {}
holder.appendChild( canvas )
this.createProgram( options.vertex, options.fragment )
this.createBuffers( buffers )
this.createUniforms( uniforms )
this.updateBuffers()
this.updateUniforms()
this.createTexture( options.texture )
gl.enable( gl.BLEND )
gl.enable( gl.CULL_FACE )
gl.blendFunc( gl.SRC_ALPHA, gl.ONE )
gl[ options.depthTest ? 'enable' : 'disable' ]( gl.DEPTH_TEST )
if ( options.autosize )
window.addEventListener( 'resize', e => this.resize( e ), false )
if ( options.mousemove )
window.addEventListener( 'mousemove', e => this.mousemove( e ), false )
this.resize()
this.update = this.update.bind( this )
this.time = { start: performance.now(), old: performance.now() }
this.update()
}
mousemove( e ) {
var x = e.pageX / this.width * 2 - 1
var y = e.pageY / this.height * 2 - 1
this.uniforms.mousemove = [ x, y ]
}
resize( e ) {
var holder = this.holder
var canvas = this.canvas
var gl = this.gl
var width = this.width = holder.offsetWidth
var height = this.height = holder.offsetHeight
var aspect = this.aspect = width / height
var dpi = this.dpi = devicePixelRatio
canvas.width = width * dpi
canvas.height = height * dpi
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
gl.viewport( 0, 0, width * dpi, height * dpi )
gl.clearColor( 0, 0, 0, 0 )
this.uniforms.resolution = [ width, height ]
this.uniforms.projection = this.setProjection( aspect )
this.onResize( width, height, dpi )
}
setProjection( aspect ) {
var camera = this.camera
if ( camera.perspective ) {
camera.aspect = aspect
var fovRad = camera.fov * ( Math.PI / 180 )
var f = Math.tan( Math.PI * 0.5 - 0.5 * fovRad )
var rangeInv = 1.0 / ( camera.near - camera.far )
var matrix = [
f / camera.aspect, 0, 0, 0,
0, f, 0, 0,
0, 0, (camera.near + camera.far) * rangeInv, -1,
0, 0, camera.near * camera.far * rangeInv * 2, 0
]
matrix[ 14 ] += camera.z
matrix[ 15 ] += camera.z
return matrix
} else {
return [
2 / this.width, 0, 0, 0,
0, -2 / this.height, 0, 0,
0, 0, 1, 0,
-1, 1, 0, 1,
]
}
}
createShader( type, source ) {
var gl = this.gl
var shader = gl.createShader( type )
gl.shaderSource( shader, source )
gl.compileShader( shader )
if ( gl.getShaderParameter (shader, gl.COMPILE_STATUS ) ) {
return shader
} else {
console.log( gl.getShaderInfoLog( shader ) )
gl.deleteShader( shader )
}
}
createProgram( vertex, fragment ) {
var gl = this.gl
var vertexShader = this.createShader( gl.VERTEX_SHADER, vertex )
var fragmentShader = this.createShader( gl.FRAGMENT_SHADER, fragment )
var program = gl.createProgram()
gl.attachShader( program, vertexShader )
gl.attachShader( program, fragmentShader )
gl.linkProgram( program )
if ( gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
gl.useProgram( program )
this.program = program
} else {
console.log( gl.getProgramInfoLog( program ) )
gl.deleteProgram( program )
}
}
createUniforms( data ) {
var gl = this.gl
var uniforms = this.data.uniforms = data
var values = this.uniforms = {}
Object.keys( uniforms ).forEach( name => {
var uniform = uniforms[ name ]
uniform.location = gl.getUniformLocation( this.program, 'u_' + name )
Object.defineProperty( values, name, {
set: value => {
uniforms[ name ].value = value
this.setUniform( name, value )
},
get: () => uniforms[ name ].value
} )
} )
}
setUniform( name, value ) {
var gl = this.gl
var uniform = this.data.uniforms[ name ]
uniform.value = value
switch ( uniform.type ) {
case 'int': {
gl.uniform1i( uniform.location, value )
break
}
case 'float': {
gl.uniform1f( uniform.location, value )
break
}
case 'vec2': {
gl.uniform2f( uniform.location, ...value )
break
}
case 'vec3': {
gl.uniform3f( uniform.location, ...value )
break
}
case 'vec4': {
gl.uniform4f( uniform.location, ...value )
break
}
case 'mat2': {
gl.uniformMatrix2fv( uniform.location, false, value )
break
}
case 'mat3': {
gl.uniformMatrix3fv( uniform.location, false, value )
break
}
case 'mat4': {
gl.uniformMatrix4fv( uniform.location, false, value )
break
}
}
// ivec2 : uniform2i,
// ivec3 : uniform3i,
// ivec4 : uniform4i,
// sampler2D : uniform1i,
// samplerCube : uniform1i,
// bool : uniform1i,
// bvec2 : uniform2i,
// bvec3 : uniform3i,
// bvec4 : uniform4i,
}
updateUniforms() {
var gl = this.gl
var uniforms = this.data.uniforms
Object.keys( uniforms ).forEach( name => {
var uniform = uniforms[ name ]
this.uniforms[ name ] = uniform.value
} )
}
createBuffers( data ) {
var gl = this.gl
var buffers = this.data.buffers = data
var values = this.buffers = {}
Object.keys( buffers ).forEach( name => {
var buffer = buffers[ name ]
buffer.buffer = this.createBuffer( 'a_' + name, buffer.size )
Object.defineProperty( values, name, {
set: data => {
buffers[ name ].data = data
this.setBuffer( name, data )
if ( name == 'position' )
this.count = buffers.position.data.length / 3
},
get: () => buffers[ name ].data
} )
} )
}
createBuffer( name, size ) {
var gl = this.gl
var program = this.program
var index = gl.getAttribLocation( program, name )
var buffer = gl.createBuffer()
gl.bindBuffer( gl.ARRAY_BUFFER, buffer )
gl.enableVertexAttribArray( index )
gl.vertexAttribPointer( index, size, gl.FLOAT, false, 0, 0 )
return buffer
}
setBuffer( name, data ) {
var gl = this.gl
var buffers = this.data.buffers
if ( name == null && ! gl.bindBuffer( gl.ARRAY_BUFFER, null ) ) return
gl.bindBuffer( gl.ARRAY_BUFFER, buffers[ name ].buffer )
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( data ), gl.STATIC_DRAW )
}
updateBuffers() {
var gl = this.gl
var buffers = this.buffers
Object.keys( buffers ).forEach( name =>
buffers[ name ] = buffer.data
)
this.setBuffer( null )
}
createTexture( src ) {
var gl = this.gl
var texture = gl.createTexture()
gl.bindTexture( gl.TEXTURE_2D, texture )
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array( [ 0, 0, 0, 0 ] ) )
this.texture = texture
if ( src ) {
this.uniforms.hasTexture = 1
this.loadTexture( src )
}
}
loadTexture( src ) {
var gl = this.gl
var texture = this.texture
var textureImage = new Image()
textureImage.onload = () => {
gl.bindTexture( gl.TEXTURE_2D, texture )
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage )
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR )
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR )
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
// gl.generateMipmap( gl.TEXTURE_2D )
}
textureImage.src = src
}
update() {
var gl = this.gl
var now = performance.now()
var elapsed = ( now - this.time.start ) / 5000
var delta = now - this.time.old
this.time.old = now
this.uniforms.time = elapsed
if ( this.count > 0 ) {
gl.clear( gl.COLORBUFFERBIT )
gl.drawArrays( gl.POINTS, 0, this.count )
}
this.onUpdate( delta )
requestAnimationFrame( this.update )
}
}
var pointSize = 2.5
var waves = new ShaderProgram( document.querySelector( '.waves' ), {
texture: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8v0wLRAAAAJHRSTlMAC/goGvDhmwcExrVjWzrm29TRqqSKenRXVklANSIUE8mRkGpv+HOfAAABCElEQVQ4y4VT13LDMAwLrUHteO+R9f/fWMfO6dLaPeKVEECRxOULWsEGpS9nULDwia2Y+ALqUNbAWeg775zv+sA4/FFRMxt8U2FZFCVWjR/YrH4/H9sarclSKdPMWKzb8VsEeHB3m0shkhVCyNzeXeAQ9Xl4opEieX2QCGnwGbj6GMyjw9t1K0fK9YZunPXeAGsfJtYjwzxaBnozGGorYz0ypK2HzQSYx1y8DgSRo2ewOiyh2QWOEk1Y9OrQV0a8TiBM1a8eMHWYnRMy7CZ4t1CmyRkhSUvP3gRXyHOCLBxNoC3IJv//ZrJ/kxxUHPUB+6jJZZHrpg6GOjnqaOmzp4NDR48OLxn/H27SRQ08S0ZJAAAAAElFTkSuQmCC',
uniforms: {
size: { type: 'float', value: pointSize },
field: { type: 'vec3', value: [ 0, 0, 0 ] },
speed: { type: 'float', value: 5 },
},
vertex: `
#define M_PI 3.1415926535897932384626433832795
precision highp float;
attribute vec4 a_position;
attribute vec4 a_color;
uniform float u_time;
uniform float u_size;
uniform float u_speed;
uniform vec3 u_field;
uniform mat4 u_projection;
varying vec4 v_color;
void main() {
vec3 pos = a_position.xyz;
pos.y += (
cos(pos.x / u_field.x * M_PI * 8.0 + u_time * u_speed) +
sin(pos.z / u_field.z * M_PI * 8.0 + u_time * u_speed)
) * u_field.y;
gl_Position = u_projection * vec4( pos.xyz, a_position.w );
gl_PointSize = ( u_size / gl_Position.w ) * 100.0;
v_color = a_color;
}`,
fragment: `
precision highp float;
uniform sampler2D u_texture;
varying vec4 v_color;
void main() {
gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);
}`,
onResize( w, h, dpi ) {
var position = [], color = []
var width = 400 * ( w / h )
var depth = 400
var height = 3
var distance = 5
for ( var x = 0; x < width; x += distance ) {
for ( var z = 0; z < depth; z+= distance ) {
position.push( - width / 2 + x, -30, -depth / 2 + z )
color.push( 0, 1 - ( x / width ) * 1, 0.5 + x / width * 0.5, z / depth )
}
}
this.uniforms.field = [ width, height, depth ]
this.buffers.position = position
this.buffers.color = color
this.uniforms.size = ( h / 400) * pointSize * dpi
},
} )
}
});
修改提出的官网更新
2024-05-29 16:14:42 +08:00
// $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
// $("#ScrollTop").click(function () {
// $body.animate({ scrollTop: 0 }, 400)
// });
js
2024-04-02 17:45:46 +08:00
修改提出的官网更新
2024-05-29 16:14:42 +08:00
// 使用jQuery绑定点击事件到ID为"ScrollTop"的元素
$("#ScrollTop").click(function() {
// 使用jQuery的animate函数来平滑滚动到页面顶部
$("html, body").animate({
scrollTop: 0
}, 400);
});
js
2024-04-02 17:45:46 +08:00
文件更新
2025-02-10 15:48:22 +08:00
// $(function() {
// const currentTime = new Date().getTime();
// const lastPopupTime = localStorage.getItem("lastPopupTime");
// const showPopupDuration = 15 * 60 * 1000; // 设置为15分钟，用户关闭后15分钟内不再弹出
// // const showPopupDuration = 1 * 1000; // 设置为15分钟，用户关闭后15分钟内不再弹出
// $(window).on('load', function() {
// // 检查是否应该显示弹框
// if (shouldShowPopup(lastPopupTime, currentTime)) {
// // 显示图片弹框
// $("#popupMessage").css("display", "flex");
// }
// // 点击关闭按钮
// $("#closePopup").click(function() {
// $("#popupMessage").css("display", "none");
// // 记录关闭时间
// localStorage.setItem("lastPopupTime", currentTime);
// });
// // 点击“不再提醒”按钮
// $("#dontShowAgain").click(function() {
// $("#popupMessage").css("display", "none");
// // 设置不再显示的标记
// localStorage.setItem("dontShowPopupAgain", "true");
// });
// });
// // 判断是否应该显示弹框
// function shouldShowPopup(lastPopupTime, currentTime) {
// // 如果用户已经选择“不再提醒”，则不显示
// if (localStorage.getItem("dontShowPopupAgain") === "true") {
// return false;
// }
// // 如果没有记录上次显示时间，或者超过了设置的时间（例如7天）
// if (!lastPopupTime || currentTime - lastPopupTime > showPopupDuration) {
// return true;
// }
// return false;
// };
// })
js
2024-04-02 17:45:46 +08:00
Reference in New Issue Copy Permalink