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 相关文章推荐
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
php列出mysql表所有行和列的方法
2015/03/13 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
Js的MessageBox
2006/12/03 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
JavaScript的词法结构精华篇
2018/10/17 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python random模块常用方法
2014/11/03 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Django的信号机制详解
2017/05/05 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python作用域与名字空间原理详解
2020/03/21 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL