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 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
Js四则运算函数代码
Jul 21 Javascript
js清空form表单中的内容示例
May 20 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
node使用promise替代回调函数
May 07 Javascript
前端深入理解Typescript泛型概念
Mar 09 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
js图片上传的封装代码
2017/08/01 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
浅谈django中的认证与登录
2016/10/31 Python
python高阶爬虫实战分析
2018/07/29 Python
python实现字符串和字典的转换
2018/09/29 Python
python opencv实现图像边缘检测
2019/04/29 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
Weblogc domain问题
2014/01/27 面试题
淘宝网店营销策划书
2014/01/11 职场文书
文体活动实施方案
2014/03/27 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
企业安全生产规章制度
2015/08/06 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS