只加载当前浏览器显示部分屏幕的图片>>表单按钮>>网页特效>>畅无忧设计

网站首页
手机版
注册登录
您现在的位置：畅无忧设计 >> 网页特效 >> 表单按钮 >> 正文
热门文章
Js实现点击添加增加一行，点击删除
DIV中实现input垂直居中
常用的选择省份城市的联动下拉列表
JS动态增加删除一组输入框
jQuery实现Email邮箱地址自动补全代
Select实现多选
JS动态批量创建带表单文本框的表格
JS实现上传本地图片前先预览
日期选择下拉框
漂亮的点击弹出的登陆框
没有相关文章
只加载当前浏览器显示部分屏幕的图片
来源：中国站长天空更新时间：2011/5/14 9:20:34 阅读次数：我要投稿
△运行
☉预览
特效预览：
#复制
+收藏
特效代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>只加载当前浏览器显示部分屏幕的图片</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{border:0;}
a{display:inline;float:left;margin:55px;background:#ccc;overflow:hidden;font-size:0;}
</style>
<script src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409214211.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
 var $winH = $(window).height();//获取窗口高度
 var $img = $("#show img");
 var $imgH = parseInt($img.height()/2);//图片到一半的时候显示
 var $srcDef = "a.gif";
 runing();//页面刚载入时判断要显示的图片
 //****************************************
 $(window).scroll(function(){
  runing();//滚动刷新
 })
 //****************************************
 function runing(){
  $img.each(function(i){//遍历img
   var $src = $img.eq(i).attr("original");//获取当前img URL地址
   var $scroTop = $img.eq(i).offset();//获取图片位置
   if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH){//判断窗口至上往下的位置
    if($img.eq(i).attr("src") == $srcDef){
     $img.eq(i).hide();
    }
    $img.eq(i).attr("src",function(){return $src}).fadeIn(300);//元素属性交换
   }
  })
 }
})
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="show">
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103315039.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103315039.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103303012.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103303012.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103315039.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103303012.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409265548.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103303012.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409253423.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409275766.jpg"></a>
 <a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051409231516.gif" width="160" height="160" original="http://www.zzsky.cn/effect/images/201104162210/5637885820110126103303012.jpg"></a>
</div>
</body>
</html>
△运行
☉预览
特效预览：
#复制
+收藏
特效说明：
只加载当前浏览器显示部分屏幕的图片
上一篇文章：指定文本框输入长度并自动转跳到下一个文本框
下一篇文章：限制文本框输入字数，以百分比显示