js实现点击按钮实现上一张下一张相册滚动效果
/*
***判断图片是否构成滚动效果
*/
$(function(){
if($("#bar").find('img').size()*71<=$("#bar").width()){
$("#table_img").width($("#bar").find('img').size()*71);
}
if($("#bar").find('img').size()*71>=$("#bar").width()){
var scrollfn = function(direction,bar,callback){
bar=document.getElementById(bar);
var step = 71, scrollLeft=parseInt($(bar).attr('scrollLeft'),10) + direction*step,
scrollWidth=parseInt($(bar).attr('scrollWidth'),10), row=$(bar).find('tr'), len = $(bar).find('img').size();
var first = $(bar).find('img').first(),
last = $(bar).find('img').last();
if(scrollLeft<0){scrollLeft=0;}
if(direction > 0 ){
var offset = last.offset();
if(offset.left-$("#leftbt").offset().left <= $(bar).width()){
var first=$(row.find('td').get(0));
row.append('<td>'+first.html()+'</td>');
}
}else{
var offset = first.offset();
if(offset.left-$("#leftbt").offset().left<step&&offset.left-$("#leftbt").offset().left>0){
var last=$(row.find('td').get(row.find('td').size()-1));
row.prepend('<td>'+last.html()+'</td>');
$(bar).attr('scrollLeft',step+scrollLeft);
}
}
$(bar).animate({
scrollLeft:scrollLeft
},{
complete:function(){
if(row.find('td').size()>len){
if(direction>0){
var first=$(row.find('td').get(0));
first.remove();
}else if(direction<0){
var last=$(row.find('td').get(row.find('td').size()-1));
last.remove();
}
}
if(callback)callback();
}
});
};
var getIndex = function(list, it){
var index = 0;
list.each(function(i){
if(this == it){
index = i;
return false;
}
});
return index;
};
function left_click(){
var index = getIndex($('#bar').find('td'), $('.focus').get(0));
$('#bar').find('td').eq(index - 1).click();
}
function right_click(){
var index = getIndex($('#bar').find('td'), $('.focus').get(0));
$('#bar').find('td').eq(index + 1).click();
}
/*
左右按钮点击事件
*/
$('#leftbt').click(function(){
if(!$('#bar').is(":animated")){
scrollfn(-1,"bar",left_click);
}
});
$('#rightbt').click(function(){
if(!$('#bar').is(":animated")){
scrollfn(1,"bar",right_click);
scrollfn(1,"bar");
}
});
}
function table_tab(number){
/**
* 判断当前选中图片
*
**/
$("#bar td").removeClass('focus');
if(!isNaN(number)){
$("#bar td").eq(number).addClass('focus');
var img = $("#bar td").find('img').eq(number);
$('#ph_img_big').find('img').attr('src', img.attr('src'));
images_WH();
}else{
$("#bar td").eq(0).addClass('focus');
var img = $("#bar td").find('img').eq(0);
$('#ph_img_big').find('img').attr('src', img.attr('src'));
images_WH();
}
}
/**
* 图片的切换
*
**/
$("#bar td").live("click",function(){
$("#bar td").removeClass('focus');
$(this).addClass('focus');
var img = $(this).find('img');
$('#ph_img_big').find('img').attr('src', img.attr('src'));
images_WH();
})
table_tab(2);//默认情况下点击的图片时哪一张,如果传值则默认的是传值的那一张,否则为第一张;
/**
**点击大图事件
*
*/
function getEvent(){
if(document.all){
return window.event;
}
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0. stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
function Get_mouse_pos(obj){
var event=getEvent();
if(navigator.appName=='Microsoft Internet Explorer'){
return event.offsetX;
}else if(navigator.appName=='Netscape'){
return event.pageX-obj.offsetLeft;
}
}
function turnover(obj){
var move_x=Get_mouse_pos(obj);
var img_width=document.getElementById("imgID").offsetWidth;
var show_width=img_width;
if(move_x >= show_width/2){
obj.style.cursor="URL(../images/next.cur),auto";
obj.title='下一张';
obj.onclick=function(){
$('#rightbt').click();
};
}else{
obj.style.cursor="URL(../images/pre.cur),auto";
obj.title='上一张';
obj.onclick=function(){
$('#leftbt').click();
}
}
}
$("#imgID").mousemove(function(){
turnover(this);
})
});
/*
*图片缩放
*/
var showImg = function(img,maxWidth,maxHeight){
var rate=(maxHeight/img.height>maxWidth/img.width?maxWidth/img.width:maxHeight/img.height);
if(rate<1){
img.width=img.width*rate;
img.height=img.height*rate;
}
return img;
};
function images_WH(){
var imgs =new Image();
/**
**图片超出等比例缩放
**/
var imagID=document.getElementById("imgID");
imgs.onload = function(){
var FitWidth=894,FitHeight=435;
showImg(this, FitWidth, FitHeight);
imagID.width = imgs.width;
imagID.height = imgs.height;
imagID.style.display='';
};
imgs.src=imagID.src;
}
js实现点击按钮实现上一张下一张相册滚动效果的更多相关文章
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- js实现点击按钮传值
js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- 使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- 原生JS 实现点击按钮创建元素
要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...
- JS实现点击按钮,下载文件
PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...
- js实现点击按钮弹出上传文件的窗口
转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...
随机推荐
- OpenERP7.0安装后提示“not supported" ,如何去掉此提示
转自:http://blog.csdn.net/vnsoft/article/details/17581831 下载了新版本的OpenERP7.0安装测试,发现在登录后会提示如图的内容. 经过测试发现 ...
- Filezilla开源FTP传输工具
生于忧患,死于安乐!在进取中思考... 官网:https://filezilla-project.org/ #FileZilla截图 免费.开源的FTP链接工具! 云下载: http://pan.ba ...
- 商家 APP 如何接入新版支付宝支付,老版本商家如何升级
代码地址如下:http://www.demodashi.com/demo/14006.html 前言 支付宝移动支付2.0版本对比1.0版本做了较大更新,新申请的商家都需要采用最新2.0版本 SDK ...
- PHP-表达式
最精确的定义一个表达式的方式就是"任何有值的东西" $a = 5; 1 > 2;等
- 【转载】PL/SQL配置连接ORACLE
一.需安装ORACL客户端. 配置文件路径: E:\Oracle\product\10.1.0\Client_3\NETWORK\ADMIN\tnsnames.ora 内容如下: # TNSNAMES ...
- 【LeetCode】79. Word Search
Word Search Given a 2D board and a word, find if the word exists in the grid. The word can be constr ...
- CYDIA装了个插件,想删除怎么都删除,电脑如何删除插件?
http://bbs.weiphone.com/read-htm-tid-3670917.html 装了个插件,想删除怎么都删除不掉不要跟我说在CYDIA里面删除.,在CYDIA里点击该插件就会闪退C ...
- Android开发学习之Gallery和GridView浅析
一.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery还可以和ImageSwitcher组件结合使用来 ...
- vscode自定义背景颜色
vscode自定义背景颜色 大概做前端的builder(只会打代码的才是coder,嘻嘻~)一半以上都会使用vscode编辑代码吧,vscode很轻量,支持的文件拖拽加入编辑区功能我个人认为很方便 ...
- Unix环境高级编程(三)标准I/O库
标准I/O库是ISO C的标准,在很多操作系统上面都实现.Unix文件I/O函数都是针对文件描述符的,当打开一个文件的时候,返回该文件描述符用于后续的I/O操作.而对于标准I/O库,操作则是围绕流进行 ...