常用JS特效
...大约 6 分钟
常用JS特效
禁止开发者工具
//判断F12审查元素
function fuckyou() {
window.close(); //关闭当前窗口(防抽)
window.location = "about:blank"; //将当前窗口跳转置空白页
}
function ck() {
console.profile();
console.profileEnd();
//我们判断一下profiles里面有没有东西，如果有，肯定有人按F12了，没错！！
if (console.clear) {
console.clear()
};
if (typeof console.profiles == "object") {
return console.profiles.length > 0;
}
}
function hehe() {
if ((window.console && (console.firebug || console.table && /firebug/i.test(console.table()))) || (typeof opera ==
'object' && typeof opera.postError == 'function' && console.profile.length > 0)) {
fuckyou();
}
if (typeof console.profiles == "object" && console.profiles.length > 0) {
fuckyou();
}
}
hehe();
window.onresize = function() {
if ((window.outerHeight - window.innerHeight) > 200)
//判断当前窗口内页高度和窗口高度，如果差值大于200，那么呵呵
fuckyou();
};
//禁止鼠标右键
document.oncontextmenu = function() {
event.returnValue = false;
};
//禁止文本复制和拷贝
$(document).bind("contextmenu copy selectstart", function() {
return false;
});
//禁止拖拽图片至新窗口打开
document.ondragover = function (e) { e.preventDefault(); };
document.ondrop = function (e) { e.preventDefault(); };
$(document).on("dragstart", function (e) {
return false;
});
//禁用页面的ctrl功能，来禁止ctrl+s保存功能
window.addEventListener('keydown', function (e) {
if(e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)){
e.preventDefault();
}
})
元素自适应居中
(function($) {
var methods = {
autosize: function(ele) {
if (ele.height() <= $(window).height()) {
ele.css("top", ($(window).height() - ele.height()) / 2.5); //高度居中
}
if(ele.width() <= $(window).width()) {
ele.css("left", ($(window).width() - ele.width()) / 2); //宽度居中
}
}
}
$.fn.extend({
propup: function(options) {
$this = $(this);
methods.autosize($this);
$(window).resize(function() {
methods.autosize($this);
});
}
});
})(jQuery);
$("#fixednav").propup(); //要居中的DOM元素
元素缓慢返回顶部
$("#fixedNavTop").click(function() {
$('body,html').animate({
scrollTop: 0
},
500);
return false; });
top粘性导肮(PC)
window.onload=
function(){
var oDiv = document.getElementById("stricky"),
H = 0,
Y = oDiv
while (Y) {H += Y.offsetTop; Y = Y.offsetParent}
window.onscroll = function()
{
var s = document.body.scrollTop || document.documentElement.scrollTop
if(s>H) {
oDiv.style = "position:fixed;top:0;background-color: #fff;"
} else {
oDiv.style = ""
}
}
}
IE版本判断
var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")
{
alert("IE 8.0");
}
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0")
{
alert("IE 7.0");
}
移动端字体REM自适应
!function(n){
var e=n.document,
t=e.documentElement,
i=720,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
tab滑动切换
HTML
<div class="product">
<div class="product_top">
<ul class="clearfix">
<li class="pro_top">
<div class="pro_title clearfix">
<img src="template/images/pro_1.png" alt="标题1">
<span>标题1</span>
</div> <i></i> </li> <li> <div class="pro_title">
<img src="template/images/pro_2.png" alt="标题2">
<span>标题2</span>
</a> <i></i> </li> <li> <div class="pro_title">
<img src="template/images/pro_3.png" alt="标题3">
<span>标题3</span>
</div> <i></i> </li> </ul> </div> <div class="product_bottom">
<ul class="clearfix">
<li class="pro_bot">
<div class="pro_main clearfix">
<div class="pro_img clearfix">
<a href="product/default.php?pid=2">
<img src="template/images/pro_list_1.jpg" alt="标题1">
</a> </div> <div class="pro_text clearfix">
<a href="product/default.php?pid=2">
<h3>标题1</h3>
<p>内容1</p>
<a href="product/default.php?pid=2" class="pro_more">了解详情</a>
</a> </div> </div> </li> <li> <div class="pro_main clearfix">
<div class="pro_img clearfix">
<a href="product/index.php?pid=42">
<img src="template/images/pro_list_2.jpg" alt="标题2">
</a> </div> <div class="pro_text clearfix">
<a href="product/index.php?pid=42">
<h3>标题2</h3>
<p>内容2</p>
<a href="product/index.php?pid=42" class="pro_more">了解详情</a>
</a> </div> </div> </li> <li class="pro_bot">
<div class="pro_main clearfix">
<div class="pro_img clearfix">
<a href="product/index.php?pid=39">
<img src="template/images/pro_list_3.jpg" alt="标题3">
</a> </div> <div class="pro_text clearfix">
<a href="product/index.php?pid=39">
<h3>标题3</h3>
<p>内容3</p>
<a href="product/index.php?pid=39" class="pro_more">了解详情</a>
</a> </div> </div> </li> </ul> </div></div>
JavaScript
$ (function ()
{
$ ('.product_top li').click (function ()
{
var that = $ (this);
that.addClass ('pro_top').siblings ('li').removeClass ('pro_top');
var i = that.index ('.product_top li');
var len = -100;
var lenwidth = len * i + '%';
$ ('.product_bottom li').css (
{
'-webkit-transform' : "translate(" + lenwidth + ")",
'-webkit-transition' : '300ms linear'
});
})
})
- 效果如下图：
input点击消失语法
<input type="text" name="" id="" onfocus="this.value=''" onblur="this.value='用户名/邮箱/手机号'">
swiper配置详解
//禁止鼠标滑动
最外层的容器上增加class="swiper-no-swiping"
//分页器开启
pagination: {
el: '.swiper-pagination-e',
//分页器可点击
clickable: true,
clickableClass : 'my-pagination-clickable',
//分页器换位缩略图
renderBullet: function (index, className) {
return '<span class="' + className + '"><image src="images/index_teacher_item0' + ( index + 1 ) + '.png"></span>';
},
},
//垂直方向
direction: 'vertical',
//初始化
slideToClickedSlide: true,
// loopedSlides: 5, //looped slides should be the same
preventsDefault:false, //干掉默认阻止的事件
observer:true, //初始化子元素
observerParents:true, //初始化父元素
//俩个轮播相互绑定
controller: {
control: galleryTop,
},
//缩略图切换
thumbs: {
swiper: galleryTop,
},
//开启按钮
navigation: {
nextEl: ".swiper-button-x",
prevEl: ".swiper-button-s",
},
//自动切换
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
swiper移动端滑动切换选项卡(导航可滑动)
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js" ></script>
<div class="container">
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide selected">推荐</div>
<div class="swiper-slide">菜单 2</div>
<div class="swiper-slide">菜单 3</div>
<div class="swiper-slide">菜单 4</div>
<div class="swiper-slide">菜单 5</div>
<div class="swiper-slide">菜单 6</div>
<div class="swiper-slide">菜单 7</div>
<div class="swiper-slide">菜单 8</div>
<div class="swiper-slide">菜单 9</div>
<div class="swiper-slide">菜单 10</div>
</div> </div> <!-- swiper2 -->
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping">
<div style="width: 100%;height: 100%;background-color: gainsboro;">上面导航栏可以滑动</div>
</div> <div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222</div>
<div class="swiper-slide swiper-no-swiping">内容 213213123</div>
<div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
<div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
<div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
<div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
<div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
<div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
<div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
</div> </div>
</div>
JavaScript
$(function() {
function setCurrentSlide(ele, index) {
$(".swiper1 .swiper-slide").removeClass("selected");
ele.addClass("selected");
//swiper1.initialSlide=index;
}
var swiper1 = new Swiper('.swiper1', {
// 设置slider容器能够同时显示的slides数量(carousel模式)。
// 可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
// loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 5.5,
paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
spaceBetween: 10,//slide之间的距离（单位px）。
freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
loop: false,//是否可循环
onTab: function(swiper) {
var n = swiper1.clickedIndex;
}
});
swiper1.slides.each(function(index, val) {
var ele = $(this);
ele.on("click", function() {
setCurrentSlide(ele, index);
swiper2.slideTo(index, 500, false);
//mySwiper.initialSlide=index;
});
});
var swiper2 = new Swiper('.swiper2', {
//freeModeSticky 设置为true 滑动会自动贴合
direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
loop: false,
// effect : 'fade',//淡入
//effect : 'cube',//方块
//effect : 'coverflow',//3D流
// effect : 'flip',//3D翻转
autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
onSlideChangeEnd: function(swiper) { //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
var n = swiper.activeIndex;
setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
swiper1.slideTo(n, 500, false);
}
});
});
CSS
.swiper1 {
width: 100%;
}
.swiper1 .selected {
color: #ec5566;
border-bottom: 2px solid #ec5566;
}
.swiper1 .swiper-slide {
text-align: center;
font-size: 16px;
height: 50px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
}
.swiper2 {
width: 100%;
}
.swiper2 .swiper-slide {
height: calc(100vh - 50px);
background-color: #ccc;
color: #fff;
text-align: center;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
- 效果如下：
