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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
vue构建单页面应用实战
Apr 10 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
JS动态显示倒计时效果
Dec 12 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php短网址和数字之间相互转换的方法
2015/03/13 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python语言快速上手学习方法
2018/12/14 Python
python实现二维插值的三维显示
2018/12/17 Python
Python3 元组tuple入门基础
2020/02/09 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
幼儿老师求职信
2014/06/30 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
见习报告的格式
2014/10/31 职场文书
辞职信格式范文
2015/05/13 职场文书
python基础之爬虫入门
2021/05/10 Python
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
JS 基本概念详细介绍
2021/10/16 Javascript
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript