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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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中创建并处理图象
2006/10/09 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
Express的路由详解
2015/12/10 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python字典底层实现原理详解
2019/12/18 Python
python super函数使用方法详解
2020/02/14 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
铁路工务反思材料
2014/02/07 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
小学数学教研活动总结
2014/07/01 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
新教师培训心得体会
2014/09/02 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
解析Redis Cluster原理
2021/06/21 Redis
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技