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 相关文章推荐
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
vue实现记事本功能
Jun 26 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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页面间传递参数实例代码
2008/06/05 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
高三自我鉴定怎么写
2013/10/19 职场文书
经理助理岗位职责
2014/03/05 职场文书
优秀广告词大全
2014/03/19 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL