js手机左右滑动翻页效果代码(手机滑页改翻页)[20240425更新]
admin 发布:2024-04-25 16:06 143
今天给各位分享js手机左右滑动翻页效果代码的知识,其中也会对手机滑页改翻页进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、如何用js做翻页效果
- 2、怎么用JS代码实现,带箭头左右滑动的效果
- 3、js图片左右滚动 怎么弄 有没案例代码 求帮忙
- 4、用js怎样做手机端触屏滚动选择效果啊
- 5、跪求,js手机移动端html点击图片弹出后可触摸屏左右滑动上下张图片的效果
- 6、网页js左右滑动代码。
如何用js做翻页效果
参考代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title/title
script type="text/javascript" language="javascript" src=""/script
script type="text/javascript" language="javascript"
$(function() {
$("#right").click(function() {
var roll = $("div/div", { css: { position: "absolute", border: "solid 1px #999", left: "806px", top: "10px", height: "494px", width: "1px", background: "#fff"}}).appendTo($("#book").parent());
$(roll).animate({
left: "10px",
width: "398px"
}, 1000, function() {
$("#left").css({"background":"#fff"});
$(roll).fadeOut(300, function() {
$(roll).remove();
})
});
});
});
/script
/head
body style="padding:5px;margin:0;"
div id="book" style="width:797px;height:494px;background:#ccc;border:solid 6px #ccc;"
div id="left" style="width:398px;height:494px;float:left;background:url() no-repeat top left;cursor:pointer;"/div
div id="right" style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"p style="margin-top:470px;font-size:12px;color:#999;"点这翻页 /p/div
/div
/body
/html
怎么用JS代码实现,带箭头左右滑动的效果
或许可以这样。页面中间放几个iframe,命名里边加上数字,比如iframe_1,iframe_2,iframe_3。然后旁边放两个按钮。默认iframe_1可见,其他隐藏。点右翻页就iframe_2可见,其他隐藏。不知道行不行得通。
js图片左右滚动 怎么弄 有没案例代码 求帮忙
1.jquery.imgScroll.js
;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var imgLen=$(object.scrollImgBox).length;var imgNum=0;var tabNum=0;var nowIndex=0;var index;var scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function changeEffectNext(){if(object.changeType=='slide'){if(imgNumimgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNumimgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNumimgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function changeEffectPrev(){if(object.changeType=='slide'){if(imgNum0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow');$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index();changesmallImg(index)})}}})})(jQuery);
2.html结构
a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position: relative;}
.lbBtn{display:block;position: absolute;top:0;width:40px;height:143px;border:1px solid #D7D2CA;background:url('../../../images/special/140801/ctr_prev.png') no-repeat center center;}
.lbPrev{left:0}.lbNext{right:0;background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color: #ddd;}
.lbBox{width:900px;height:145px;margin-left: 50px;overflow: hidden;position: relative;}
.lbList{width:1000%;}
.lbBox ul{float:left}
.lbBox li{float:left;width:150px;height:145px;overflow: hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"微软雅黑";color:#333}
.lbPeo img{display:block;border: 1px solid #ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeo h5{font-weight: bold;font-size:12px;padding-top: 5px;*padding-top: 0}
.lbPeo h6{font-size:12px;}
.lbBox li a:hover{text-decoration: none}
.lbBox li a:hover .lbPeo{color:#ff9600}
!-- 人物--
div class="lbCon comWith clearfix"
div class="lbBox"
div class="lbList"
ul
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
/ul
ul
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大2红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李2大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
/ul
/div
/div
a href="javascript:;" class="lbBtn lbPrev"/a
a href="javascript:;" class="lbBtn lbNext"/a
/div
3.页面调用:
script type="text/javascript" src="js/jquery-1.9.1.js"/script
script type="text/javascript" src="js/jquery.imgScroll.js"/script(上面那个js)
$('.lbCon .lbBox .lbList').imgScroll({
firstDiv: '.lbCon .lbBox',
scrollBox: '.lbCon .lbBox .lbList',
scrollImgBox: '.lbCon .lbBox ul',
botPrev: '.lbCon .lbPrev',
botNext: '.lbCon .lbNext',
changeType: "slide",
thumbNowClass: 'on',
thumbOverEvent: true,
changeTime: 5000,
ImgBoxMar: 0,
flag: false
});
4.至于鼠标滑过 显示左右按钮,可以这么写(思路:css默认隐藏左右按钮,鼠标滑过显示左右按钮,划出隐藏,需要引入jquery.js)
$(function(){
$(".wj_jdt_1").bind("onmouseover",function(){
$(".ctr_btn").show();
}).bind("onmouseout",function(){
$(".ctr_btn").hide();
})
})
大体是这么个意思,至于怎么延伸在你
用js怎样做手机端触屏滚动选择效果啊
先说下实现的思路:
1 页面布局,一堆等待滚动选择的列表 先实现一个竖排的列表,触屏能滚动,也就是说先不考虑选择的问题 写一个固定高度的盒子 把一堆待选择的列表放里面 触屏滚动大概就实现了 简单代码:
div style="height:300px" id=“box”
li style="height:100px"/li
li style="height:100px"/li
...
/div
2: 滚动选择 第一步监控触屏滚动 onmousedown onmousemove onmouseup 监控鼠标触屏在box里的上下移动距离 也就是说滚动屏幕了多远 然后box scrollTop定位的减去移动的距离也就可以算出当前box距离顶部的距离 例如 mousemove -300px 原来的scrollTop为0 那现在0-(-300)=300px 那么每个li 100px 然后定位当前选中的 li标签 300/100 = 3 当前为选中了 列表中的第三个
3 以上只是提供了一个简单的实现思路 下面是别人的案例你可以看下 大体上就是这种思路实现的
网页链接
跪求,js手机移动端html点击图片弹出后可触摸屏左右滑动上下张图片的效果
这是一个叫photoswipe的插件,挺好用的,平滑滑动,上一张下一张,点击放大等功能
这是我自己精简了一下的.里面有Demo,你自己看吧.
网页js左右滑动代码。
script
var show = 0;
function leftRun(){
show-=100;
document.getElementById("b").style.marginLeft = show+"px";
}
function leftRun(){
show+=100;
document.getElementById("b").style.marginRight= show+"px";
}
/script
div id="a" width="500"
div id="b" width="1000"
正文内容
/div
/div
input type="button" id="leftRun" onclick="leftRun()" /
input type="button" id="rightRun" onclick="rightRun()" /
js手机左右滑动翻页效果代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于手机滑页改翻页、js手机左右滑动翻页效果代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:精准营销策略都有哪些,精准营销的策略
- 下一篇:外链生成器,外链生成工具
相关推荐
- 05-05tab滑动门代码(css滑动门代码)[20240505更新]
- 05-05androidoa开源代码(android源码网)[20240505更新]
- 05-05C234代码(c2414代码)[20240505更新]
- 05-05决策树算法代码(决策树算法伪代码)[20240505更新]
- 05-05db6小波代码(db3小波)[20240505更新]
- 05-05miui开源代码(miui 源码)[20240505更新]
- 05-05销售数据管理程序代码(销售数据管理程序代码是什么)[20240505更新]
- 05-05js轮播效果实现代码(js实现轮播图代码)[20240505更新]
- 05-05androidone代码下载(安卓app代码)[20240505更新]
- 05-05商品手机网页代码(手机淘宝代码)[20240505更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接