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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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 FPDF类库应用实现代码
2009/03/20 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
javascript运动详解
2015/07/06 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python3 实现口罩抽签的功能
2020/03/11 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
养成教育经验材料
2014/05/26 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
高考学习决心书
2015/02/04 职场文书
法律意见书范本
2015/06/04 职场文书