常用的js效果

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="返回上一页" οnclick="javascript:window.history.back(-1);">

或者

<input type="button" name="Submit" value="返回上一页" οnclick="javascript:history.back(-1);">

方法二、以图片点击的方式实现：

<img src="图片的路径" οnclick="javascript:window.history.back(-1);" title="返回上一页" alt="返回点击图片" />

或者

<img src="图片的路径" οnclick="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>