木灵鱼儿
阅读:1574
JS预加载3
这次我们来做上一张和下一张按钮,HTML部分直接贴出来,反正就是strong元素只是做个显示展示,不做操作,然后在他的顶部覆盖一层span元素,这个元素做操作层。
效果图:
html代码:
div class="">
<div id="photo_masked"></div>
<div id="photo_big">
<i class="photo_off"><span class="off">+</span></i>
<h2 id="photo_title">预加载图片</h2>
<div class="big">
<img src="images/loading.gif" alt="" class=""/>
<strong class="sl"><</strong>
<strong class="sr">></strong>
<span class="left"></span>
<span class="right"></span>
</div>
</div>
</div>
css部分就不多说了,没啥高端操作,position: absolute;定位就行,span元素两个左右对半平分图片的宽度。
js部分,首先我们对hover做一个反馈,因为默认strong元素是透明的,当鼠标移动到左边的span上时,显示strong,移动到右边时,左边的strong透明,右边的显示。
//显示上一张下一张图标
$('#phpoto_big .big .left').hover(function(){
$('#phpoto_big .big .sl').animation({
'attr' : 'o',
'end' : 50,
'time' : 30
});
},function(){
$('#phpoto_big .big .sl').animation({
'attr' : 'o',
'end' : 0,
'time' : 30
});
});
$('#phpoto_big .big .right').hover(function(){
$('#phpoto_big .big .sr').animation({
'attr' : 'o',
'end' : 50,
'time' : 30
});
},function(){
$('#phpoto_big .big .sr').animation({
'attr' : 'o',
'end' : 0,
'time' : 30
});
});
显示效果做好后就是对图片做一个切换,当点击左边的时候切换到上一张图片。
之前我们已经对左右两张大图做了缓存,当你点击一张后会自动缓存左右的两张,我们只需要将缓存好的图片地址拿给弹窗显示的img即可。
因为缓存左右两张大图的操作是在img.click事件中的,而我们切换是在span.click中的,所以还需要将之前的图片地址放入对应左右两个span元素中去,也是自定义一个src属性。
//将图片地址传出去
$('#phpoto_big .big .left').attr('src',prev_img.src);
$('#phpoto_big .big .right').attr('src',next_img.src);
图片地址传出去后,我们便可以获取到然后再修改。
//上一张
$('#phpoto_big .big .left').click(function(){
$('#phpoto_big .big img').attr('src',$(this).attr('src'));
});
这样单次操作完成了,但是只能点击一次,第二次就无效了,所以我们点击后还要再次获取左右两张大图。
首先我们先获取到当前元素的索引值,然后就可以和之前预加载2中的一样,通过两个方法获取到左右两张的索引值。
但是我们无法直接获取到这个索引,因为你是span的click事件,并不是img的,那么我们将img的索引先传出来,丢给弹窗中img,自定义一个属性保存。
//将点击的图片索引值传出去
$('#phpoto_big .big img').attr('index',$(children).index());
这样我们点击图片后,当前图片的索引值传入img自定义属性index中,然后我们点击上一张的时候再计算一下。
//点击上一张后再次获取当前图片索引值
prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())
//$('#phpoto_big .big img').attr('index') 这个获取到之前传入的索引值
//但是这个索引值是string类型不能用于计算,这里用parseInt()转换,保留整数并转换为Number类型
//然后通过prevIndex()计算出上一个,这个上一个也就是本身的索引值,父元素使用$('#photo').first(),因为#photo中每个dl都对应一个img,这里使用photo合适。
获取到当前索引后,我就可以获取到当前元素,然后通过parentNode获取到dl元素,然后再使用prevIndex()计算出上一张的索引,然后故技重施,将预加载2中的代码再运行一次
//上一张
$('#phpoto_big .big .left').click(function(){
$('#phpoto_big .big img').attr('src',$(this).attr('src'));
var children = $('#phpoto dl dt img').getElemet(prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;
var prev = prevIndex($(children).index(),children.parentNode);
var next = nextIndex($(children).index(),children.parentNode);
//创建用于储存预加载图片的元素
var prev_img = new Image();
var next_img = new Image();
prev_img.src = $('#photo dl dt img').getElementBase(prev).attr('bsrc');
next_img.src = $('#photo dl dt img').getElementBase(next).attr('bsrc');
//将图片地址传出去
$('#phpoto_big .big .left').attr('src',prev_img.src);
$('#phpoto_big .big .right').attr('src',next_img.src);
//将点击的图片索引值传出去
$('#phpoto_big .big img').attr('index',$(children).index());
});
这样写就可以了,但是很大一串都重复了,我们将重复的部分封装一下:
function prev_next_img(children){
var prev = prevIndex($(children).index(),children.parentNode);
var next = nextIndex($(children).index(),children.parentNode);
//创建用于储存预加载图片的元素
var prev_img = new Image();
var next_img = new Image();
prev_img.src = $('#photo dl dt img').getElementBase(prev).attr('bsrc');
next_img.src = $('#photo dl dt img').getElementBase(next).attr('bsrc');
//将图片地址传出去
$('#phpoto_big .big .left').attr('src',prev_img.src);
$('#phpoto_big .big .right').attr('src',next_img.src);
//将点击的图片索引值传出去
$('#phpoto_big .big img').attr('index',$(children).index());
};
调用部分:
//上一张
$('#phpoto_big .big .left').click(function(){
$('#phpoto_big .big img').attr('src',$(this).attr('src'));
var children = $('#phpoto dl dt img').getElemet(prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;
prev_next_img(children)
});
//下一张
$('#phpoto_big .big .right').click(function(){
$('#phpoto_big .big img').attr('src',$(this).attr('src'));
var children = $('#phpoto dl dt img').getElemet(nextIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;
prev_next_img(children)
});
至此已经完成。
效果图:
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
高仿Skeleton Screen 骨架屏
现在给网站做了一个load的加载效果,但是目前流行的应该是Skeleton Screen 骨架屏,这个原本是在苹果端app里制作的,然后有人自己移植到web端,常见h5架构页面,如饿了么、知乎、facebook、酷安,都有应用,那么我就很好奇了,到底是怎么做的,于是百度了一下。了解Skeleton Screen 骨架屏解释有下:简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面,在等待页面加载,渲染完成之后,在保留页面布局样式的前提...

JS 预加载2
单独的图片预加载已经完成,这里我们为上一张和下一张图片预加载做个准备。主要就是先将上一张和下一张的大图同时加载,在同一个图片点击事件中(当某个图片被click后)。首先就是我们要获取到上一张和下一张的图片索引位置,再通过这个值计算后来锁定对应的图片。首先我们先获取当前图片父元素的父元素的索引位置,这里要先说名一下关系链:div----dl----dt----img//这里获取到的是dl元素,每个dl元素里面都有一个img,所以索引值是一样的 var children = this.parentNode.parentNode;获取到dl后我们要再得到这个元素在dl元素数组中的索引值,之前我...

《Yodu》预加载如何加载到自己需要的js内容
主题开启预加载可以加快访问速度,但是在一些程度上还是有一些取舍,比如js中的window.onload事件,就会只运行一次,当你进入到下一个页面的收,window.onload里面执行的内容就完全停止了,甚至可以说没有了,有点像是,你吃着吃着突然就换了一个肚子,这样虽然吃的也多,但是不一样了啊,和原来的对不上了,所以我们还是要针对这种情况,让js代码再次运行,这就相当于换了个肚子,还要接上才能用。询问了下泽泽,他说《Yodu》的预加载在footer.php中,在if (isInitialLoad === false) {}中,具体如下图:我们可以看到在这个里面其实有很多if的判断语句,这...
