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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
创建一个类Person的简单实例
May 17 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
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 取得瑞年与平年的天数的代码
2009/08/10 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
浅析Git版本控制器使用
2017/12/10 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python 为什么说eval要慎用
2019/03/26 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
村道德模范事迹材料
2014/08/28 职场文书
住房抵押登记委托书
2014/09/27 职场文书
2014年测量员工作总结
2014/12/12 职场文书
导游词开场白
2015/01/31 职场文书
出国留学自荐信模板
2015/03/06 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
毕业证明模板
2015/06/19 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏