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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP.vs.JAVA
2016/04/29 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript快速排序算法详解
2014/09/17 Javascript
jQuery知识点整理
2015/01/30 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
javascript的几种写法总结
2016/09/30 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
代理商会议邀请函
2014/01/27 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
公司股东出资证明书
2014/11/01 职场文书
花田少年史观后感
2015/06/16 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
详解Python类和对象内容
2021/06/22 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript