超实用的jQuery代码片段
1.jQuery回到顶部效果
HTML代码:
<a href="javascript:;" id="btn" title="回到顶部"></a>
CSS代码:
<style>
#btn{
width:40px;
height:80px;
position:fixed;
left:93%;
bottom:30px;
background:url(images/top_bg.png) no-repeat left top;
display:none;
}
#btn:hover{
background:url(images/top_bg.png) no-repeat left -40px;
}
</style>
JS代码:
<script>
window.onload=function(){
var timer=null;
var istop=true;
// 获取屏幕可视区域的高度
var clientHeight=document.documentElement.clientHeight;
// 触发滚动条事件
window.onscroll=function(){
// 获得滚动条的高度
var ostop=document.documentElement.scrollTop||document.body.scrollTop;
// 如果滚动条的高度大于可视区域的高度
if(ostop>=clientHeight){
// 设置a标签可见
btn.style.display='block';
}else{
btn.style.display='none';
}
if(!istop){
clearInterval(timer);
}
istop=false;
} $('#btn').click(function(){
// 先清楚定时器,防止定时器叠加
clearInterval(timer);
timer=setInterval(function(){
var ostop=document.documentElement.scrollTop||document.body.scrollTop;
var ospeed=Math.ceil(ostop/5);
// 设置滚动条的高度
document.documentElement.scrollTop=document.body.scrollTop=ostop-ospeed;
istop=true;
// 如果滚动条的高度为0的时候
if(ostop==0){
clearInterval(timer);
}
},30);
})
}
</script>
2.处理图片的尺寸
HTML代码:
<ul id="imglist">
<li><img src="data:images/1.jpg" alt="" /></li>
<li><img src="data:images/2.jpg" alt="" /></li>
<li><img src="data:images/3.jpg" alt="" /></li>
<li><img src="data:images/4.jpg" alt="" /></li>
<li><img src="data:images/5.jpg" alt="" /></li>
<li><img src="data:images/1.jpg" alt="" /></li>
<li><img src="data:images/2.jpg" alt="" /></li>
<li><img src="data:images/3.jpg" alt="" /></li>
<li><img src="data:images/4.jpg" alt="" /></li>
<li><img src="data:images/5.jpg" alt="" /></li>
<li><img src="data:images/1.jpg" alt="" /></li>
<li><img src="data:images/2.jpg" alt="" /></li>
<li><img src="data:images/3.jpg" alt="" /></li>
</ul>
CSS代码:
<style>
#imglist{
list-style:none;
} #imglist li{
float:left;
margin:10px;
}
</style>
JS代码:
<script> // 图片修改大小
$('#imglist img').each(function() {
var maxWidth = 180;
var maxHeight = 180;
var ratio = 0;
var width = $(this).width();
var height = $(this).height(); //如果图片的实际高度大于最大的高度
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
} //如果图片的实际宽度大于最大的宽度
if(width > maxWidth){
// 求出设置的最大宽度是图片实际宽度的百分比
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
});
</script>
3.判断键盘输入
$(document).ready(function () {
$(this).keypress(function (e) {
switch (e.which) {
case 13:
alert("您按下了回车键");
break;
//more detect
}
});
});
4.倒计时,页面跳转
$(document).ready(function () {
var count = 10;
var timer = setInterval(function () {
$("p.countdown").html(count + " 秒后将跳转!");
if (count == 0) {
clearInterval(timer)
window.location = 'http://google.com';
}
count--;
}, 1000);
});
超实用的jQuery代码片段的更多相关文章
- 分享10个超实用的jQuery代码片段
来源:GBin1.com jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢! jQuery平滑回到顶端效果 $(doc ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 高效Web开发的10个jQuery代码片段(10 JQUERY SNIPPETS FOR EFFICIENT WEB DEVELOPMENT)
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
- 50个jquery代码片段(转)
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- 20+个可重复使用的jQuery代码片段
jQuery已经成为任何web项目的重要组成部分.它为网站提供了交互性的通过移动HTML元素,创建自定义动画,处理事件,选择DOM元素,检索整个document ,让最终用户有一个更好的体验. 在这篇 ...
- 10个可以直接拿来用的JQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...
- 可以直接拿来用的15个jQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了15段非常实用的jQue ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...
随机推荐
- 【HDOJ4322】Candy(费用流)
题意:给N个孩子分配M个糖果. 有一个N*M的矩阵表示孩子和糖果的关系,若第i行第j列的数是1则表示第i个孩子喜欢第j个糖果,反之不喜欢. 已知,若一个孩子被分配到他喜欢的糖果那么他将获得K的快乐值, ...
- Codeforces 628F Bear and Fair Set
题意: 给定若干个上限upto以及集合中在[1,upto]中的元素个数,问是否存在这样的集合使得集合中的元素除以5的余数的个数相等. 分析: 首先可以想到区间的数与其除以5的余数和区间编号分别一一对应 ...
- JAVA分布式架构
- MongoDB C#驱动
烟波钓徒 MongoDB C#驱动 http://www.mongodb.org/display/DOCS/CSharp+Driver+Tutorial 笔记 首先下载驱动.驱动有两个文件 Mongo ...
- substring详细用法,截取不行就用替换
SUBSTRING 返回字符.binary.text 或 image 表达式的一部分.有关可与该函数一起使用的有效 Microsoft® SQL ...
- 使用Post方法模拟登陆爬取网页(转)
使用Post方法模拟登陆爬取网页 最近弄爬虫,遇到的一个问题就是如何使用post方法模拟登陆爬取网页.下面是极简版的代码: import java.io.BufferedReader; impor ...
- day03-hdfs的客户端操作\hdfs的java客户端编程
5.hdfs的客户端操作 客户端的理解 hdfs的客户端有多种形式: 1.网页形式 2.命令行形式 3.客户端在哪里运行,没有约束,只要运行客户端的机器能够跟hdfs集群联网 文件的切块大小和存储的副 ...
- 【剑指Offer学习】【面试题65:滑动窗体的最大值】
题目:给定一个数组和滑动窗体的大小,请找出全部滑动窗体里的最大值. 举例说明 比如,假设输入数组{2,3,4,2,6,2,5,1}及滑动窗体的大小.那么一共存在6个滑动窗体,它们的最大值分别为{4,4 ...
- 基于MFC的一个简单计算器
写一个简单的计算器并不是什么很难的事,主要目的是要通过这个程序来学习和分析其中的核心算法.这个简易计算器的核心部分就是对输入的表达式的正确性判断与求值,其中包括对表达式的解析.中缀表达式转后缀表达式. ...
- distcp导致个别datanode节点数据存储严重不均衡分析
hadoop2.4生产集群已经执行一段时间了.因为大量的hadoop1.0上面的应用不断迁移过来.刚開始事hdfs这边还没有出现多少问题.随着时间的推移,近期发现个别的datanode节点上面的磁盘空 ...