1. 程式人生 > >做網站經常會用到的一些js效果

做網站經常會用到的一些js效果

lan ntb 是否 ray getc tle complete self eight

1.返回頂部

$(function(){
$(‘.top‘).hide();
$(window).scroll(function() {
if($(window).scrollTop() >= 100){
$(‘.top‘).fadeIn(300);
}else{ $(‘.top‘).fadeOut(300); }
});
$(‘.top‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);});
});
2.點擊錨點移動到對應的位置
$(".aa").click(function(event){
event.preventDefault(); //取消事件的默認動作。
$(‘html,body‘).animate({scrollTop:$(this.hash).offset().top},800);
});
3.判斷頁面加載是否完成
document.onreadystatechange = loadingChange;//當頁面加載狀態改變的時候執行這個方法.
function loadingChange() {
if(document.readyState == "complete"){ //當頁面加載狀態為完全結束時進入
$(".loading").hide();//當頁面加載完成後將loading頁隱藏
window.location.href="http://www.baidu.com";
}
}
4.禁止鼠標右鍵
$(document).ready(function(){
$(document).on("contextmenu",function(e){
return false;
});
});
5.判斷是pc端還是移動端
function getClientInfo(){
var banner=document.getElementById(‘banner‘);
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var agentinfo = null;
for (var i = 0; i < Agents.length; i++) {
if (userAgentInfo.indexOf(Agents[i]) > 0) { agentinfo = userAgentInfo; break; }
}
if(agentinfo){
$(‘.banner‘).css(‘height‘,‘auto‘);
banner.style.height=‘auto‘
}else{
$(‘.banner‘).css($(window).height());
banner.style.height=document.body.clientHeight
}
}
6.判斷是否是ie瀏覽器
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window){
return true;
}else{}
return false;
}
7、返回上一頁
方法一、以按鈕點擊的方式實現:
<input type="button" name="Submit" value="返回上一頁" onclick="javascript:window.history.back(-1);">
或者
<input type="button" name="Submit" value="返回上一頁" onclick="javascript:history.back(-1);">
方法二、以圖片點擊的方式實現:
<img src="圖片的路徑" onclick="javascript:window.history.back(-1);" title="返回上一頁" alt="返回點擊圖片" />
或者
<img src="圖片的路徑" onclick="javascript:history.back(-1);" title="返回上一頁" alt="返回點擊圖片" />
方法三、文字點擊的方式實現:
<a href="javascript:history.back(-1)">返回上一頁</a>
或者
<a href="#" onClick="javascript:history.back(-1);">返回上一頁</a>

方法四、圖片鏈接的方式實現:
<a href="javascript:window.history.back(-1)" target="_self"><img src="圖片的路徑" /></a>
或者
<a href="javascript:history.back(-1)" target="_self"><img src="圖片的路徑" /></a>
方法五、過幾秒鐘後返回上一頁代碼:
<script language="javascript">setTimeout("window.history.go(-1)",3000)</script>
或者
<script language="javascript">setTimeout("history.go(-1)",3000)</script>

WEB前端學習交流群21 598399936

做網站經常會用到的一些js效果