点击链接页面滑动到指定区域和图片延迟加载
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详解
Lazyload 延迟加载效果
ImagesLazyLoad 图片延迟加载效果
