jquery图片滚动放大代码分享(2)


Posted in Javascript onAugust 28, 2015

本文实例讲述了jquery图片滚动放大效果。分享给大家供大家参考。具体如下:
这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码。
运行效果图:                 -------------------查看效果-------------------

jquery图片滚动放大代码分享(2)

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动条放大效果 -</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
 <div id="content">
 <h1>jquery图片滚动条放大效果</h1>
 <div class="scroller demo1">
 <div class="inside">
 <a href="#"><img src="images/img1.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img2.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img3.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img4.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img5.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img6.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img7.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img8.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img9.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img10.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img11.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img12.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img13.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img14.jpg" alt="jsfoot" /></a>
 <a href="#"><img src="images/img15.jpg" alt="jsfoot" /></a>
 </div>
 </div>
 </div>
<link href="css/demo1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/scroller.js"></script>
<script type="text/javascript">
$(function(){
 $(".demo1").scroller();
});
</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>
</body>
</html>

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

Javascript 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 #Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 #Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 #Javascript
You might like
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
Yii2如何批量添加数据
2016/05/17 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python实现图片拼接的代码
2018/07/02 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
利用python计算时间差(返回天数)
2019/09/07 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python使用列表的最佳方案
2020/08/12 Python
PyQt实现计数器的方法示例
2021/01/18 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
大学生党校培训心得体会
2014/09/11 职场文书
学生党员检讨书范文
2014/12/27 职场文书
大学推普周活动总结
2015/05/07 职场文书
导游词之上海豫园
2019/10/24 职场文书