js仿土豆网带缩略图的焦点图片切换效果实现方法


Posted in Javascript onFebruary 23, 2015

本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>仿土豆网带缩略图的焦点图片切换效果</title>

<style type="text/css">

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#039; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

/* Focus_change style */

#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }

#focus_change_list { position:absolute; width:1800px; height:295px; }

#focus_change_list li { float:left; }

#focus_change_list li img { width:450px; height:295px; }

.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }

#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }

#focus_change_btn ul { padding-left:5px; }

#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }

#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }

#focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;}

#focus_change_btn .current img { border-color:#EEE; }

</style>

<script type="text/javascript">

function $(id) { return document.getElementById(id); }

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x && ypos == final_y) {

return true;

}

if (xpos < final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos > final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos < final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos > final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(){

var focusBtnList = $('focus_change_btn').getElementsByTagName('li');

for(var i=0; i<focusBtnList.length; i++) {

focusBtnList[i].className='';

}

}

function focusChange() {

var focusBtnList = $('focus_change_btn').getElementsByTagName('li');

focusBtnList[0].onmouseover = function() {

moveElement('focus_change_list',0,0,5);

classNormal()

focusBtnList[0].className='current'

}

focusBtnList[1].onmouseover = function() {

moveElement('focus_change_list',-450,0,5);

classNormal()

focusBtnList[1].className='current'

}

focusBtnList[2].onmouseover = function() {

moveElement('focus_change_list',-900,0,5);

classNormal()

focusBtnList[2].className='current'

}

focusBtnList[3].onmouseover = function() {

moveElement('focus_change_list',-1350,0,5);

classNormal()

focusBtnList[3].className='current'

}

}

setInterval('autoFocusChange()', 5000);

var atuokey = false;

function autoFocusChange() {

$('focus_change').onmouseover = function(){atuokey = true}

$('focus_change').onmouseout = function(){atuokey = false}

if(atuokey) return;

var focusBtnList = $('focus_change_btn').getElementsByTagName('li');

for(var i=0; i<focusBtnList.length; i++) {

if (focusBtnList[i].className == 'current') {

var currentNum = i;

}

}

if (currentNum==0 ){

moveElement('focus_change_list',-450,0,5);

classNormal()

focusBtnList[1].className='current'

}

if (currentNum==1 ){

moveElement('focus_change_list',-900,0,5);

classNormal()

focusBtnList[2].className='current'

}

if (currentNum==2 ){

moveElement('focus_change_list',-1350,0,5);

classNormal()

focusBtnList[3].className='current'

}

if (currentNum==3 ){

moveElement('focus_change_list',0,0,5);

classNormal()

focusBtnList[0].className='current'

}

}

window.onload=function(){

focusChange();

}

</script>

</head>

<body>

<div id="focus_change">

<div id="focus_change_list" style="top:0; left:0;">

<ul>

<li><a href="https://3water.com/"><img src="/images/m03.jpg" alt="" /></a></li>

<li><a href="https://3water.com/"><img src="/images/m04.jpg" alt="" /></a></li>

<li><a href="https://3water.com/"><img src="/images/m09.jpg" alt="" /></a></li>

<li><a href="https://3water.com/"><img src="/images/m10.jpg" alt="" /></a></li>

</ul>

</div>

<div class="focus_change_opacity"></div>

<div id="focus_change_btn">

<ul>

<li class="current"><a href="#"><img src="/images/s3.jpg" alt="" /></a></li>

<li><a href="#"><img src="/images/s4.jpg" alt="" /></a></li>

<li><a href="#"><img src="/images/s9.jpg" alt="" /></a></li>

<li><a href="#"><img src="/images/s10.jpg" alt="" /></a></li>

</ul>

</div>

</div><!--focus_change end-->

<div style="height:20px; background:#EEE;"></div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 #Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 #Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 #Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 #Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 #Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 #Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 #Javascript
You might like
php中截取字符串支持utf-8
2007/01/18 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
js静态作用域的功能。
2006/12/25 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python中str.format()详解
2017/03/12 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
python mock测试的示例
2020/10/19 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python 模块导入问题汇总
2021/02/01 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
教师开学感言
2014/02/14 职场文书
倡议书范文
2014/04/16 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
公司内部升职自荐信
2015/03/27 职场文书
新生开学寄语大全
2015/05/28 职场文书