jquery实现图片水平滚动效果代码分享


Posted in Javascript onAugust 26, 2015

本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考。具体如下:
运行效果图:-------------------查看效果-------------------

jquery实现图片水平滚动效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery实现图片水平滚动效果代码如下

<HEAD>
<META content="text/html; charset=gb2312" http-equiv="Content-Type">
<TITLE>jquery实现图片水平滚动效果</TITLE>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
<SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>

<!--演示内容开始-->
<SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT>
<DIV class="artist_flow_contn">
 <UL id="flip" class="ui-jcoverflip">
  <LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN></LI>
  <LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN></LI>
  <LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN></LI>
  <LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN></LI>
  <LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN></LI>
  <LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN></LI>
  <LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN></LI>
  <SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN>
 </UL>
 <DIV id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A 
style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all" 
href="#"></A></DIV>
</DIV>
<SCRIPT type="text/javascript">
$(document).ready(function(){

 // cover flip effects //
 //var noOfArtists = 31; //jx
 var noOfArtists = 7; //jx
 
 $('#flip').jcoverflip({
 current: 0,
 
 beforeCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',
  bottom: '20px'
  }, {}), $.jcoverflip.animationElement(el.find('img'), {
  width: Math.max(10, 120 - 0 * offset * offset) + 'px'
  }, {})];
 },
 afterCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 + 100 + 130 * offset) + 'px',
  bottom: '20px'
  }, {}), $.jcoverflip.animationElement(el.find('img'), {
  width: Math.max(10, 120 - 0 * offset * offset) + 'px'
  }, {})];
 },
 currentCss: function(el, container){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 80) + 'px',
  bottom: '20px'
  }, {}), $.jcoverflip.animationElement(el.find('img'), {
  width: '160px'
  }, {})];
 },
 change: function(event, ui){
  //jx $('#scrollbar').slider('value', ui.to * 10);
  $('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx
 }
 });
 
 $('#scrollbar').slider({
 //jx value: 50,
 value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0
 //jx step: 10,
 step: 100 / (noOfArtists - 1), //jx
 stop: function(event, ui){
  if (event.originalEvent) {
  //jx var newVal = Math.round(ui.value / 10);
  var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx
  $('#flip').jcoverflip('current', newVal);
  //jx $('#scrollbar').slider('value', newVal * 10);
  $('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx
  }
 }
 });
 // cover flip effects //

});
</SCRIPT>
<!--演示内容结束-->

</BODY>
</HTML>

以上就是为大家分享的jquery实现图片水平滚动效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
jQuery-ui中自动完成实现方法
Jun 10 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JQuery中clone方法复制节点
May 18 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 #Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 #Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 #Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 #Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 #Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 #Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 #Javascript
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python利用ansible分发处理任务
2015/08/04 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
pycharm显示远程图片的实现
2019/11/04 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
利用python绘制正态分布曲线
2021/01/04 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
个人充满哲理的自我评价
2014/02/20 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技