点击链接页面滑动到指定区域_和_图片延迟加载,图片懒加载

点击链接页面滑动到指定区域和图片延迟加载

 

JS代码

 

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

 <script type="text/javascript">
         
		 //点击链接页面滑动到指定区域
		 
        $(document).ready(function () {


            $('a').click(function () {


                var className = $.attr(this, 'href').substr(1);//获取href参数#后面的ID


                $('html, body').animate({


                    scrollTop: $("#" + className).offset().top//获取改ID的scrollTop值


                }, 700);//以700毫秒滑行


                return false;


            });
			
			
			//图片延迟加载


            $(".lazyimg").lazyload({


                placeholder: "/App/Tpl/Wap/Default/Public/images/grey.gif",//赋值延迟加载的图片


                effect: "fadeIn"


            });


        });
    </script>		 //点击链接页面滑动到指定区域
		 
        $(document).ready(function () {


            $('a').click(function () {


                var className = $.attr(this, 'href').substr(1);//获取href参数#后面的ID


                $('html, body').animate({


                    scrollTop: $("#" + className).offset().top//获取改ID的scrollTop值


                }, 700);//以700毫秒滑行


                return false;


            });
			
			
			//图片延迟加载


            $(".lazyimg").lazyload({


                placeholder: "/App/Tpl/Wap/Default/Public/images/grey.gif",//赋值延迟加载的图片


                effect: "fadeIn"


            });


        });
    </script>

 

 

 

HTML 代码

 

 

<div id="div1" style="height:500px;">1</div>
<div id="div2" style="height:500px;">2</div>
<div id="div3" style="height:500px;">3</div>
<div id="div4" style="height:500px;">4</div>
<div id="div5" style="height:500px;">5</div>
<div id="div6" style="height:500px;">6</div>
<div id="div7" style="height:500px;">7</div>
<div id="div8" style="height:500px;">8</div>
<div id="div9" style="height:500px;">9</div>
<div id="div10" style="height:500px;">10</div>
<div id="div11" style="height:500px;">12</div>

<div style="position:fixed; bottom:0px; height:36px; width:100%; background:#ff6600;">
<div class="cp_div"><a href="#div1">1</a></div>
<div class="cp_div"><a href="#div2">2</a></div>
<div class="cp_div"><a href="#div3">3</a></div>
<div class="cp_div"><a href="#div4">4</a></div>
<div class="cp_div"><a href="#div5">5</a></div>
<div class="cp_div"><a href="#div6">6</a></div>
<div class="cp_div"><a href="#div7">7</a></div>
<div class="cp_div"><a href="#div8">8</a></div>
<div class="cp_div"><a href="#div9">9</a></div>
<div class="cp_div"><a href="#div10">10</a></div>
<div class="cp_div"><a href="#div11">11</a></div>
<div class="cp_div"><a href="#div12">12</a></div>
</div>

 

 

 

 

 

css代码

 

 

<style>
.cp_div{
 line-height:36px;
 width:8.25%; 
 float: left; 
 border-right:#fff solid 1px; 
 text-align:center}
</style>

 

 

 

 

 

图片延迟加载--延伸阅读

 

 

jQuery.lazyload详解

 

 

 

http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html

 

 

Lazyload 延迟加载效果

http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html

 

 

 

 

 

ImagesLazyLoad 图片延迟加载效果

http://www.cnblogs.com/cloudgamer/archive/2010/03/03/ImagesLazyLoad.html